Inspiration

Global warming has always been an issue incredibly important to me, and with the current political climate in the United States, it's often an issue not taken very seriously. Many individuals underestimate the human impact of industrialization on the planet and of the fast rate our carbon footprint is growing. I've recently developed an interest in data visualization and used this project as an opportunity to learn three.js, an open source, cross-browser JavaScript library/API used to create and display animated 3D computer graphics. By creating an educational and interactive visual on the growth of our world's country emissions, I hope to increase awareness about the extent of the carbon emissions problem. This project is registered with the domain heyistheearthok.com

What it does

The prelude to the interactive data visualization is an introduction to the carbon emissions problem with animated text. Data from database.worldbank is cross referenced with country names using the Google Maps API for latitude and longitude coordinate to create the unqiue database I use here. Mapped across 1990 to 2005 in five year intervals, a line intersects the coordinate at the country location, with the length depicting the magnitude of the country's carbon emissions that year per capita. The visualization is animated across years and is interactive.

How I built it

I learned the foundations of three.js from the site's documentation as well as by looking at the sample examples. Animations in the introduction are built using css keyframes and timed with javascript. The database was created using a python script that selected and formatted columns from csv files and cat-ing them together in the terminal. The Earth map used to wrap around the sphere in three.js was crafted and editted on Photoshop.

Challenges I ran into

Building the actual data visualization was difficult because of the lack of resources on specifically plotting points of a spherical geometric figure. A lot of my successes were the result of trial and error. Finding a database to plot my data from was also difficult so I resulted in creating my own. I also really struggled when I received a cors error on local images and I didn't know how to resolve it for a long time but I was finally able to by setting up a local server with python.

Accomplishments that I'm proud of

I'm proud of the amount of was able to achieve for one person and for learning a new skill. I'm also quite proud of how I animated the text in the introduction to resemble air.

What I learned

I learned three.js! (And by extension, WebGL :) )

What's next for "hey is the earth ok?"

I'd like to create more datasets and possibly map emissions to animate on the visualization automatically. It would also be cool to look into adding other greenhouse gases such as methane. If I had more time, I would also like to add a feature on being able to petition/contact your government representative about the issue.

Share this project:
×

Updates