Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

Responsive Reusable D3 SVGs

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.

Goals

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.