How to design data visualizations that are actually valuable
A guide to understanding how people interpret data and choosing elements to create clear visualizations
Great visualizations help people quickly and accurately make sense of the data so they can make appropriate decisions. These types of visualizations optimize for the human visual system making information easy to grasp and meaningful. When we look at a graph that we can quickly and accurately interpret, it’s understood pre-attentively through subconscious processing and not through thinking. The less we have to think about what is happening, the better.
So, how can we leverage the human visual system to create impactful visualizations? We start by understanding then choosing the correct elements.
Data > Graph > Understanding
So, what is a visualization? Data visualization is the translation of data into visual representations to communicate some significance. Raw data is encoded by position, shape, size, symbols, and color. This encoded graph is then decoded through the human visual system to gain understanding. Without this understanding, there are no benefits to the viewer.
“A graphical method is successful only if the decoding is effective. No matter how clever and how technologically impressive the encoding, it fails if the decoding process fails.” — Cleveland & McGill, 1985
The human visual system
We must always consider the limits of the human visual system to create valuable visualizations. A study by Cleveland & McGill (1984) introduced a theory that ranks graphical elements according to how likely they are to be interpreted accurately. These elements are position, length, direction, angle, area, volume, curvature, shading, and color. Subjects analyzed data encoded into charts using these different elements. The results of the ranking are as follows.
Easiest to accurately interpret
- Position on a common scale
- Position on non-aligned scales
Somewhat easy to accurately interpret
- Length, Direction, Angle
Hardest to accurately interpret
- Area, Volume, Curvature
- Color & Shading
People lose interest in graphs that are hard to read or too complicated. Simplify the visualizations by having one message per graph and using elements that are easy to interpret. To avoid conveying too much on a single chart, consider splitting the information into various charts. It’s much easier to choose high-ranking elements when you have a focused concept.
Avoid the use of pie or donuts
Pie charts are not optimal visual representations of data because they’re difficult to process. They rely on three of the hardest elements to accurately interpret: angles, curvature, and area. These elements make it tough to spot the difference between two similar slices when they’re close in size. Instead of a donut chart, use a dot plot because it’s easier to interpret position on a scale. Or try a bar chart because it removes the angels and curvature making it easier to identify the difference between data points.
Remove the noise
Keep things as simple as possible by avoiding extra graphics that will distract from the data. The closure principle states that people like things to be simple and fit in the constructs of what’s already in our heads. By leveraging this principle, we can remove extra clutter like heavy borders, tic marks, dark shading to allow the data to shine. The more we strip away the unnecessary, the more our data stands out. Make sure you only keep what’s necessary for understanding. When we reduce noise, we reduce the cognitive burden placed on the viewer.
Consider the data-ink ratio
Make sure to prioritize what’s important. Do not remove essential data to simplify or beautify the chart. Edward R. Tuft talks about the data-ink ratio as the amount of ink that shows the data compared to the total amount of ink representing the chart. Charts like bubble graphs are overly graphic and tend to hide necessary information making it hard for users to extract value. Don’t waste ink on things that don’t matter for the purpose of aesthetics.
“Above all else, show the data.” Edward R. Tufte
Use insights as chart titles
The audience expects visualizations to tell them instantly what is happening. By replacing descriptive titles with meaningful insights, the user gains immediate value at first glance. Graph titles are essential elements that help improve information recall. According to Michelle Borkin’s research, “insightful titles combined with clear graphics produce a more memorable data-driven experience.” Leverage the title space to communicate insight and to increase the immediate understanding of the data.
Examples of titles as insights:
- Sales increased by 40% since last month
- Spending is on track with the budget
- Tesla is leading in SOV this month
Examples of non-insightful titles:
- Sales forecast over time
- Budget and Actuals for this month
- SOV Breakdown
Use labels to clarify, not clutter
Labels and titles should help the users interpret the data, but too many can make it hard to understand trends and decipher meaning. If the shape of the data is more important than the individual values, consider displaying the values on a scale instead of directly on the chart line. If the values are more important than the shape of the overall data, place labels on the chart to call attention and remove them from the axis to clear clutter.
Bar graphs tips
Bar graphs are great for showing current data
- Perfect for comparisons
- Ordering the chart based on the value makes it easier to interpret and compare the performance.
- Remove the x-axis and place labels outside of the bar. By making the information readily available, the user doesn’t have to do work to get it.
- Make the bars thick — this is where all the data is stored.
- Consider using condensed fonts to help with limited space.
Line graphs tips
Line graphs are great when analyzing the trend
- Ideal for trends or showing changes over time.
- Use less than five lines for optimal readability.
- Place labels at the end of the line in the line color. It helps users connect it to the data.
- Use straight lines instead of curved lines to keep data integrity.
- Remove tick marks and lighten the grid lines.
- Remove x and y-axis descriptions. The chart title should describe these values.
Lastly, add comparisons
What’s the purpose of a visualization? Most of the time, it’s to make comparisons between two or more data points. Vesa Vuusela says, “A chart acquires its meaning from comparisons.” By drawing relationships between elements, the data becomes meaningful. The different types of comparisons to be leveraged are ranking, numbers, locations, time, category, and more. Designers should decide which comparisons are the most important to the user.
“At the heart of quantitative reasoning is a single question: Compared to what? “ — Tufte, Envisioning information
References:
- How Humans See Data by John Rauser — Velocity Amsterdam 2016 https://youtu.be/fSgEeI2Xpdc
- Papers We Love Berlin — How to create data visualizations telling a story — 06/19 — Juhis Santala https://youtu.be/YU2LNOUR5lY
- Data Visualization Handbook by Juuso Koponen and Jonatan Hilden
- Cleveland & McGill (1984)
- Michelle Borkin’s eye-tracking research
- https://www.stat.auckland.ac.nz/~ihaka/787/lectures-perception.pdf
