Animating the carbon stored in every tree on the planet

By: Mikel Maron

In the intense run up to COP27 we were asked to produce an animated video of the carbon stored in every tree on the planet for the incredible CTrees. We were flat out on Climate TRACE and everything else at Earthrise .. but couldn’t resist the challenge. The result was an effective animation using the Mapbox Globe and storytelling template.

The “ask” was for a video that zoomed, panned and rotated slowly across forests and other landscapes around the world, illustrating the detailed carbon analysis by CTrees.

At first, we considered various Mapbox paths-following approaches like River Runner and the cinematic route animations of the Tour de France, and GL Director built by Development Seed at the launch of Mapbox 3D Terrain, but they didn’t allow for the camera control we needed. The Storytelling template turned out to be the perfect fit — it enables precise camera control and animated transitions through each text chapter of a story via a straightforward configuration file. It’s an elegant and simple solution, and has been widely adopted and modified for data journalism. Movement is normally controlled by scrolling down the page. What if that movement simply happened automatically with no input? To achieve only the globe animation effect without a story would only require hiding the text box for each chapter.

After several iterations to implement the right behavior, this turned out to require just a few additions to the Storytelling template. The key change was to automatically scroll to the next chapter once the animated transition ended. The Storytelling template creates HTML elements for each chapter based on the config, and then uses scrollama to trigger movement and changes on the map when encountering each chapter. Scrollama assigns a “data-scrollama-index” attribute to each chapter element in the story. So when the animation stops, we query for the next scrollama element, and scroll to it. It worked!

if (config.auto) {
  var next_chapter = (current_chapter + 1) % config.chapters.length;
  map.once('moveend', () => {
    document.querySelectorAll(
      '[data-scrollama-index="' + next_chapter.toString() + '"]')[0].scrollIntoView();
  });
}

Then the hard iterative work came in to define the stop points, the timing, the camera angles that worked best. There was also some educational refreshment of using GDAL and color ramps. You watch the interactive results here. To produce a video, Screen Recorder was our tool of choice.

Small changes can have big results. We hope this addition to Storytelling proves useful to others. Share how you animate your globes!