Implementation guide

Each chapter will have a page (index.html) with the visualizations. Some chapters may have more than one page. The x.js files have algorithms and the c_x.js has the visualizations. Look at the pseudocode and the python code for starting points for the algorithms; however it is likely that algorithms will need to be written differently to support visualizations than if it were being written on its own.

1. Think about whether you want to display the parts of the algorithm or the steps of the algorithm, and whether the reader runs the steps or whether the page runs the steps.
2. Think about the visualization as a pure function from the algorithm state and parameters to the svg. Think about what parameters you want to be able to change. Let the control over them (mouse clicks, sliders, drag & drop, animation, etc.) be outside the visualization function.
3. It is often useful to have an object that stores the pieces of the visualization, e.g. a label, the visualization, etc. These are references to the two.js, d3.js, etc. objects. For d3.js store the group that has data() not the individual dom nodes, because you will use data(), enter(), exit() to update the nodes. For some problems the visualization structure will be tied to the algorithm input and for others the algorithm input will only be available at redraw time.
4. The render function should read the algorithm state and set the properties of the diagram object. In d3.js use data() for repeated elements. For changed state, including adding/removing event handlers, use d3's enter() and exit(). In two.js you'll have to track these yourself and use jquery to add/remove event handlers.
5. Handle variants of diagrams by putting things into layers if possible. Then you can assemble a diagram by listing the layers that you want in it.
6. Ideally the initial diagram state would be informative so that interaction is not required.
7. Make time a state and then you can rewind, pause, etc. Not always feasible but worth considering. Make the timer external to the drawing logic. Have the timer change the state and invoke redraw. This is trickier when the problem state has an unknown number of steps (you might run it once to count steps, or record the state at each step into a trace object.)

d3, two, p5, three, jquery, or other libraries can be used. Amit's experience, having used most of these, is that a library that provides access to svg directly (d3, jquery) will require more effort but will also allow for nicer visualizations than libraries that abstract away the svg layer (two, p5).

If you do not have a preference of which library to use, use either two.js+jquery or d3.js.