Data Structure Visualizer Instructions

Developed by: Caleb Evans and Kyle Gullicksen
Advisor: Rika Yoshii
Copyright 2016

It’s basically a sandbox for seeing what happens to a linked list by changing some of the pointers in that list, one pointer at a time. By change, I mean two things:

1. You can change which node a pointer points to (aka assignment; this includes assigning a pointer to a new node or NULL),
2. You can delete the node (therby leaving you with a dangling pointer),

• What do these even mean?

  By reachable nodes, we mean all of the nodes that can be ‘reached’ by first begining at the Front node, and then successively following all of the next pointers until you reach a next pointer whose value is NULL. The unreachable nodes are simply all of the remaining nodes; i.e., those nodes which are not reachable.

• What do reachable nodes look in the webapp?

  

• What about unreachable nodes?

  

  The gray nodes (with values 99 and 74) are examples of unreachable nodes, in contrast to the reachable nodes 24 and 42.

Pointers

• The types

There are basically three different types of pointers in the webapp:

1. The position pointers (Front, Rear, P, and T),
2. Next pointers of reachable nodes,
3. Finally, the next pointers of the unreachable nodes.

• Examples

  • Position Pointers (reminder: position pointers = Front, Rear, T, and P)

    The position pointers can appear in two basic flavors in the webapp, depending upon if the pointer in question is NULL or not.

    • NULL position pointer

      For example, here’s how the Rear pointer appears when set to NULL:

      

    • Non-NULL position pointer

      To illustrate the general principle, here’s how the Rear pointer appears when pointing at a reachable node:

      

  • Next pointers of reachable nodes

    • NULL

      If the next pointer for a reachable node is NULL, then you’ll see this on the right side of the node’s box:

      

    • Not NULL

      If the next pointer for a reachable node is not NULL, then you’ll see this on the right side of the node’s box:

      

  • Next pointers for unreachable nodes

    • NULL

      Looks like the below:

      

    • Not NULL

      This is a little different from the reachable next case. Namely, there is no longer a line connecting the source pointer (next) to the destination node. Instead, you’ll see the elem value of the node being pointed at inside the source pointer circle. This is because we do not want many arrows all over the page. PLEASE do not think that actual pointers in C++ are elem values. Pointers are addresses!!!

      

Some notes concerning the four position pointers:

• The Front pointer is intended to point at the first node in the linked list, but note that the app will not automatically make the first node in the list the Front pointer for you.
• The Rear pointer is intended to point at the last node in the linked list, but, like the Front pointer, the app will not do this for you.
• The T and P pointers are really just general purpose pointers. They aren’t intented to point at any node in particular, they’re meant to point at any node you’d like them to!

Assignment

• To redirect where any pointer in the center-left dropbox (in the topmost menu under ‘Structures’) points to, just select that pointer from the left most dropbox, then
  • select ‘=’ from the dropdown immediately to the right
  • and finally select the destination node from the dropdown box to the right of the ‘=’ dropdown box.
• You can only assign new values to the pointers in the dropbox to the left of the equal sign. This means you may need to reposition the T and/or P pointers in order to access a node.

Deletion

• To delete a node, select ‘delete’ from the centermost dropdown (the same dropdown you’d select ‘=’ from), and then select the node you’d like to delete from the dropdown to the right.

Undo

• The undo button will undo your assignments and deletions, one at a time, until the linked list is restored to its initial state.

Pan

• In order to pan (i.e: move the linked list around), just click and drag your cursor within the linked list’s canvas box (like in the image above). If you ever pan too far and can no longer see the data structure, you can click the Recenter control to be whisked back to the data structure where you can see it.