Un mapa a la perfección: uso de D3.js para crear hermosos mapas web
Publicado: 2022-03-11Data Driven Documents, o D3.js, es "una biblioteca de JavaScript para manipular documentos basados en datos". O para decirlo de manera más simple, D3.js es una biblioteca de visualización de datos. Fue desarrollado por Mike Bostock con la idea de cerrar la brecha entre la visualización estática de datos y las visualizaciones de datos interactivas y animadas.
D3 es una biblioteca poderosa con un montón de usos. En este tutorial, hablaré sobre una aplicación particularmente convincente de D3: la creación de mapas. Abordaremos los desafíos comunes de crear un mapa web útil e informativo, y mostraremos cómo, en cada caso, D3.js brinda a los desarrolladores de JavaScript capacitados todo lo que necesitan para hacer que los mapas se vean y se sientan hermosos.
¿Para qué se utiliza D3.js?
D3.js puede vincular cualquier dato arbitrario a un modelo de objeto de documento (DOM) y luego, mediante el uso de JavaScript, CSS, HTML y SVG, aplicar transformaciones al documento que son impulsados por esos datos. El resultado puede ser una salida HTML simple o gráficos SVG interactivos con un comportamiento dinámico como animaciones, transiciones e interacción. Todas las transformaciones y representaciones de datos se realizan del lado del cliente, en el navegador.
En su forma más simple, D3.js se puede usar para manipular un DOM. Aquí hay un ejemplo simple donde se usa D3.js para agregar un elemento de párrafo a un cuerpo de documento vacío, con el texto "Hola mundo":
<!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>Sin embargo, la fuerza de D3.js está en su capacidad de visualización de datos. Por ejemplo, se puede utilizar para crear gráficos. Se puede utilizar para crear gráficos animados. Incluso se puede utilizar para integrar y animar diferentes gráficos conectados.
D3 para mapas web y visualización de datos geográficos
Pero D3.js se puede usar para mucho más que solo la manipulación de DOM o para dibujar gráficos. D3.js es extremadamente poderoso cuando se trata de manejar información geográfica. Manipular y presentar datos geográficos puede ser muy complicado, pero construir un mapa con un D3.js es bastante simple.
Aquí hay un ejemplo de D3.js que dibujará un mapa mundial basado en los datos almacenados en un formato de datos compatible con JSON. Solo necesita definir el tamaño del mapa y la proyección geográfica a usar (más sobre eso más adelante), definir un elemento SVG, agregarlo al DOM y cargar los datos del mapa usando JSON. El estilo del mapa se realiza a través de 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>Datos geográficos para D3
Para este tutorial de D3.js, tenga en cuenta que la creación de mapas funciona mejor con datos en formato JSON, en particular las especificaciones GeoJSON y TopoJSON.
GeoJSON es "un formato para codificar una variedad de estructuras de datos geográficos". Está diseñado para representar objetos de geometría discretos agrupados en colecciones de características de pares de nombre/valor.
TopoJSON es una extensión de GeoJSON, que puede codificar una topología en la que las geometrías se "unen a partir de segmentos de línea compartidos llamados arcos". TopoJSON elimina la redundancia al almacenar información relacional entre características geográficas, no solo información espacial. Como resultado, la geometría es mucho más compacta y combinada donde las geometrías comparten características. Esto da como resultado un archivo TopoJSON típico un 80 % más pequeño que su equivalente GeoJSON.
Entonces, por ejemplo, dado un mapa con varios países que limitan entre sí, las partes compartidas de las fronteras se almacenarán dos veces en GeoJSON, una para cada país a cada lado de la frontera. En TopoJSON, será solo una línea.
Bibliotecas de mapas: Google Maps y Leaflet.js
Hoy en día, las bibliotecas de mapas más populares son Google Maps y Leaflet. Están diseñados para obtener "mapas resbaladizos" en la web de forma rápida y sencilla. “Mapas resbaladizos” es un término que se refiere a los mapas web modernos basados en JavaScript que permiten hacer zoom y desplazarse por el mapa.
Leaflet es una gran alternativa a Google Maps. Es una biblioteca JavaScript de código abierto diseñada para crear mapas interactivos aptos para dispositivos móviles, teniendo en cuenta la simplicidad, el rendimiento y la facilidad de uso. Leaflet funciona mejor cuando aprovecha la gran selección de mapas basados en ráster que están disponibles en Internet y brinda la simplicidad de trabajar con mapas en mosaico y sus capacidades de presentación.
Leaflet se puede utilizar con gran éxito cuando se combina con las funciones de manipulación de datos de D3.js y para utilizar D3.js para gráficos basados en vectores. Combinarlos juntos saca lo mejor de ambas bibliotecas.
Google Maps es más difícil de combinar con D3.js, ya que Google Maps no es de código abierto. Es posible usar Google Maps y D3 juntos, pero esto se limita principalmente a la superposición de datos con D3.js sobre los mapas de fondo de Google Maps. Una integración más profunda no es realmente posible sin hackear.
Proyecciones - Más allá de Mercator esférico
La cuestión de cómo proyectar mapas de la Tierra esférica tridimensional en superficies bidimensionales es un problema antiguo y complejo. Elegir la mejor proyección para un mapa es una decisión importante para cada mapa web.
En nuestro sencillo tutorial de mapa mundial D3.js anterior, usamos el sistema de coordenadas de proyección Spherical Mercator llamando a d3.geo.mercator() . Esta proyección también se conoce como Web Mercator. Esta proyección fue popularizada por Google cuando introdujeron Google Maps. Más tarde, otros servicios web también adoptaron la proyección, a saber, OpenStreetMap, Bing Maps, Here Maps y MapQuest. Esto ha convertido a Spherical Mercator en una proyección muy popular para los mapas deslizantes en línea.
Todas las bibliotecas de mapas admiten la proyección esférica de Mercator desde el primer momento. Si desea utilizar otras proyecciones, deberá utilizar, por ejemplo, la biblioteca Proj4js, que puede realizar cualquier transformación de un sistema de coordenadas a otro. En el caso de Leaflet, hay un complemento Proj4Leaflet. En el caso de Google Maps, no hay, bueno, nada.
D3.js lleva las proyecciones cartográficas a un nivel completamente nuevo con soporte integrado para muchas proyecciones geográficas diferentes. D3.js modela las proyecciones geográficas como transformaciones geométricas completas, lo que significa que cuando las líneas rectas se proyectan en curvas, D3.js aplica un remuestreo adaptable configurable para subdividir las líneas y eliminar los artefactos de proyección. El complemento Extended Geographic Projections D3 eleva la cantidad de proyecciones compatibles a más de 40. Incluso es posible crear una proyección personalizada completamente nueva usando d3.geo.projection y d3.geo.projectionMutator .
Mapas ráster
Como se mencionó anteriormente, una de las principales fortalezas de D3.js es trabajar con datos vectoriales. Para usar datos ráster, hay una opción para combinar D3.js con Leaflet. Pero también hay una opción para hacer todo con solo D3.js usando d3.geo.tile para crear mapas deslizantes. Incluso con solo D3.js, la gente está haciendo cosas asombrosas con los mapas ráster.
Manipulación de vectores sobre la marcha
Uno de los mayores desafíos de la cartografía clásica es la generalización de mapas. Desea tener tanta geometría detallada como sea posible, pero esos datos deben adaptarse a la escala del mapa que se muestra. Tener una resolución de datos demasiado alta aumenta el tiempo de descarga y ralentiza el renderizado, mientras que una resolución demasiado baja arruina los detalles y las relaciones topológicas. Los mapas resbaladizos que utilizan datos vectoriales pueden tener un gran problema con la generalización de mapas.
Una opción es hacer la generalización del mapa de antemano: tener diferentes conjuntos de datos en diferentes resoluciones y luego mostrar el conjunto de datos apropiado para la escala seleccionada actual. Pero esto multiplica los conjuntos de datos, complica el mantenimiento de datos y es propenso a errores. Sin embargo, la mayoría de las bibliotecas de mapeo están limitadas a esta opción.
La mejor solución es hacer generalizaciones de mapas sobre la marcha. Y aquí viene de nuevo D3.js, con sus potentes funciones de manipulación de datos. D3.js permite realizar la simplificación de líneas en el navegador.
¡Quiero más!
D3.js no es fácil de dominar y tiene una curva de aprendizaje pronunciada. Es necesario estar familiarizado con muchas tecnologías, a saber, objetos de JavaScript, la sintaxis de encadenamiento de jQuery, SVG y CSS y, por supuesto, la API de D3. Además de eso, uno necesita tener un poco de habilidad de diseño para crear buenos gráficos al final. Afortunadamente, D3.js tiene una gran comunidad y hay muchos recursos para que las personas investiguen. Un excelente punto de partida para aprender D3 son estos tutoriales.
Si te gusta aprender examinando ejemplos, Mike Bostock ha compartido más de 600 ejemplos de D3.js en su página web. Todos los ejemplos de D3.js tienen un repositorio de git para el control de versiones y se pueden bifurcar, clonar y comentar.
Si está utilizando CartoDB, le alegrará saber que CartoDB hace que los mapas D3 sean muy sencillos.
Y como un pequeño extra al final, aquí está uno de mis ejemplos favoritos que muestra las cosas asombrosas que D3 es capaz de hacer:
- Earth, un mapa de viento 3D animado global de todo el mundo hecho con D3.js. Earth es una visualización de las condiciones climáticas globales, basada en pronósticos meteorológicos realizados por supercomputadoras en los Centros Nacionales de Predicción Ambiental, NOAA/Servicio Meteorológico Nacional y convertidos a JSON. Puede personalizar los datos que se muestran, como las alturas de las lecturas de la velocidad del viento, cambiar los datos superpuestos e incluso cambiar la proyección de la Tierra.