Iniciación a D3: Creando un mapa sencillo

por

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 otro artículo de este blogr, D3 es una de las mejores librerías JavaScript para crear mapas web.

¿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».

http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71

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.

<! DOCTYPE html>
<charset meta = "UTF-8">

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

<style>
 path {
   stroke: white;
   stroke-width: 0.25px;
   fill: grey;
 }
</style>

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

<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

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

var width = 1000,
    height = 500;

Configuración de la vista

var projection = d3.geo.mercator()
    .center([0, 50 ])
    .scale(100)
    .rotate([0,0]);

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:

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

var path = d3.geo.path()
    .projection(projection);

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.

var g = svg.append ("g");

El último bloque de JavaScript dibuja el mapa:

d3.json("world-110m.json", function(error, topology) {
   g.selectAll("path") 
     .data(topojson.object(topology, topology.objects.countries) 
  .geometries) 
  .enter() 
     .append("path") 
     .attr("d", path) 
});

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

g.selectAll ("path").

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

.data (topojson.object (topología, topology.objects.countries)
 .geometries)

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

.enter ()

Luego añadimos que los datos como elementos path:

.append ("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:

<! DOCTYPE html>
<charset meta = "UTF-8">
<!-- Definición del estilo -->
<style>
path {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}
</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v7.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<!-- Creación del mapa -->
<script>
	// tamaño del mapa
	var width = 1000,
		height = 600;
 
	// Ajustes de proyección para mercator    
	var projection = d3.geo.mercator()
      // centro del mapa en grados
      .center([0, 50])
      // zoomlevel
      .scale(100)
      // map-rotation
      .rotate([0,0]);
	  
	// Definimos "svg" como tipo de datos
	var svg = d3.select("body").append("svg")
		.attr("width", width)
		.attr("height", height);
 
	// definimos el "path" como as return of geographic features
	var path = d3.geo.path()
		.projection(projection);
	  
	//agrupa las capas svg
	var g = svg.append ("g");
	  
	// Carga de datos y visualización del mapa en el canvas
  
	d3.json("world-110m.json", function(error, topology) {
		g.selectAll("path")
			.data(topojson.object(topology, topology.objects.countries)
			.geometries)
		.enter()
			.append("path")
			.attr("d", path)
	});

</script>
</body>
</html>

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 «Iniciación a D3: Creando un mapa sencillo»

Los comentarios están cerrados.