I 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 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.
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.
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 ;)
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.
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.
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/
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
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?).
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!
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.
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.