¿Qué es D3.js?

D3.js (Data-Driven Documents) o solamente D3, es una librería de Javascript utilizada principalmente para crear gráficos y visualizaciones interactivas en un sitio web. Esta herramienta de visualización de datos hace uso principalmente de: gráficos vectoriales (SVG), Javascript, HTML5 y CSS3. D3.js permite usar grandes cantidades de datos en distintos formatos: JSON, CSV, GeoJSON, etc.  Además de todo esto, D3.js nos permite poder crear mapas vectoriales con los cuales podemos crear grandes visualizaciones. Nos enfocaremos principalmente en la creación de mapas. Acá les dejo un ejemplo: http://www.carbonmap.org, es un mapa interactivo que usa D3.js y fue creado por el equipo de Kiln para el Apps for climate organizado por el World Bank. En este mapa Kiln uso Cartogram y Choropleth map para darle la interacción y distribución necesaria de los datos. Ahora, como comenzamos a hacer mapas con D3.js, en el siguiente tutorial de Mike Bostock, creador de D3.js explica paso a paso como poder crear los mapas  (No lo escribo pues el maestro ya lo hizo). Eso si, es un poco complicado para el que aun no ha visto la librería, pero ¿existe alguna manera de agilizar y hacer más sencillo este trabajo?. Si, la hay.

Mapstarter

Mapstarter es una herramienta online que permite personalizar y crear mapas vectoriales para la web (obviamente con D3.js). Esta herramienta permite que cualquier diseñador, reporteros o desarrolladores puedan crear sus propios mapas vectoriales. Para usar esta herramienta es necesario tener datos geograficos en formatos GeoJSON, TopoJSON o ShapeFiles. Si no los tienes puedes usar GeoCommons o Diva-Gis. Lo primero es subir los datos geográficos. Luego de eso, tendremos la siguiente vista: Nos muestra la vista previa de los datos subidos y podremos personalizar el tamaño de nuestro mapa, y la proyección cartográfica que es la representación gráfica del mapa entre la superficie curva y plana de la tierra.  Lo siguiente sera seleccionar el color para nuestro mapa. Acá podremos seleccionar los colores base para nuestro mapa, existen dos opciones: Simple colors, nos permite seleccionar un color base para los países y bordes; y Choropleth, que hace una distribución de una gama de colores según alguna variación numérica (población por país, indices, emisiones de carbono, etc), convirtiéndolo así en un mapa temático. Lo siguiente sera configurar el comportamiento del mapa.   Con los comportamiento podremos definir la funcionalidad principal de nuestro mapa. Mapstarer nos pone 3 opciones para poder seleccionar: Freeform, que permite poder usar el scroll del mouse, doble click y dragear sobre el mapa. Es una funcionalidad muy útil si queremos que nuestros usuarios naveguen sobre nuestro mapa. Click on feature to zoom, activa la funcionalidad de hacer click sobre algún polígono (país) y nos hará un zoom. Y finalmente tenemos la opción de no agregar ninguna funcionalidad: None.  La siguiente opción nos permitira darle un vistazo a los datos y revisar que estén bien, modificarlos y/o removerlos.   Nunca esta de más darle una última revisada a los datos. Y finalmente podremos descargar nuestro proyecto de Mapstarer. En esta sección podremos descargar nuestro proyecto en vectores (SVG), imagen (PNG) o el código fuente de la aplicación (HTML, GeoJSON o TopoJSON) que sería la forma de poder agregarle más funcionalidades y agregar datos.

Hands on.

En ODPE – Open Data Perú, estuvimos haciendo un ejercicio con mapas de D3.js para mostrar las emergencias climáticas en la última década. Tenemos disponible parte del código fuente de la aplicación (aún esta en trabajo), pero la dejamos en nuestro repositorio por si alguien quiere ayudar a contribuir y de paso practicar. Hemos incluido las siguiente funcionalidades en código: Consumo de datos desde CSV, Chroropleth, bubbles.   Espero que este post sea de su total interés, si alguno tiene en mente poder hacer prototipos de mapa más rápidos y más sencillo les recomiendo poder usar otra herramienta como CartoDB, Mapbox, Datawrapper, etc. ENJOY!