Air pollution is one of the major environmental threats to world health. 7 million people die every year from exposure to fine particles in polluted air, and many more are facing the health effects of long-term exposure to pollution such as respiratory diseases, lung cancer and heart disease.
The data gives a general indication of the historical air quality of different countries from 2010 to 2017. The values represent the average annual exposure of a country’s population to ambient PM2.5 pollution, measured in micrograms per cubic meter.
Reflection
The data is presented in a line graph to clearly visualise each country’s change in air quality over time as well as the comparison between different countries' air pollution levels.
With this project, my aim is to let viewers gain a better understanding of the varying levels of air quality of countries around the world and become more aware about the countries that have higher levels of pollution. It is important that we understand the adverse health effects air pollution is causing to people living in highly polluted areas, and not take for granted the air quality we have for those of us living in lesser polluted countries.
Original data source: Global Burden of Disease Study 2017
Design decisions
The graph uses different bright hues for the lines so that they are easily distinguishable from each other and stand out against the background. The sliders allow viewers to adjust the graph’s size depending on their browser window size.
The visual interpretation sketch shows multiple sources emitting varying amounts of ‘polluted smoke’. Air pollution is caused by combustion, hence warm colours were used as they’re associated with the idea of burning. Viewers can interact with and restart the sketch to create different smoke outcomes each time.
Both sketches have a smoky background texture to visualise smog/pollution.
Issues
When faced with code errors, I would usually do some trial and error to help identify the line of code responsible for the issue.
There were also a few times where I wanted to add a certain feature to my sketch but faced errors when I first tried. I managed to solve it by taking references from other people’s codes online and finding a different method of achieving the same visual outcome.
Feedback
They felt that the graph was clear and concise with good attention to the small details like the vertical guidelines that help guide viewers’ eyes to the different years and also the practical consideration of the sliders. They also liked how they can produce random results each time they click to restart the visual interpretation sketch, as well as the website's colour scheme and use of moving visuals in the gallery.
Achievements
I’m happy that I was able to produce and code two sketches on my own as well as independently solve issues I faced with the help of online resources. Throughout my process, I managed to discover more possibilities of p5.js, such as using perlin noise to create harmonious random outcomes–something I used quite a bit in both my sketches. I was also able to avoid thinking too literally and instead come up with a more abstract approach when interpreting my data topic.
Importing dataset values into a basic line graph.
Mouse interactions using sliders & hover effects.
Using perlin noise to create a smoky background texture.
Learning about using perlin noise & vectors to create a flow field.
Exploring colour transitions & particles starting from the center.
Mouse interactions with circle object.
p5js Sketches
Perlin Noise Flow Field
Created by following the Coding Train tutorial on perlin noise flow fields.
