Data Visualization/HTML/CSS/Javascript/Geospatial Analysis
When I first started learning Computation Media, if you trace back to my first blog post, I said I wish I could learn how to do data visualization by the end of the term. I am so glad that this already happened for my midterm. Also I realized how far I have been since 8 weeks ago.
First I follow Dan Shiffman’s Coding Challenge video #57 and imported the world map from Mapbox to my canvas.
Then I start to see what data I can find for free. I found many interesting data and decided to use the yearly CO2 emissions data. It is a csv file.
Data source: https://data.worldbank.org/indicator/EN.ATM.CO2E.KT
With this data sheet, I am able to draw rad circles based on the emission value of each nation and position it onto the nation’s latitude and longitude.
I soon realized that the emission value should be relative to the area of the circle but not the diameter. So I change the calculation and mapping so that the circles can more accurately represent the emission value.
Wouldn’t it be fun to animate the map? I used this smoke effect particles to mimic the CO2 emission.
I placed it to every circle on my map.
The animation should also has a size relative to the emission value, but it might block my original circles.
I change the settings so that it won’t block the circles containing the data and the nation’s name on the back.
I also change the map style so that the smoke animation can be darker and look more like real smoke.
Some icing on the cake, I added HTML elements to make the map more interactive.
You can input an emission value and trigger the animation for all the nations that has an CO2 emission amount excess this value.
I spend many time figuring out the HTML and CSS elements because I am still not very familiar with them. Creating the input and button elements in HTML are very different from making them in P5. I am glad that I got the result I wanted and got to practice more coding languages that are not P5.
Link to full code here: http://alpha.editor.p5js.org/effyfan/sketches/Sy9TdBna-
EFFY FAN 