Animando o carbono armazenado em todas as árvores do planeta

Por: Mikel Maron

Na intensa corrida até a COP27, fomos solicitados a produzir um vídeo animado do carbono armazenado em todas as árvores do planeta para o incrível CTrees . Estávamos totalmente esgotados no Climate TRACE e em tudo mais no Earthrise .. mas não resistimos ao desafio. O resultado foi uma animação eficaz usando o Mapbox Globe e o modelo de storytelling .

O “pedido” era para um vídeo que ampliasse, girasse e girasse lentamente em florestas e outras paisagens ao redor do mundo, ilustrando a análise detalhada de carbono por CTrees.

A princípio, consideramos várias abordagens de acompanhamento de caminhos do Mapbox, como River Runner e as animações de rota cinematográfica do Tour de France e GL Director construídas pela Development Seed no lançamento do Mapbox 3D Terrain, mas não permitiam o controle da câmera Nos precisamos. O modelo Storytelling acabou sendo o ajuste perfeito — ele permite um controle preciso da câmera e transições animadas em cada capítulo de texto de uma história por meio de um arquivo de configuração simples. É uma solução elegante e simples, amplamente adotada e modificada para o jornalismo de dados. O movimento é normalmente controlado ao rolar a página para baixo. E se esse movimento simplesmente acontecesse automaticamente sem entrada?Para obter apenas o efeito de animação do globo sem uma história, seria necessário apenas ocultar a caixa de texto para cada capítulo.

Depois de várias iterações para implementar o comportamento correto, isso acabou exigindo apenas algumas adições ao modelo Storytelling. A principal mudança foi rolar automaticamente para o próximo capítulo assim que a transição animada terminasse. O modelo Storytelling cria elementos HTML para cada capítulo com base na configuração e, em seguida, usa scrollama para acionar movimento e mudanças no mapa ao encontrar cada capítulo. Scrollama atribui um atributo “data-scrollama-index” a cada elemento de capítulo na história. Assim, quando a animação para, consultamos o próximo elemento scrollama e rolamos até ele. Funcionou!

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

Pequenas mudanças podem ter grandes resultados. Esperamos que esta adição ao Storytelling seja útil para outras pessoas. Compartilhe como você anima seus globos!