De-complicating charts
In June 2022, VMM (the Flanders Environment Agency) published some interesting new data on water consumption in the region. It describes the different types of water being consumed (e.g. tap water, groundwater, or cooling water) and the sectors using them. The crux of the story is the following chart:
To be honest, I find it hard to wrap my head around this chart. The data is there, the presentation is correct, but for some reason I fail to quickly see what I want to see: which sectors are contributing to which types of water consumption, and how much?
There are some flaws with this chart that make it hard to read:
- The sixth column is actually a summary column for the first five columns, and the final column is an additional one. That’s not very clear from how the chart is designed.
- The colour scheme is a bit all over the place: there’s no single category highlighted, and a few different colours are fighting for our attention. We have to look back and forth between the chart and the legend in order to know what’s what.
- There’s a lot of variation in the data between categories, causing the bars in this stacked bar chart to ‘jump around’ up and down. This makes it hard to evaluate e.g. the contribution of industry between the different categories.
- Finally, we can only see percentages in this chart, and not the absolute water consumption. This limits the insights we can extract from this chart. We can see that the energy sector has an important contribution to the consumption of surface water, but without absolute numbers we don’t know whether we’re talking about 1 million, or 100 million m³. We don’t know whether it’s a huge part or just a tiny fraction of the total water consumption in Flanders.
Let’s see what we can try to make this chart a bit more clear.
One piece of advice for bar charts: they often work better when placed horizontally. This gives us a bit more space to place the category labels:
Notice how we’ve also:
- switched around the legend labels, so they’re now in the same order as the bar segments, and
- removed the horizontal axis title by adding the % sign directly to the tick labels
The bar segments are still jumping a bit from left to right. One way to solve this could be to visually separate the different sectors, using a small multiples approach by splitting up the chart in a few smaller bar charts:
This is an improved design, but still a bit flawed. It’s not yet ideal to quickly see the different data values — this could be solved by explicitly adding data labels. On top of that, the interpretation of the chart becomes a bit ambiguous. We can see that the value for Households > rainwater is around 55%. This means that households are responsible for 55% of the rainwater consumption, but an inattentive viewer could draw the wrong conclusion that 55% of households’ water consumption comes from rainwater. This kind of ambiguity is something we should avoid at all costs.
Let’s try to de-complicate the chart in another way: by looking at different chart types. Clustered and stacked bar charts are always a bit hard to figure out. An interesting alternative to consider is a Marimekko chart, which is a kind of two-way stacked bar chart. We basically take our original chart, but scale the column widths in such a way that their width corresponds to the absolute water consumption. In that way, categories making up a big part of the water consumption will visually become larger, while insignificant categories will shrink.
(Notice how we’ve ordered the water categories from largest to smallest to make everything a bit tidier.) Uh oh, that’s a lot of cooling water! It messes up our chart a bit. Maybe we could split it up to make it a bit less impactful. To clarify this breakdown, we can introduce some visual hierarchy using font size and colour, lines and borders, and different colour values:
Can we further improve this? Yes, I think so. At this point, the apparent disorder of the bar section still bothers me. If we take our biggest categories (industry and energy) and move them to the left, everything feels just a bit tidier:
This chart looks a lot better already, but it’s still a bit guesswork to know each of the contributions. We could add some data labels directly so our audience can see the precise values, at least for the main categories. This also enables us to declutter the chart by removing the legend entirely, because we can label the data directly, and by removing the gridlines from the top part of the chart, because we can read the percentages directly as well.
Finally, let’s give everything one finishing touch of polish by choosing a slightly more balanced colour scheme, and by optimizing the title and subtitle placement:
Comparing the original chart with our redesign, we’ve solved most of our problems:
- It’s now clear which categories are total categories, and which ones are subcategories.
- The colour scheme is a bit more balanced, none of the colours is fighting for our attention too much. We were able to remove the legend.
- The bars are a bit more ordered and tidy.
- We can see compare percentages and absolute values in this chart, and we can see some important data labels.
Update: after a good night’s rest, I’m not happy yet. Sorry. I showed this chart to my boyfriend and noticed a problem: because the ‘groundwater’, ‘rainwater’ and ‘other water’ categories are relatively small, it’s hard to see how they are subdivided. On top of that, it’s difficult to compare a long, thin strip of colour with a wide, short one. I demand a better solution!
Let’s dive into our list of chart types again, and find an alternative. We could combine the layout simplicity of a matrix diagram with the comparison simplicity of a proportional area chart to come up with some kind of bubble matrix chart:
And now I am completely satisfied. 😊
It’s much easier to compare the different sectors ánd categories simultaneously, and we could even add all of the labels. Win-win!
Here’s the full comparison between the original chart and the redesign:
