A Breathing Earth

Earth going through a year of plant growth & decline in high detail


April & May 2016


data sketch|es


GDAL, R, D3.js, Pixi.js, Regl.js


VIIRS geo files from NOAA STAR

For the April month of data sketch|es I was inspired while reading the magazine I get from the Dutch branch of the World Wildlife Fund. I really wanted to do something that would fit the WWF, that wouldn’t have been crazy if they had published it. Thanks to a question on Twitter about datasets I meandered my way through environmental data and animal tracking. Eventually I ended up on the website of NOAA STAR, where I saw an interesting image of the vegetation health, of “greenness” across the planet. I immediately knew that I wanted to visualize that data throughout the year and give my own spin on it.

Because I was new with satellite/geo data it took me quite some effort to handle the Geo-Tiff files and get something from it that I could use (you can read an extensive write-up on the data, but also the coding on the data sketch|es april page). I irrationally chose to make the final visualization an actual visualization, thus using circles on the screen, instead of turning the 52 weeks into a movie. This meant that I also had to learn some new coding languages, since D3 + SVG cannot handle 50000 circles animating continuously. I dove into both Pixi.JS and Regl.js, both based on WebGL. It took quite a lot of hours and asking more questions on Twitter, but I got it animating smoothly through all 52 weeks in the end.

Because the “shape” of the landmass on Earth is so intuitive for people, and the idea of a variable called “greenness” is as well, I kept the entire visualization very minimal. I added a legend just in case, although I don’t really think it’s needed, and a few sentences of text to explain more about what the viewer is looking at and where the data comes from. But the animation of our Earth is the main thing that should draw all of the attention.

A Breathing Earth - Final visual