Reusable D3 charts

I love D3. D3 is amazing at making charts. D3 code is also quite hard to write – the learning curve is steep, and using the library expertly also requires expert knowledge of SVG. Instead of reinventing the wheel, here are reusable D3 charts I made while working on client projects at Springload.

Exporting D3 charts to SVG and PNG: a library

Lately I’ve been very interested in the topic of exporting PNG or SVG assets from D3 charts created with SVG and CSS. This is a very important topic because those exports are often a big selling point of paid data visualizations libraries, and rightfully so – you can’t reuse a dynamic D3 chart as easily as a static asset.

Line chart interaction overlay

Here is a quick example of allowing interaction with specific lines in a D3 chart. The lines take up very little space, so we render a transparent interactive overlay on top on which the event handlers are bound.