Data Structure Visualization

The best way to understand complex data structures and algorithms is to see them in action. We've developed interactive animations for a variety of data structures and algorithms ** that will come in very handy in this course, especially during labs. These visualizations are written in javascript + HTML5, and run in just about any modern browser - including iOS devices like the iPhone and iPad! Note that while every attempt was made to debug the software, there are likely a whole host of bugs and issues waiting to be discovered (if you encounter any, please report details to irahal@csbsju.edu)

Currently, we have visualizations for the following data structures and algorithms (they open in new tabs)

Lab03_Sets Set: Expandable Array Implementation

Lab04_InfixPostfix Infix to Postfix Arithmetic Expressions

Lab05_LinkedStacks_Queues
- Stacks: Linked List Implementation
- Queues: Linked List Implementation

Lab06_Backtracking Recursive N-Queens

Lab07_LinkedIndexedList Indexed Linked List Implementation

Lab08_BinarySearchTrees Binary Search Trees

General Animation Controls

Skip Back If you are in the middle of an animation, this button will completly undo the current command. If you are not in the middle of an animation, this button will undo the previous command
Step Back This button is only active if you have paused the current animation (using the play/pause button). Step back one step in the current animation. If you are not currently animating, step back into the previous command. You could use this button (with sufficient keypresses) to back up through the entire history of everything you've done
Play/Pause Toggle between play mode (in which the algorithm runs free until it completes) and paused mode (where you need to press the Step Forward or Step Back button to advance the animation)
Step Forward This button is only active if you have paused the current animation (using the play/pause button), and the current animation has not yet completed. Step forward one step in the current animation.
Skip Forward This button is only active if the current animation has not completed. Skip to the end of the current animation
Animation Speed (slider) Change the speed of the animation. The value of this slider is saved in a cookie, so you should only need to set it once if you have a preferred speed
w, h, Chaage Canvas Size Change the width / height of the display area. While the change is immediate, the animations will not be centered in this new field until you reload the page. This will clear out the currnet animation, but the width and hight values are also saved in a cookie, so you should only need to change this field once, and then everything should work well if you are on a smart phone or a desktop with loads of screen real estate.
Move Controls Toggle between the general controls being at the top or bottom of the webpage