Recreating a stacked bar chart
December 18, 2024This week I recreated a stacked bar chart from The Economist on Ukrainian soldier casualties in the Russia-Ukraine war.
Warning: Data may be inaccurate compared to the source.Recreation
Ukrainian soldier casualties in Russia-Ukraine war*
Recorded February 24th 2022 - November 19th 2024
Killed
Injured, low estimate †
By age group, ’000
As % of male population
Sources: UALosses; UN
*57,118 known fatalities with age listed. Data do not include all fatalities
† Assuming six per fatality ‡ Assuming eight per fatality
Highlights
This is the first stacked bar chart that I recreated during the challenge. I love stacked charts, they have always pleased me visually. Although they can be tricky sometimes, they get simpler when you get the hang of them.
- To be honest, I had a hurdle that I had to overcome with creativity. What you see in each bar as a border, is actually another bar, a little bit bigger in order to create that border. I tried to do it with the use of SVG stroke and CSS, but I could never get it to do it on the whole bar, it did it on each of the divisions
- I'm still waiting for an opportunity to do a recreation with two versions depending on screen size. So far I have made size adjustments to make it easier to read and visually more pleasing, more responsive, but I want to get one where I can make more adjustments, that is more personalized. A few weeks ago I heard about Sarah L. Fossheim and her views on accessibility in data visualization. I recommend you read this gem: Dataviz accessibility principles, demonstrated by the 2024 presidential election dashboards. I'm sure that in my own style of visualization (which I'm still defining), accessibility will be taken into account