I recently bumped into a chart like this:
- This is often times called a spaghetti chart. Why? Because the lines are constantly overlapping. The lines that are overlapping are forming a different shape (like a ❌). Because this differs from the norm (a line) it will draw our attention. This is called a preattentive attribute. Because a lot of lines are overlapping, we don’t know where to look first.
- Color could be used more strategically
- Some clutter is making the chart more noisy than necessary
- My eyes are constantly going back and forth between the legend and the lines.
A chart is ment to convey a story, something that will resonate with the people using it. Without context (Who will use it?, Why are they using it?) you can’t design your charts properly.
See my other post on an effort to make this requirements gathering process easier
For this particular chart, let’s assume we want to invest in movies and we want to have a good look at the evolution in profits the different genres had. We have to easily compare them against each other.
Decluttering means removing all unnecessary elements from the chart. Everything we add to the chart will increase the cognitive load for our users, making the chart harder to interpret (think colors, labels, axis lines, legends, grid lines,…).
- We removed the legend and labeled the lines directly, no more back and forth between the legend and the data!
- We de-emphasized the labels, titles and axis, making the data more prominent.
- Formatted the y axis tick labels. We don’t need to see the whole number when it is up in the millions.
Properly aligning all items makes people perceive the chart as easier and thus more accessible to read. When done properly it can create a clear visual hierarchy, guiding the users eyes to where they need to be.
- We aligned the axis labels with the first tick on the axis.
- We aligned the title to the left, creating a clear visual hierarchy.
- Turned the title into something a bit more engaging, making it more likely that people will inspect the chart further.
The chart is still hard to read. Highlighting can be done with colours or emphasised text to immediately draw the users attention. This can only be effective when used sparingly! Remember the 10–15% highlight rule 👍
Let’s assume here we are only interested in the family genre:
The grey lines provide some context, but comparisons can’t be made yet.
5 appropriate display medium
I’m working on a guide to show what charts are useful in what situation. I’ll update the link here when it’s finished!
A mistake I see people make often is trying to squish everything into a single chart. This degrades the readability. A display that often helps with something like this is a small multiple. Adding a small legend below the title will bring us to the end of this chart refactor:
A link to the notebook can be found here.
See other improvements? Not agreeing with some of my remarks? Came across an interesting visual you’d like to see discussed in one of the next posts? Please share in the comments! 🤓