A few days ago I released debug.js and I breifly touched on the educational applications of the library. This morning, I had a couple of hours before going to work so I decided to implement the “Make flow visible” example from Bret Victor’s ‘Learnable Programming’ paper (Feel free to change the code):

premalink

Here is how it’s done:

  1. Given a program, step through it once using debug.js to get the execution flow info
  2. Plot the execution flow using d3
  3. Whenever the user scrubs through the plot, rerun the steps up to the step index that the user has the pointer over.
  4. Repeat from 1 when the editor code change

The entire thing is ~250 LOCs and is up on Github.