Old school D3 from simpler times
Fast Interactive Canvas Scatterplot
A recent project I was working on involved creating an interactive scatterplot that ran smooth whe handling
thousands of points. This is well and truly beyond what SVG and the DOM is capable of, so using the HTML5 Canvas
seemed like a good idea. Canvas has its downsides however -- no styling points with CSS, no event binding and cool
features of D3 like the axes drawing aren't implemented in canvas.
This example shows how the canvas and SVG can work together to get the best of both worlds. Points are drawn using
the canvas, while the axis are drawing using SVG. The canvas and SVG are layered on top of eachother strategically
to get this effect.
Fast hit detection is enabled via the D3 quadtree data structure,
and the plot runs smoothly during zoom events by drawing a subset of the points rather than the full dataset.