4 ms·
Thanks! I use d3.js + SVG for most of the interactive ones. SVG makes it easy for me to attach mouse events to the elements in the diagram, and d3.js makes it e
by amitp 12y ago
Thanks! I use d3.js + SVG for most of the interactive ones. SVG makes it easy for me to attach mouse events to the elements in the diagram, and d3.js makes it easy for me to create, remove, and animate the elements individually. For the tower defense (breadth first search) page, I have three elements:
1. The graph (square grid for now but I'll make other types) — nodes and edges and edge weights
2. The search algorithm (breadth first search for now) — visited, open, costs, parent pointers.
3. The SVG visualization — a polygon for each node colored by its search state, and overlays for text or arrows
When the slider moves, I rewind or advance the search algorithm, which tells me which nodes have changed. I then update those nodes in the diagram. I considered running search once and recording a trace, but it turned out the performance bottleneck was the SVG, not the algorithm, so I didn't bother. It's fast enough to re-run at each step.
- eliben 12y agoCool, thanks for the details.