Home/ Questions/Q 7866791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T00:30:33+00:00

In The Visual Display of Quantitative Information , Edward Tufte coined a term slopegraph

  • 0

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:

Example of slope graph

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

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I was toying around with your first example a bit in an attempt to address the issue of jumbled text labels, I’m not sure how useful it will be, but in case it adds to the discussion, I figured I would share..

    My first effort was to fade the text surrounding the text labels of a data point that was hovered over, this simply selects text labels that overlap the currently selected label’s bounding box, and transitions them to near zero opacity:
    http://bl.ocks.org/2554902

    I then tried to work on a way to arrange the text labels in a compact way, so that each of them were viewable, I did not finish it’s implementation because it seemed to extend the boundaries of the visualization too much (it also currently does not work well when changing the year..), but it might be worthwhile to look towards something like this on slightly less ‘compact’ data:
    http://bl.ocks.org/2554910

    Edit: it seems that these do not work as intended in firefox, seems to be an issue with getBBox()..

    • 0