About

A useful aid to understanding complex data structures is to see them in action. These interactive animations cover a wide variety of data structures and algorithms. Pick one from the menu, give it some input, and then play, pause, or step through the animation to see exactly what happens at each step. Everything runs in your browser, so it works on laptops, tablets, and (for the smaller visualizations) phones.

Help

Algorithm specific controls

The controls above the drawing area change depending on which algorithm you are visualizing. For example, in a BST (binary search tree) you can insert, delete, or find an element by typing a value in the matching field and pressing Enter or clicking the button next to it. Print prints the tree and Clear empties it. Once you give a command the animation starts, and you can control it with the playback controls below the drawing area.

Playback controls

⏮ Skip back

In the middle of an animation, this completely undoes the current command. Otherwise it undoes the previous command.

⏴ Step back

Only active while the animation is paused. Steps back one step in the current animation, or into the previous command if nothing is animating. With enough clicks you can back up through your entire history.

⏯︎ Play / pause

Toggles between play mode (the algorithm runs until it completes) and paused mode (use Step forward or Step back to move through the animation).

⏵ Step forward

Only active while paused and before the animation has finished. Advances one step.

⏭ Skip forward

Only active while an animation is running. Jumps to the end of the current animation.

Animation speed

Changes how fast the animation plays. Your choice is saved in a cookie, so you only need to set it once.

Canvas size

Changes the size of the drawing area. This often clears the current animation, but the new size is also saved in a cookie.

Stepping forward and backward can get confusing: it is easy to mistake the next step for the previous one and misunderstand how the algorithm works. When you are first learning an algorithm, try stepping forward only.

Frequently asked questions

I think I've found a bug...

Let Professor Cordova know. Be specific about exactly what sequence of operations led to the unexpected behavior.

How are elements ordered, e.g., when inserting into search trees?

Numbers are ordered numerically and strings are ordered lexicographically. All numbers are treated as smaller than all strings.

How do I use this on my phone?

Set the canvas size to something that fits your screen; a cookie remembers your choice. Some visualizations (sorting and graphs, for example) need a large canvas, so they work best on a laptop or tablet.

Wait... you are using cookies?

Only to remember your preferred animation speed and canvas size. Everything still works with cookies disabled, and there is no tracking of any kind.