Mark DiMarco

UI Developer at Bazaarvoice

Tufte's Slope Graphs in SVG Using D3.js

There was recently some buzz regarding a graph invented by one of the godfathers of visualizations, Edward Tufte, in the iconic 1983 book ’The Visual Display of Quantitative Information’ (p. 158).

You can see a scanned copy of the graph here, along with an interesting discussion regarding the chart, it’s history and different versions of it.

I decided to recreate the graph dynamically for the browser using an SVG, which is something you’ll need a semi-advanced browser to see. With a library named D3.js, I came up with this:

If you can’t see the iframe above, click here for standalone version.

As long as you are using a browser that supports SVG, you should see a nicely rendered version of Tufte’s original slope graph.

In the future I’ll make a library version of this on top of D3.js to create custom slope graphs that retain Tufte’s original design.

One of the coolest things about the original design, as noted by Charlie Park, is that there is “absolutely zero non-data ink”.