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.