Um mapa para a perfeição: usando o D3.js para criar belos mapas da Web
Publicados: 2022-03-11Data Driven Documents, ou D3.js, é “uma biblioteca JavaScript para manipular documentos baseados em dados”. Ou, para simplificar, D3.js é uma biblioteca de visualização de dados. Foi desenvolvido por Mike Bostock com a ideia de preencher a lacuna entre a exibição estática de dados e visualizações de dados interativas e animadas.
D3 é uma biblioteca poderosa com muitos usos. Neste tutorial, discutirei uma aplicação particularmente atraente do D3: criação de mapas. Analisaremos os desafios comuns de construir um mapa da web útil e informativo e mostraremos como, em cada caso, o D3.js oferece aos desenvolvedores JavaScript capazes tudo o que eles precisam para tornar os mapas bonitos.
Para que é usado o D3.js?
O D3.js pode vincular quaisquer dados arbitrários a um Document Object Model (DOM) e, em seguida, por meio do uso de JavaScript, CSS, HTML e SVG, aplicar transformações ao documento que são orientadas por esses dados. O resultado pode ser uma saída HTML simples ou gráficos SVG interativos com comportamento dinâmico, como animações, transições e interação. Todas as transformações e renderizações de dados são feitas do lado do cliente, no navegador.
Em sua forma mais simples, D3.js pode ser usado para manipular um DOM. Aqui está um exemplo simples em que D3.js é usado para adicionar um elemento de parágrafo a um corpo de documento vazio, com o texto “Hello World”:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>A força do D3.js, no entanto, está em sua capacidade de visualização de dados. Por exemplo, ele pode ser usado para criar gráficos. Ele pode ser usado para criar gráficos animados. Pode até ser usado para integrar e animar diferentes gráficos conectados.
D3 para mapas da Web e visualização de dados geográficos
Mas o D3.js pode ser usado para muito mais do que apenas manipulação de DOM ou para desenhar gráficos. O D3.js é extremamente poderoso quando se trata de lidar com informações geográficas. Manipular e apresentar dados geográficos pode ser muito complicado, mas construir um mapa com um D3.js é bem simples.
Aqui está um exemplo D3.js que desenhará um mapa-múndi com base nos dados armazenados em um formato de dados compatível com JSON. Você só precisa definir o tamanho do mapa e a projeção geográfica a ser usada (mais sobre isso depois), definir um elemento SVG, anexá-lo ao DOM e carregar os dados do mapa usando JSON. O estilo do mapa é feito via CSS.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>Dados geográficos para D3
Para este tutorial D3.js, lembre-se de que a construção de mapas funciona melhor com dados formatados em formatos JSON, principalmente as especificações GeoJSON e TopoJSON.
GeoJSON é “um formato para codificar uma variedade de estruturas de dados geográficos”. Ele é projetado para representar objetos de geometria discreta agrupados em coleções de recursos de pares nome/valor.
TopoJSON é uma extensão do GeoJSON, que pode codificar a topologia onde as geometrias são “costuradas a partir de segmentos de linha compartilhados chamados arcos”. O TopoJSON elimina a redundância armazenando informações relacionais entre recursos geográficos, não apenas informações espaciais. Como resultado, a geometria é muito mais compacta e combinada onde as geometrias compartilham recursos. Isso resulta em um arquivo TopoJSON típico 80% menor do que seu equivalente GeoJSON.
Assim, por exemplo, dado um mapa com vários países fazendo fronteira entre si, as partes compartilhadas das fronteiras serão armazenadas duas vezes no GeoJSON, uma vez para cada país em cada lado da fronteira. No TopoJSON, será apenas uma linha.
Bibliotecas de mapas: Google Maps e Leaflet.js
Hoje, as bibliotecas de mapeamento mais populares são o Google Maps e o Leaflet. Eles são projetados para obter “mapas escorregadios” na web de forma rápida e fácil. “Mapas Slippy” é um termo que se refere a mapas da Web modernos baseados em JavaScript que permitem zoom e panorâmica ao redor do mapa.
O Leaflet é uma ótima alternativa ao Google Maps. É uma biblioteca JavaScript de código aberto projetada para criar mapas interativos compatíveis com dispositivos móveis, com simplicidade, desempenho e usabilidade em mente. O Leaflet está no seu melhor quando aproveita a grande seleção de mapas baseados em raster disponíveis na Internet e traz a simplicidade de trabalhar com mapas lado a lado e seus recursos de apresentação.
O Leaflet pode ser usado com grande sucesso quando combinado com os recursos de manipulação de dados do D3.js e para utilizar o D3.js para gráficos vetoriais. Combiná-los traz o melhor em ambas as bibliotecas.
O Google Maps é mais difícil de combinar com o D3.js, pois o Google Maps não é de código aberto. É possível usar o Google Maps e o D3 juntos, mas isso se limita principalmente à sobreposição de dados com D3.js sobre mapas de fundo do Google Maps. Uma integração mais profunda não é realmente possível, sem hacking.
Projeções - Além da Esférica Mercator
A questão de como projetar mapas da Terra esférica tridimensional em superfícies bidimensionais é um problema antigo e complexo. Escolher a melhor projeção para um mapa é uma decisão importante a ser tomada para cada mapa da web.
Em nosso tutorial D3.js de mapa-múndi simples acima, usamos o sistema de coordenadas de projeção Spherical Mercator chamando d3.geo.mercator() . Essa projeção também é conhecida como Web Mercator. Essa projeção foi popularizada pelo Google quando eles introduziram o Google Maps. Mais tarde, outros web services também adotaram a projeção, como OpenStreetMap, Bing Maps, Here Maps e MapQuest. Isso tornou o Spherical Mercator uma projeção muito popular para mapas deslizantes online.
Todas as bibliotecas de mapeamento suportam a projeção Spherical Mercator pronta para uso. Se você quiser usar outras projeções, precisará usar, por exemplo, a biblioteca Proj4js, que pode fazer qualquer transformação de um sistema de coordenadas para outro. No caso do Leaflet, existe um plugin Proj4Leaflet. No caso do Google Maps, não há nada.
O D3.js eleva as projeções cartográficas a um nível totalmente novo com suporte integrado para muitas projeções geográficas diferentes. D3.js modela projeções geográficas como transformações geométricas completas, o que significa que quando linhas retas são projetadas em curvas, D3.js aplica reamostragem adaptativa configurável para subdividir linhas e eliminar artefatos de projeção. O plug-in Extended Geographic Projections D3 traz o número de projeções suportadas para mais de 40. É até possível criar uma nova projeção personalizada usando d3.geo.projection e d3.geo.projectionMutator .
Mapas Raster
Como mencionado anteriormente, um dos principais pontos fortes do D3.js é trabalhar com dados vetoriais. Para usar dados raster existe a opção de combinar D3.js com Leaflet. Mas também existe a opção de fazer tudo com apenas D3.js usando d3.geo.tile para criar mapas escorregadios. Mesmo com apenas o D3.js, as pessoas estão fazendo coisas incríveis com mapas raster.
Manipulação de vetores em tempo real
Um dos maiores desafios da cartografia clássica é a generalização de mapas. Você deseja ter o máximo de geometria detalhada possível, mas esses dados precisam se adaptar à escala do mapa exibido. Ter uma resolução de dados muito alta aumenta o tempo de download e diminui a renderização, enquanto uma resolução muito baixa arruína detalhes e relações topológicas. Mapas escorregadios usando dados vetoriais podem se deparar com um grande problema com a generalização do mapa.
Uma opção é fazer a generalização do mapa de antemão: ter diferentes conjuntos de dados em diferentes resoluções e, em seguida, exibir o conjunto de dados apropriado para a escala selecionada atualmente. Mas isso multiplica conjuntos de dados, complica a manutenção de dados e é propenso a erros. No entanto, a maioria das bibliotecas de mapeamento está limitada a essa opção.
A melhor solução é fazer a generalização do mapa em tempo real. E aqui vem o D3.js novamente, com seus poderosos recursos de manipulação de dados. O D3.js permite que a simplificação de linhas seja feita no navegador.
Eu quero mais!
D3.js não é fácil de dominar e tem uma curva de aprendizado íngreme. É necessário estar familiarizado com muitas tecnologias, nomeadamente objectos JavaScript, a sintaxe de encadeamento jQuery, SVG e CSS e, claro, a API do D3. Além disso, é preciso ter um pouco de habilidade de design para criar bons gráficos no final. Felizmente, o D3.js tem uma grande comunidade e há muitos recursos para as pessoas explorarem. Um ótimo ponto de partida para aprender D3 são esses tutoriais.
Se você gosta de aprender examinando exemplos, Mike Bostock compartilhou mais de 600 exemplos de D3.js em sua página da web. Todos os exemplos de D3.js têm repositório git para controle de versão e são bifurcados, clonáveis e comentáveis.
Se você estiver usando o CartoDB, ficará feliz em saber que o CartoDB torna os mapas D3 muito fáceis.
E para um pequeno bônus no final, aqui está um dos meus exemplos favoritos mostrando as coisas incríveis que o D3 é capaz:
- earth, um mapa de vento 3D global animado de todo o mundo feito com D3.js. A Terra é uma visualização das condições climáticas globais, com base em previsões meteorológicas feitas por supercomputadores nos Centros Nacionais de Previsão Ambiental, NOAA / Serviço Nacional de Meteorologia e convertidas para JSON. Você pode personalizar os dados exibidos, como alturas para as leituras de velocidade do vento, alterar dados sobrepostos e até alterar a projeção da Terra.