A Breathing Earth

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

Information is Beautiful Awards longlist badge

Scroll down for information

Details
Link:

Breathing Earth

Created:

April & May 2016

Reason:

data sketches’ April month

Tools:

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

Data:

VIIRS geo files from NOAA STAR

Description

We all know that our Earth goes through a seasonal cycle, especially for the latitudes farther away from the equator. In the fall the “deciduous” plants lose their leaves only to grow back again in the next spring. The animation happening in “Breathing Earth” shows how 50.000 circles move through all 52 weeks of 2016 and visualize the seasonal cycles. Thereby displaying the how vegetation health changes throughout the year and how plant growth & decline occur on different times and scales in the many regions across the Earth.

Creation

For the April month of data sketches I was inspired while reading the Dutch quarterly World Wildlife Fund magazine. I really wanted to do something that would fit the WWF, that wouldn’t have been crazy if they had published it. Through links recommended by people through Twitter 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, or “greenness”, across the planet. I immediately knew that I wanted to visualize and smoothly animate that data throughout the year and give my own spin on it.

Handling satellite data (Geo-Tiff files) was new to me, but luckily I found enough tutorials to help me get started. I converted the immense files into a much smaller dataset that I could use. I irrationally chose to make the final visualization an actual “on the spot drawn” visualization, thus using circles on the screen, instead of turning the 52 weeks into a gif/video. This meant that I also had to learn some new coding languages, since D3 + SVG cannot handle 50k circles animating continuously. I dove into both Pixi.js and Regl.js, both based on WebGL. It took 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 visualization very minimal. I added a legend just in case, although I don’t really think it’s needed. There are also 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.

You can read an extensive write-up on the data, but also the coding on the data sketches April page.