How to create a “slopegraph” in d3.js

Question

In The Visual Display of Quantitative Information, Edward Tufte coined a term “slopegraph” for a very minimal type of chart (more information). The authoritative example looks like this:

There are at least two implementations of slopegraph in d3.js in th wild:

• http://markmarkoh.com/tuftes-slope-graphs-in-svg-using-d3js/
• http://skedasis.com/d3/slopegraph/

I had a shot at a more declarative implementation, and also to preserve a 100% correspondence between values in both columns, but got stuck. As expected, when items with similar or same values appear in the data set, the graphics overlap and the chart is not readable.

The naïve version (source ) uses the linear scale for computing horizontal position, while the attempt to “normalize” the positions (source) uses the ordinal scale.

I believe better results can be achieved with the ordinal scale, computing the offset based on coordinates of overlapping items. Should the offset be computed separately for both columns, should it be computed in advance based on data, or on the fly during setting the attributes? How could the codebase be expanded so items with the same values are positioned below each other, other items are adjusted accordingly and the values in both columns stay on the same horizontal position?

Answer 1

Well-written question and nice starting code with debugging statements, props!

Didn't get through coding all the things I thought of, but for the sake of discussion at least, here goes. (Coding is easy; coming up with what to code/what this should look like is harder.)

1. A [non-optimized] version that uses the linear scale as a guide, but spaces overlapping entries out by shifting all subsequent entries down. (I guess this effectively just stretches the Y axis; this makes it a very tall image unfortunately. Try comparing closer years, e.g. 2008 and 2009 -- image is not as stretched.) http://bl.ocks.org/2547496 (gist)

2. The same method applied to the ordinal scale. I prefer the linear scale version because the ordinal scale version doesn't attempt to convey any absolute information through the slopes; however, this makes for a more compact image. http://bl.ocks.org/2573074 (gist)

3. Grouping near values together. (Will implement if there's interest.)

Note that both examples 1 and 2 are imperfect implementations, but you get the idea. If either are what you're looking for, I can fix them up.

Answer 2

Just wanted to share another example from Jefff Clark:

http://neoformix.com/Projects/ObesitySlope/

He's used Processing but handles a few of the problems above very gracefully (one can argue it's also made a bit simpler with a normalized variable)

1. Using expanding aggregates to simplify the visualization and reduce the initial number of data points.
2. Primarily labeling one side of the slope for each point
3. Hiding labels on close / overlapping points until they get hovered over (at which point, the initial labels disappear temporarily)

Overall, Jeff's done a superb job with this. I think he shows great attention to detail. Would be keen to see a similar example in D3!