Very often, we have an excessive amount of information that we want to share with our end users. And because this data happens to share a similar axis (e.g. time) or axes (e.g. time and volume) we end up layering this data into one massive visualization, which is a tempting idea. Often the data to be shown is related, and we want our end users to uncover relationships between the various data points.
However in most situations, our resulting solution ends up fighting against our goals. Our data overlaps, it occludes/obfuscating similar data, it overwhelms the user, and they lack focus. Users are often left asking — “what should I be looking at?”
Real-World Example
This is a real-world example (content pixelated for privacy). There are 5 discrete data (each a unique color) plotted on the same X axis (time). Each line/bar has its own Y axis unit, yet the Y axis (while numeric) does not display any unit for those numbers. So we are now comparing 5 different unrelated units on the same scale. This is a major issue. For example, the purple data appears to be relatively stable, but that is likely a byproduct of the units of the purple data generally only ever existing between 120 and 160. If plotted on a larger Y axis, we could see the highs and lows far easier.
The yellow and green data greatly overlaps, leading to a high degree of ambiguity around 11am as wo the exact values of green and yellow. In addition, at 12, 4:15, 4:30, 5:45, and 6 – we are unable to determine if yellow is actually 0 or just a small number due to the compression of this data via the very tall Y axis.
Compounding the above problems we have “key events” marked along the top of the visualization with flags. Yet drawing a connection with any line point (let alone a bar) is a challenge for the human eye (without holding up a paper to your screen).
We can continue to break-apart this visualization but it is clear that the legibility has been sacrificed in an attempt to get all the data to “fit.” While this is just one example, this problem is pervasive in data visualization.
Luckily, there are two techniques that we can leverage to make multi-data-set visualizations easier to mange. The first is Sympathetic Highlighting (covered in this article), and the other will be covered in our forthcoming article on Occlusion in Visualizations.
Sympathetic Highlighting
The term Sympathetic Highlighting refers to when a user interacts with one visualization of data, and a second visualization responds to show the relationship between the two plots.
http://bl.ocks.org/NPashaP/96447623ef4d342ee09b
In this example, hovering allows the relationship between this bar chart and pie chart to become live and dynamic – allowing a user to interact indirectly.
But in the example discussed earlier in this article, a larger set of data needs to be captured – and they all share the same X-axis, time. In the following example there are 4 distinct plots all on the same X-axis, but with their own Y axis. There is sympathetic highlighting in that as the user moves their cursor across the visualization, all 4 visualizations show values though the cursor by definition can only be hovering over one.
https://square.github.io/cubism/
An example of more direct-interaction with sympathetic highlighting can be found in our third example:
https://square.github.io/crossfilter/
Here there are 4 visualizations, 3 bar charts and 1 data table (data tables are a form of visualization). Notice how as the user clicks/drags/selects all other visualizations respond, updating their data. Not only is this highlighting sympathetically, but here the sympathetic highlighting also has sympathetic filtering using the non-tabular visualizations as visual filters (as compared to a query language or groups of check-boxes as filters).
A last example of sympathetic highlighting can be found in trellis/lattice/grid/small-multiple charts. Here, multiple slices of deeply related data are shown side-by-side.
https://benjiec.github.io/scatter-matrix/demo/demo.html
In this specific example, there are 4 measures that are cross-compared (A vs B, A vs C, A vs D, etc) in all permutations (the reason the plots on the diangle are straight lines is because they are A vs A, B vs B, C vs C and D vs D). Notice how when a set of data points are selected, those same data points show up in all the other visualizations. This same technique can be used with any multi-data corpus you wish to show. Plot each data side by side in small plots, then when a user highlights one region – highlight the others with the same values.
Revised Initial Example
Returning back to our original example, we can utilize sympathetic highlighting to make a chart that is easier to read and far more rich of an interaction.
Vertical Highlight
Hovering on One Line Highlights all others
Key Event Highlight
Highlighting a key event description sympathetically highlights context
Notice in these revised examples, we have broken apart the layered visualization into a series of connected visualizations. Each chart has their own Y axis, allowing multiple units to be represented and ensuring that each metric’s variability and range can be visually expressed.
Now when a user hovers on any ONE point or bar (first picture), the remaining points also highlight (in this example using a background highlight and showing all the data points). Thus hovering on one interesting point, hovers all related ones. In the second example, we can see how the “flags” are now easier to read (a list along the right) but they are now connected through a sympathetic highlight.
At a glance, a user can now easily tease out trends for each metric, and see visual trends across metrics. Through interactions – each point/bar can be interrogated for specific numeric values (and to explicitly connect one metric to all others).
Origin of the term
I had always explained it by breaking down the two component words “sympathetic” (existing through an affinity or association) and ‘highlighting” (bringing attention to a detail of significance) and showing how this technique brings attention to the association between parts (or details) between visualizations.
In 2017, when a fellow designer asked me who coined this term, I did not know. Personally, I had been using this term for years (before even founding my Design Studio). I am sure that I heard it from another designer – but I have never been able to track it down. When googling (then and now in 2019), the term is only found referenced in a WIKI for “Logos Bible Software”, and they now refer to this technique in their product as “Corresponding Selection.”
https://wiki.logos.com/Sympathetic_highlighting
This is an intriguing change. In their product, when you select a passage in one text, the corresponding text in other languages now shows up. Hence “Corresponding Selection.” Yet this new term, perhaps, is a more limited usage of the original term “Sympathetic Highlight?” As discussed above, Sympathetic Highlighting can do more than just interact based on selection. It can be indirect selection (e.g. hover based) or even transient (e.g. showing corresponding tool-tips or linking multiple visualizations) as in the Cross Filter example above.
Where does this term-of-art come from? We are not sure, but it is a powerful tool in any UI designer’s tool-box.
Cover Image Photo by Nate Grant on Unsplash
Cover Image Photo by Nate Grant on Unsplash
