Visualizing Inequality: Award-Winning Project on Carbon Emissions
How the World’s Wealthiest Impact Our Carbon Footprint
Hi, I’m Erik! I work as a freelancer specializing in infographics and illustrations through my company, VisualizeThat.
My clients range from media to educational material producers, authorities, and companies. I create material for both print and web, including animations and interactive graphics.
When I was informed about the Data2speak visualization competition, I started looking through my recent assignments to find something that could be turned into an interactive graphic. A suitable material for the purpose was a graphic I made on behalf of the magazine Sveriges Natur, or translated Swedish Nature.
How the Wealthiest Impact Carbon Footprint
This is how the document reads: the world’s richest part of the population, 0.01 percent, is responsible for emissions of 1,784 tons of carbon dioxide per person, per year. The corresponding value for the richest 0.09 percent is 323 tons.
The richest 0.9 percent account for 76 tons, the richest 9 percent 22 tons, and the middle-rich 40 percent 5 tons. Then there remains the poorest 50 percent, responsible for 1 ton of carbon dioxide per person per year.
The figures come from the report “Millionaire Spending Incompatible with 1.5°C Ambitions” by Stefan Gössling and Andreas Humpe, as well as “Global carbon inequality over 1990–2019” by Lucas Chancel. They refer to data from 2020.
Another relevant factor in the statistics is the percentage of emissions from each income group. Then the figures will be 4 percent for the very richest, followed by 7 percent, 17 percent, 48 percent, 40 percent, and 12 percent respectively for the poorest half of the population.
The largest share, 48 percent, is the richest 9 percent of the population responsible for. This type of information, which is obviously difficult to access in text form, is of course best conveyed with infographics. I was commissioned by the newspaper to visualize the statistics on a full page.
This is how I did it
To make the shares concrete, I started by converting them into persons. If 0.01 percent is converted into one “whole” person, the total number becomes 10,000 people. In this way, I created a calculation example — if the world consisted of 10,000 people, one person alone would be responsible for 1,784 tons of carbon dioxide per year, or 4 percent of the total emissions.
This led further to the design of the graphic, which consisted of 10,000 points. The sizes of these points correspond to the values of the carbon dioxide emissions.
At the same time, the total areas for each income group correspond to the total emission shares. That is, the area of the 5,000 poorest makes up 12 percent of the circle’s total area. Thus 12 percent of the total emissions.
It is best if all parameters appear in the same visual unit. Which is better than splitting the parameters into multiple units. I used the online tool RAWGraphs for the visualization. The round shape also makes the visual solution graphically interesting. And then I added a chimney to create the illusion that the graphic consists of a cloud of smoke. I like to work with playfulness and visual metaphors. In this way, the material hopefully becomes more eye-catching.
In any case, it was this graphic that I chose to work on as a competition entry.
Before reaching this solution, I tried other approaches. This is how I often work — I sketch and test my way around in Illustrator to determine which visual solution best conveys the information. Especially in situations like this where the information base consists of many parameters.
Visually speaking, the new graphics are based on the same visual concept. But technically, the method is completely different. I created several circles with dotted lines, calculating the total number of points to be 10,000. Well, not exactly. But almost!
Interactivity can have varying degrees of complexity. In its more complex form, it can involve sliders to adjust values, as an example. Or, in its simplest form, it can mean clicking on an object to show more information, or that the graphic is divided into several steps. Simply because not everything can fit in a single image. They can also be of educational value in conveying the information bit by bit.
This was my thought in this case: Instead of explaining everything in one image — as in the static template — the information is conveyed step by step, like storytelling.
The Storytelling Part
I’ll start by explaining the scope: carbon dioxide emissions per capita, depending on income. Along with a picture of several faces. These indicate the population. An animated hand indicates that the image is clickable and not static.
You can check the interactive project here.
Then the image zooms out, and I convey the thought experiment; that the world consists of 10,000 people. Which is reinforced by the faces. They are then divided step by step into the respective income group.
When I create interactive graphics, I work with SVG and JavaScript. When the different income groups are described, the circles undergo transitions. Three parameters change: the circles’ radius, thickness, and dash. These parameters are SVG attributes and can be adjusted using JavaScript. In this stage, the mathematical calculation is central to the process. A physical notepad is essential.
The radius of the circles increases, as well as the stroke and dash — but the number of points is constant. The point sizes must, just as in the model, correspond to the carbon dioxide emissions per person.
When all income groups are presented, they undergo another transition, so that the groups’ emissions are presented in their entirety.
Finally, the smaller line graph is shown that visualizes the extrapolated values of the expected future emissions.
At the very end, the chimney from the template returns, and the circles begin to spin. In general, it is important to be able to reverse this type of graphic. I realize I should have done so in this case as well, and not just offered the option to start over.
Creating interactive graphics requires a lot of planning. I start by creating all the graphic material in Illustrator. Which means giving the object’s ID for further handling of the JavaScript functions. In some cases, I vectorize the text to make sure it is the same in all browsers. Otherwise, there is a risk of it overflowing. In this case, I chose to keep the text editable to make transitions faster. More vectors mean more work for the browser.
Next, I save the file as SVG and open it in the code editor, where I add the javascript code that controls the functionality. The result is the competition entry.
This project got 3rd place in the Data Art & Storytelling nomination of the Make Your Data Speak Award 2024!
Here is the link to the interactive project: https://visualizethat.se/interactive/Project_DS_2_Erik_Nylund.svg
Thank you for reading!
Erik Nylund, owner of VisualizeThat
You can check my other projects on the website:
Check the Data2Speak website and follow us on LinkedIn and Twitter!
