Data Structure Visualizations

Visualizing Algorithms

The best way to understand complex data structures is to see them in action. We've developed interactive animations for a variety of data structures and algorithms. Our visualization tool is written in javascript using the HTML5 canvas element, and run in just about any modern browser -- including iOS devices like the iPhone and iPad, and even the web browser in the Kindle! (The frame rate is low enough in the Kindle that the visualizations aren't terribly useful, but the tree-based visualizations -- BSTs and AVL Trees -- seem to work well enough)

Check the Algorithms menu for all of the latest javascript implementations.

How to Use the Visualizations

This visualizations are meant to be fairly self- explainitory, though there are some subleties for advanced usage. Take a look at a typical visualization, for Binary Search Trees:

BST Screenshot

Algorithm Specific Controls

At the top of the screen (boxed in red in the above screenshot) are the algorithm specific controls -- these will change depending upon what algorithm you are visualizing. In this example, you could insert, delete, or find an element in the BST by entering text in the appropriate field and either pressing return or clicking the relevant button. The tree can be printed by clicking the print button. Once you give a command, the visualiztion will start, and can be controlled by the general animation controls at the bottom of the screen.

General Animation Controls

Java/Swing Version

This work is based on visualizations that we created in Java using Swing -- that code is still available here, though that code is no longer being maintained. There are a few algorithms that we have not yet ported to the new system, so the older version may still be of use.

Flash Version

We have also developed a flash version of the visualizations, which contains a subset of the algoritms developed in javascript. The Flash version is not as well supported as the main javascript version, but we will keep the flash version available for those who may get a better frameate out of flash than javascript. However, the javascript versions are the preferred ones, and will get updates and bug fixes the quickest.

Writing your Own

The tutorial for creating your own visualizations is now online! All source code is available there as well. If you want to create your own visualizations, but are having trouble getting things to work, please let me know. Everything is licensed under FreeBSD, and you can use it for whatever you like. Please let me know if you using the code -- I'm curious to see what it does in the wild.