Free version - Awesome Plotly with code series (Part 4): Grouping bars vs multi-coloured bars
Do technicolour bars really help make a story clear?
Welcome to the fourth post in my “Plotly with code” series! If you missed the first one, you can check it out in the link below, or browse through my “one post to rule them all” to follow along with the entire series or other topics I have previously written about.
A short summary on why am I writing this series
My go-to tool for creating visualisations is Plotly. It’s incredibly intuitive, from layering traces to adding interactivity. However, whilst Plotly excels at functionality, it doesn’t come with a “data journalism” template that offers polished charts right out of the box.
That’s where this series comes in — I’ll be sharing how to transform Plotly’s charts into sleek, professional-grade charts that meet data journalism standards.
Categorical colouring that will break your charts
Today, we’ll tackle a challenge that’s both subtle and powerful: using colours to represent subcategories within your bar charts. Using colours to differentiate an extra layer of information is a common solution. But, without careful planning, colours can quickly clutter your chart and muddy your message.
What will we cover in this blog?
Indiscriminate rainbow colouring.
Ordering the indiscriminate rainbow colouring.
RAG colouring.
Colouring that hurts my brain because of ordering!
Imagine you work for a health organisation and want to run a survey on smoking rates at the country level. To begin you storytelling you want to be able to:
Represent in descending order, the countries with the highest smoking rates.
In addition, you want to show the relevant continent.
If you try a default bar chart…
First sort, then colour.
The idea is the following:
If your colour codes represent continents, then ensure that the y-axis is sorted first by continent.
Then within each continent, you can then decide to sort by smoking rate.
If you now apply colour, each set of countries can be much easier identified with a continent.
Applying this to the chart above.
Levelling to pro
Main issue 1: Colours might have meaning. Solution. Unless you really need colour to convey message, just use grey as a starting point.
Main issue 2: But how do I represent a 3rd dimension without colour? Solution. Work with double deep axis to create parent-child level categories
RAG colours for status updates
Many stakeholders are used to Red-Amber-Green when talking about progress updates. Imagine that you are faced having to present a progress status update. The data you have looks like the one below. See how your goal is to present 4 dimensions! Not 3 like for the smoking rate plot above, but 4!
Trying again the default chart…
First sort, then colour.
Levelling to pro
Main issue 1: As a stakeholder, I would like to see the each department’s target. Solution. I suggest adding a marker for each progress. In this case, I chose a vertical line.
Main issue 2: As a stakeholder, I would like to see the specific progress and target numbers. Solution. I suggest adding the progress and target “text”, aligned vertically to the right of the plot.
Want to see the full code in action?
In the full post, you’ll get Plotly tips to build these charts. There is a link to my Github repo, a link to a live Streamlit dashboard so that you can play with the visuals, and a deep dive into how our brains process these visuals.
I hope you have found this content useful. Let me know in the comments if you have faced these situations before or any other that I could help you with.