Thanks! (I'm actually in the middle of a major update to the page — I hope to have it published in a few weeks) I used d3.js for this page (and most of the pag

Thanks! (I'm actually in the middle of a major update to the page — I hope to have it published in a few weeks) I used d3.js for this page (and most of the pages on my site). For a given shape of map (rectangular, triangular, hexagonal, parallelogram, etc.) I generate a set of cube hex coordinates. I then use d3 to instantiate an SVG shape for each coordinate. D3 will maintain the mapping from the cube coordinate to the SVG shape, so I can set element classes on mouse events, and then I style those with CSS. For example, in the line drawing example, I have a generic function that creates a hexagonal shaped grid (of hexagons)[1]. On mouseover, I figure out which hex it is, then run the line drawing algorithm to create a set of coordinates from the start point to the hex you're pointing to. I then tell d3 to iterate over all the SVG dom nodes and set the "selected" class if it's in the set returned by the line drawing routine[2]. The color changes with the CSS rule #diagram-line .selected polygon {fill: hsl(200, 50%, 80%); } I've used canvas for some of the pages but I find svg much easier to work with. I can attach mouse events to the elements, and I can set properties (such as color) easily without redrawing everything. D3 is great for maintaining a mapping from data (such as a set of hex coordinates) to dom nodes (such as a set of svg <polygon>s). D3 also has transitions, but I think most of my needs could be handled with CSS transitions instead of D3's JS transitions. [1] See http://www.redblobgames.com/grids/hexagons/Grid.hx http://www.redblobgames.com/grids/hexagons/Grid.hx : hexagonalShape() [2] See http://www.redblobgames.com/grids/hexagons/ui.js http://www.redblobgames.com/grids/hexagons/ui.js : makeLineDrawer()