Geek Answers Handbook

How to create "slopegraph" in d3.js

In visualizing quantitative information, Edward Tufte coined the term “slopegraph” for a very minimal type of chart ( additional information ). An authoritative example is as follows:

Example of slope graph

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

I had a shot at a more declarative implementation, and also to keep 100% correspondence between the values ​​in both columns, but stuck. As expected, when items with similar or identical values ​​appear in the dataset, the graphics overlay and chart are not readable.

the naive version ( source ) uses the linear scale to calculate the horizontal position, and tries to “normalize” the position ( source ) using the ordinal scale.

I believe that better results can be achieved with an ordinal scale by calculating the offset based on the coordinates of the overlapping elements. If the offset is calculated separately for both columns, should it be calculated in advance based on data or on the fly when setting attributes? How can I expand the code base so that elements with the same values ​​are located under each other, other elements are configured accordingly, and the values ​​in both columns remain in the same horizontal position?

+8
visualization
source share
3 answers

I looked for your first example several times, trying to solve the problem of adjacent text labels, I'm not sure how useful it will be, but in case it adds to the discussion, I decided that I would share ..

My first effort was to fade out the text surrounding the text labels of the data point that was hanging, it just selects the text labels that overlap the currently selected label restriction frame and translates them into almost zero opacity: http: // bl. ocks.org/2554902

Then I tried to work on organizing text labels in a compact way, so that each of them was viewable, I did not complete its implementation, because it expanded the boundaries of the rendering too much (this also doesn’t currently work well when changing year ..), but maybe you should take a look at something like this on somewhat less "compact" data: http://bl.ocks.org/2554910

Edit: it looks like they are not working as intended in firefox, it seems to have a problem with getBBox () ..

+3
source share

A well-written question and a nice start code with debuggers, props!

It was not possible to encode everything that I was thinking about, but at least for discussion. (Coding is very simple: coming up with what to code / what should look is harder.)

  • A [unoptimized] version that uses the linear scale as a guide, but spaces overlap records by moving all subsequent records down. (I think that it just stretches the Y axis, which makes it very tall. Unfortunately, try to compare the closer years, for example, 2008 and 2009 - the image is not so stretched). http://bl.ocks.org/2547496 ( gist )

  • The same method applies to the ordinal scale. I prefer the linear scale version because the scaled ordinal version does not attempt to convey any absolute slope information; however, this creates a more compact image. http://bl.ocks.org/2573074 ( gist )

  • Grouping close values ​​together. (It will be implemented if there is interest.)

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

+5
source share

Just wanted to share another example with Jeff Clark:

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

enter image description here

He used Handling, but handles some of the problems above very elegantly (it can be argued that he also simplified things a bit with the normalized variable)

  • Use of expanding aggregates to simplify visualization and reduce the initial number of data points.
  • First of all, the designation of one side of the slope for each point
  • Hiding labels on close / overlapping points until they hang (at this point, the original labels temporarily disappear)

Overall, Jeff did a great job of this. I think he shows a lot of attention to detail. It would be interesting to see a similar example in D3!

+3
source share

More articles:


All Articles