Responsive Reusable D3 SVGs

April - 2015

An idea for a post has been bouncing around my head. Not this post. Another one. It needs a graphic for illustration. I'm using the D3.js library to create it.

This is the story of a graphic.


Object oriented reusable convention over configuration not global uses title and desc for assistive tech. responsive margins can be loaded with either a local data set or using d3.csv, etc... Nests inside a div and gets it's width from that. can have more than one on the same page. Injected into D3. Namespaced within D3.

Dynamic margins Dynamic font size

Expects to go into a block container (e.g. div) dynamically pulls its size from that.

The specifics of the font size and margins need to be adjusted for different content. For example, If the y-axis has long words, the chart.margin.left needs to be adjusted.