Data Structure Visualizations
cs.usfca.eduI dream of a world where this is built in everywhere that I write expressions. It's so hard, and we desperately need it. Bret Victor has called a lot of attention to this lately, and rightly so.
It's easy to forget how much we have to remember inside our heads just to work with code. And why? Much of this work could and should be done by the machine, which would free us to focus on what we want. But the need for context, different execution environments, etc, all make this difficult to tackle generally.
More and more lately, I find that I'm interested in this problem more than the code itself.
I am totally on board with you on that one.
I remember checking out this book on graph drawing, and realizing how hard a problem drawing arbitrary data structures is. And what about functional code? How do we visualize stateless algorithms?
I deeply want this to exist though. I feel like, much in the same way excel secretely represents the core of what we want to do with computers, data structure visualizations is the core of how we want to read code, especially in "tight" code involving heavily coupled structures.
My two cents: I've been working on visualising several data structures in javascript code (want watch them evolve step by step): http://pelletierthomas.com/datastructures/exec/?file=heap/he...
http://pythontutor.com/ visualizes variables and arrays for python code.
I'm planning on building this as my next project.
Although I think aiming for building this into the general programmer's development environment is ideal, there is an easier first step. Simplify and reduce the scope of the project to where you build this into a pedagogical programming environment. Most programmers have solidified these mental models into their heads. We only need to see them when we've made an error. Students, on the other hand, are flying blind and need this visualization desperately. More than that, the types of programs students build are highly constrained assignments which are more amenable to visualization.
An alternative path would be to add it as a plugin to Codemirror and put it up as a javascript tool. That way you share a technique in an environment that is familiar to a lot of people, and is easily shareable.
people are starting to play with interesting techniques for augmenting programming like: http://jsdares.com/ http://tributary.io https://github.com/CrypticSwarm/js-code-walker
I couldn't agree more! I've even spending years writing my own css and html editor, just because I want my text editor work like Firebug or dev Tools - allow me see real-time results! Well, if you ask me, it's called LIVEditor ;)
> More and more lately, I find that I'm interested in this problem more than the code itself.
Me too! In fact, I'm spending all my free time by working on making progress in this field.
Higher level languages / code and abstractions.
This is correct, but this stuff is particularly hard. I would even say it's the hardest part of our profession. Some people try to invent reusable abstractions, small (map, fold, zip) and big (AbstractFactory, Command, Composite), but to attack this problem really efficiently you need to be able to come up with your own ones, preferably those that are less leaky and have limited and well-defined surface area.
I remember doing one of the Project Euler's problems, something in the vein of "you are given a 20x20 matrix, find an element for which the sum of the elements around it is maximum". Nothing complicated, right? You just iterate over rows, then over columns, then throw in a check for zero index and the max boundary index, then do this for both x and y, etc. When I was done with the problem (nested for loops, five if checks inside), I found someone else's solution in Haskell on Project Euler's forums. A point-free one-liner with bunch of smart folds.
That's the power of abstraction.
As someone who just finished a datastructre class (as in had my final just a few days ago) I used the heck out of this site all semester long!
The visualization for B-trees and Red/black trees was totally invaluable!
As someone who just finished a data structures class (as in had my final yesterday), I wish I knew about this site before today!
I wrote a web site http://gregfjohnson.com/redblackbuilder.html that takes interactive algorithm visualization another step. I would be delighted and appreciative if people go check it out and provide thoughts and feedback. IMHO It is fun and informative to play with, and a great tool for learning the algorithms.
It is specific to red-black trees, but I am considering adding other data structure manipulation algorithms as well.
On insert and delete, you can single-step forward and backward and see the tree manipulations at each step. Or, you can do the entire operation at once.
There is pseudo-code for insert and delete, and at each forward or backward step the line of code being executed is highlighted.
This was pretty valuable when I took algorithms from this professor. Things like mergesort and indexing in B+ trees can seem very abstract when you try to learn it via a snippet of java code. These visualizations are even more useful if you need a refresher on algorithms for job interviews.
This is so useful. Here's another http://www.sorting-algorithms.com/
I was using those animations as a refresher just this past week. Really excellent work to whoever put that together.
Wow, this is valuable. It's not the kooky new framework that rockets tech forward, it's tools like this.
There are some great visualisations here. Coming up with good visualisations is tricky. I can't help but mention my own attempt at a more general framework for algorithm visualisation: http://will.thimbleby.net/algorithms/
Beautifully done! I wanted to build something like this for so long. No more ...! :-) (It's already there now.)
Edit: And why doesn't Google find the good stuff when I am looking for it ...?! :-)
Thats pretty awesome.. complete with source code and all !
We did similar stuff 12 years ago when I was an undergrad at SpbITMO. The website with the visualisers (in Russian) can be found here: http://rain.ifmo.ru/cat/view.php/vis
You should check Amit Patel's blog articles, they are chuck full of interactive visualisations that are really well executed.
Thanks for the link. I was on my toilet computer and I still haven't got the copy-and-paste business down on that thing.
I really appreciate how he writes his articles. More people should do this, with the interactive illustrations.
I just wish there was a button in each example that would populate with some demo data. I like to watch something go and then figure out it out by playing with the parameters. From this I don't immediately know what kind of inputs and outputs to use/expect (integers? floats? strings?).
very sweet project tho!
Glad I found this to reiterate what I learned as my Data Structure exam is tomorrow :)
Just found out yesterday that I'll be having my first interview for a Google Software Engineering position in about a month. This is truly going to be invaluable, thank you!
This is incredibly useful, as someone who is an engineer with a non-technical degree.
Ironically (or perhaps coincidentally), I got my non-technical degree from the very school this is hosted on.
Took a quick look at their insertion sort algorithm. It looks wrong, doing unnecessary swaps, when moving elements up. For and extra O(1) memory your can avoid that.
I always had hard time learning algorithms through visualization softwares. Most effective way for me was reading and visualizing in my mind.
Amazing! thanks for share.
Awsome!! One of the best visualizations, I came across
Thank you for this priceless resource.
Lovely!!
thanks for sharing