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:
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:
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)
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:
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.
If you hover a dimension, the current dimension will be emphasized / highlighted
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:
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:
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:
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.
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 …
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 …
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!!!)
- Documentation and Repository
- Download of D3SlopeGraph QlikView Extension (.qar file)
- Demo QlikView application using D3SlopeGraph
- Some instructions how to install and deploy QlikView Extensions can be found here
- Licensing Information
Issues, Bugs, Wishes
If you have any issues please post them here.
Additional Articles on the Web
- Slopegraphs for comparing gradients: Slopegraph theory and practice, (Dec 2013) by Edward Tufte
- Edward Tufte’s “Slopegraphs”, an article by Charlie Park
- A Slopegraph Update, by Charlie Park