D3 Visualizations

We simulate push-pins marking locations on a map using force directed clusters. blocks

I've adapted many d3.js examples to make useful and occasionally innovative visualizations in federated wiki and elsewhere.

I addopted d3 after seeing it presented by Jeff Heer at the WikiSym 2011 conference. wikisym

I suggested to other Nike contractors that SVG animation was the new visual language of design. I found some time to pair with their developers but only got my push-pin map software working after they had resorted to simpler solutions.

We use motion to represent web traffic progressing through a server with many transactions inflight at once. blocks

I brought my enthusiasm for D3 with me to NewRelic where I lead a twelve-week initiative I called D3 Summer.

I often encouraged programmers to try D3 by pairing with them while we adapted some Bostock example to use their data.

I've sometimes followed Mike Bostock's lead and published working examples of my work as github gists to be rendered by his bl.ocks.org software.


Line & Bar Plugins were adapted from the d3.js tutorial to show alternative visualizations offered by choosing wiki pages.

Scatter Chart compared material scores to total score and responded to scrubbing the source dataset like a movie. Clicks drilled down to individual materials.

Radar Chart showed many dimensions of a material and allowed comparing materials on one chart. Hover showed data annotations that appear as asterisks.


Pushpin Maps visualized evolving factory clusters at the scale of continents even when the geocodes have factories within blocks.

Web Traffic visualized as bubbles avoiding each other as they mark the progress of each transaction.

NewRelic Org Chart adapted a radial tree layout to fit the whole org on one page. Hover showed who was present when an employee joined.