SlopeGraph for QlikView (D3SlopeGraph QlikView Extension)

Some weeks ago the chart type “Slope Graph”, invented by Eward Tufte in 1983, was first brought to my attention.

When I first saw it I thought that it would be quite easy to bring this chart also to the QlikView world. But after some research I realized that Slopegrahps have some drawbacks which are quite tricky to solve.

I have found quite a dozen of nice implementations out there but none of them was really satisfying me. So this little project was a perfect playground for me to understand challenges when creating chart-visualizations better. It really was the first project where I did not only adapt existing visualizations based on D3 to be used in QlikView, instead I created a new implementation of Slopegraphs in D3 (by combining several existing approaches).

Here is the result:

D3SlopeGraph QlikView Extension

Some Theory about Slopegraphs

Edward Tufte states: “Slopegraphs compare changes over time for a list of nouns located on an ordinal or interval scale” and he also first published and example in his book “The Visual Display of Quantitative Information” in 1983:

Tufte, Edward. The Visual Display of Quantitative Information. Cheshire, Connecticut: Graphics Press; 1983; p. 158

Slopegraph Example by Edward Tufte

Advantages and Scenarios for Using SlopeGraph

  • Slopegraphs are very minimal visualizations, there is no unnecessary information
  • It is easy to capture changes over time
  • The same type of data is shown on the left and right side using the same units of measurement
  • “Any time you’d use a line chart to show a progression of univariate data among multiple actors over time, you might have a good candidate for a SlopeGraph” (source)

Drawback

The most important and relevant drawback of using Slopegraphs is that if you have a lot of dimensions with similar values the visualization becomes messy very quickly (see some screenshots below demonstrating this).

My Approach for Slopegrahps

To overcome the above described drawback I have chosen a combination of several approaches based on the default visualization:

Default Visulization

Handling Conflicting Label
In the above displayed example you’ll see that three dimensions on the left side share the same value for 2012. Instead of displaying them upon each other the dimensions are shown one below the other.

Emphasizing Dimensions
If you hover a dimension, the current dimension will be emphasized / highlighted

Highlighting hovered dimensions

Displaying a Summary
While hovering a dimension a tooltip will be displayed with a short summary. This is especially useful if you have a lot of dimensions with little movement from one to the other time period:

ToolTip for hovered dimensions

Text Fadout for Colliding Labels
But there is still the issue that if you have a lot of dimensions with similar values that they will collide:

Label Collisions

There are many suggestions how this can be solved, I have chosen an interactive one where conflicting labels will be faded out if you hover a dimension:

Conflicting Labels - Resolution

Still to Many Dimensions & Messy Visualization
There are situation where all the above described solutions are not sufficient. Especially if you are using a lot of dimensions this can happen.

Messy result because of conflicting labels

There are two possible solutions:

  • Use a different chart type
  • Increase either the size of the chart object (extension) or increase the size of the plotting area. By doing so you’ll see a vertical scroll-bar, but certainly, the user has to scroll …

Same data as above but with a larger plotting area (+ scroll-bars)

Caution for Touch-Devices
It is at this point important to mention that the approaches I have chosen are not really a perfect fit for mobile devices (especially if you think of touching devices which at the same time excludes hovering items …). I’ll have to investigate on this …

Conclusion

In my opinion it is really worth giving this type of chart a try (and I would not be surprised if we’ll see Slopegraphs much more often in the future). But this type of chart is also not a “generalist”, usage and configuration has to be considered with caution.

Download Extension, Demo + Source Code

The solution called “D3SlopeGraph QlikView Extension” is published under MIT-license and free to use (but still, I am happy to hear your feedback!!!)

Issues, Bugs, Wishes

If you have any issues please post them here.

Additional Articles on the Web

Bookmark and Share

and tagged , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

5 Comments

  1. Posted January 5, 2014 at 12:05 | Permalink

    Very nice addition to your collection. Keep em coming!

  2. Abhinava
    Posted January 8, 2014 at 08:47 | Permalink

    Hi Stefan, great work! one thing I noticed is that the comparison is being done between two scenarios only, i.e. either between 2012 and 2013 or Males and Females in age grp 15-24. I would like to know whether it can compare on more than two scenarios also. if it can be done it would really be gr8!!

    Thanks,
    Abhinava

  3. Posted January 9, 2014 at 13:55 | Permalink

    Hi Stefan,

    great work! I like the Plot Height property, maybe Width would makes sense also… Could be a standard for each visual extension.

    Do you release any info about your extension framework soon?

    Best,
    Ralf

    • Posted February 6, 2014 at 22:53 | Permalink

      Hi Ralf,

      no unfortunately I do not have a plan when to release the extension framework itself, but I have already used it in several extension and will soon publish one where you can see how to use it …

      Regards
      Stefan

2 Trackbacks

  1. […] 25. SlopeGraph for QlikView (D3SlopeGraph QlikView Extension) http://www.qlikblog.at/3093/slopegraph-for-qlikview-d3slopegraph-qlikview-extension/ […]

  2. […] SlopeGraph for QlikView (D3SlopeGraph QlikView Extension) http://www.qlikblog.at/3093/slopegraph-for-qlikview-d3slopegraph-qlikview-extension/ […]