Creando un mapa sencillo con D3

En este tutorial vamos a crear un mapa web sencillo que muestre los países del mundo con la librería  JavaScript D3.js. Como hemos visto en una entrada anterior, D3 es una de las mejores APIs JavaScript para webmapping.

¿Qué es D3?

D3 es una librería JavaScript creada por Mike Bostock que sirve para visualizar datos con los estándares Web. ¿Qué significa esto? Significa que visualizamos los datos sin introducir una nueva forma de representar una imagen, sino que D3 utiliza los estándares existentes, como son HTML, CSS y SVG.

Este enfoque ofrece varios beneficios:

  • Mayor expresividad y modernas visualizaciones.
  • Compatibilidad con las herramientas y tecnologías existentes, como CSS y depuradores.
  • Los mapas resultado se representan como svg (o canvas), por lo que no es necesario un framework adicional, como puede ser OpenLayers o Leaflet.

Este tutorial es una parte del libro D3 Tips and Tricks (lee el artículo completo).

Comenzando con un mapa sencillo

En primer lugar creamos una nueva carpeta llamada «D3_webmap».

Dentro de esta carpeta crearemos  un nuevo archivo al que denominaremos «index.html».

Nos descargamos la capa de países del mundo (world-110m.json) en formato TopoJson. Aquí tienes un par de capas más en formato TopoJson.

Escribiendo código

Con las dos primeras líneas de código configuramos nuestro HTML5.

A continuación definimos  el estilo CSS para nuestra capa de países (borde blanco de grosor 0.25 px y relleno gris)

El siguiente bloque de código carga los archivos JavaScript. En este caso d3 y topojson.

A continuación definimos el tamaño de nuestro mapa.

Configuración de la vista

La proyección es la forma en que el sistema de coordenadas geográficas se ajusta para mostrar los datos en nuestra pantalla plana.

Luego definimos tres aspectos de la proyección: centro, escala y rotación.

Centro

Si se especifica el centro, esto establece el centro de la proyección a la ubicación especificada: longitud y latitud en grados. Si  no se especifica el centro el valor por defecto que se utiliza será (0 °, 0 °).

En este ejemplo utilizamos [0, 50] ‘0’ para situar la longitud en el medio y 50 grados al norte del ecuador (valores positivos en el hemisferio Norte y valores negativos para hemisferio Sur).

Escala

Si se especifica escala, esto establece el factor de escala de la proyección en el valor especificado.

Nuestra mapa actual utiliza una escala de 100.

Si no se especifica la escala, devuelve el factor de escala actual que por defecto es 150. Es importante señalar que los factores de escala no son coherentes en las proyecciones.

Rotación

Si no se especifica la rotación, esto establece la rotación de tres ejes de la proyección a los ángulos especificados para la longitud, latitud y balanceo en grados y devuelve la proyección.

Si no se especifica la rotación, que establece los valores a [0, 0, 0]. Si la rotación especificada tiene sólo dos valores, en lugar de tres, el balanceo se supone que es 0°.

El siguiente bloque de código fija nuestra ventana svg:

La siguiente porción de código crea un nuevo generador de ruta geográfica:

El generador de ruta (d3.geo.path ()) se utiliza para especificar un tipo de proyección (.projection) que se definió anteriormente como una proyección de Mercator a través de la variable projection.

Entonces declaramos la variable g como svg adjunto.

El último bloque de JavaScript dibuja el mapa:

Con la primera línea cargamos el archivo TopoJSON con las coordenadas de nuestro mapa del mundo (world-110m.json).

Luego declaramos que vamos a actuar en todos los elementos path en el gráfico

Entonces sacamos los datos que definen los países del archivo TopoJSON

Y los añadimos los datos que vamos a visualizar:

Luego añadimos que los datos como elementos path:

El último bloque html cierra nuestras etiquetas y ya tenemos el mapa.

D3_map

Ojo! Para cargar datos externos, como es el caso, necesitamos un servidor web como Apache, jetty, etc y debemos acceder a través de http:\\…

 Aquí tenemos el código completo:

Un código similar lo puedes encontrar en World Map Centered on the Pacific, en bl.ocks.org.

Algunas referencias y workshops:

D3 Workshop: http://bost.ocks.org/mike/d3/workshop/#0

D3 Tips and Tricks: https://leanpub.com/D3-Tips-and-Tricks. Más de 580 páginas de consejos y trucos para utilizar d3.js, una de las principales herramientas de visualización de datos para la web. Incluye más de 50 ejemplos de código para descargar.

4 comentarios en “Creando un mapa sencillo con D3”

Los comentarios están cerrados.