Animer le carbone stocké dans chaque arbre de la planète

De : Mikel Maron

Dans la course intense jusqu'à la COP27, on nous a demandé de produire une vidéo animée du carbone stocké dans chaque arbre de la planète pour les incroyables CTrees . Nous étions à fond sur Climate TRACE et tout le reste à Earthrise .. mais nous n'avons pas pu résister au défi. Le résultat a été une animation efficace utilisant le Mapbox Globe et le modèle de narration .

La «demande» concernait une vidéo qui zoomait, faisait un panoramique et tournait lentement à travers les forêts et d'autres paysages du monde entier, illustrant l'analyse détaillée du carbone par CTrees.

Au début, nous avons envisagé diverses approches Mapbox de suivi des chemins comme River Runner et les animations cinématographiques du Tour de France , et GL Director construit par Development Seed lors du lancement de Mapbox 3D Terrain, mais elles ne permettaient pas le contrôle de la caméra. Nous avions besoin. Le modèle Storytelling s'est avéré être la solution idéale - il permet un contrôle précis de la caméra et des transitions animées à travers chaque chapitre de texte d'une histoire via un fichier de configuration simple. C'est une solution élégante et simple, largement adoptée et modifiée pour le journalisme de données. Le mouvement est normalement contrôlé en faisant défiler la page. Et si ce mouvement se produisait simplement automatiquement sans aucune intervention ?Pour obtenir uniquement l'effet d'animation du globe sans histoire, il suffirait de masquer la zone de texte pour chaque chapitre.

Après plusieurs itérations pour implémenter le bon comportement, cela s'est avéré ne nécessiter que quelques ajouts au modèle Storytelling. Le changement clé consistait à faire défiler automatiquement le chapitre suivant une fois la transition animée terminée. Le modèle Storytelling crée des éléments HTML pour chaque chapitre en fonction de la configuration, puis utilise scrollama pour déclencher des mouvements et des modifications sur la carte lors de la rencontre de chaque chapitre. Scrollama attribue un attribut "data-scrollama-index" à chaque élément de chapitre de l'histoire. Ainsi, lorsque l'animation s'arrête, nous recherchons l'élément scrollama suivant et faisons défiler jusqu'à celui-ci. Ça a marché!

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();
  });
}

De petits changements peuvent avoir de grands résultats. Nous espérons que cet ajout à Storytelling s'avérera utile à d'autres. Partagez comment vous animez vos globes !