Mastering Data Visualisation: Understanding the Hierarchy of Visual Cues

Alberto Cairo discusses the hierarchy of elementary perceptual tasks or encoding methods developed by statisticians William Cleveland and Robert McGill in the 1980s in his book “The Functional Art”. This hierarchy provides a framework for making choices in presenting data effectively, outlines different types of visual cues, and ranks them according to how accurately people can perceive the quantitative values they represent.

Based on research conducted over the past thirty years, the image shows different graphs and how easy or difficult it is for readers to understand and estimate the data they present. The hierarchy, from most to least accurate, is as follows:

1. Position along a common scale: This is the most accurate type of visual cue. It involves using spatial location along a common baseline to represent data. An example is a bar chart where the length of each bar represents a certain value, and each bar starts from the same baseline.
2. Position along non-aligned scales: This is less accurate than the first. Here, the position is still used, but the baselines differ. This is typical in a grouped bar chart where each group has a different baseline.
3. Length, direction, angle: Comparisons based on length are fairly accurate. The direction is slightly less so, and the angle even less. For example, a bar chart (length) is usually more effective than a pie chart (angle).
4. Area: Area is less accurately perceived than the above. Circle size in a bubble chart is an example of using the area to represent data.
5. Volume and curvature: These are difficult for us to evaluate accurately. 3D charts, which often use volume to represent data, are a common example, and they can easily lead to misinterpretation.
6. Shading, and colour saturation: These are the least accurately perceived. Different shades or colours might represent different values, such as in a heatmap.

Looking at the provided image, it’s unsurprising that line charts, bar charts, and area charts are the easiest to understand. These graphs have a clear axis or baseline, making it simpler to compare the data. On the other hand, graphs with unaligned axes, like two bars placed on different axes, are a bit more difficult to interpret accurately.

As you move down the vertical axis of the image, you encounter encodings based on angles, areas, volumes, and colours. As many of you may have intuitively recognised: it’s much easier to read and compare exact values in a bar chart than in a map where countries are shaded with different colours.

By following this hierarchy, designers and data visualisers can make informed decisions about which graphical forms or visual encodings to use based on the data type they are presenting and the specific message they want to convey. It helps ensure that the chosen visual representations effectively communicate the intended information to the audience.

Furthermore, Cleveland and McGill conducted experiments to examine the effectiveness of different perceptual tasks in chart design. Their research revealed that for creating successful charts, it is advisable to prioritise elementary tasks positioned higher in the hierarchy.

As readers move up the scale, their ability to estimate information from the chart improves speed and accuracy. Notably, charts that rely on object positioning along standardised scales outperform those that use area, colour, and angle. Therefore, incorporating standardised scales in chart construction is more likely to enhance comprehension efficiently.

In conclusion, this hierarchy is a powerful tool for deciding how to represent data visually. By understanding which visual cues are most accurately perceived, one can create more effective and more understandable data visualisations. However, it’s also worth noting that these are not absolute rules, and effectiveness can vary depending on specific circumstances and contexts.