Estás navegando por el archivo de D3.js.

Data Wrapper: visualización básica para periodismo

- el septiembre 15, 2016 en Experiencias, Fuentes de datos, Guest posts

Este post ha sido modificado debido al cambio de políticas de uso de Datawrapper.de acerca de los servicios gratuitos.

La inclusión de datos en artículos, noticias y reportajes es algo frecuente en los medios; los datos aumentan la credibilidad, contextualizan y resuelven dudas de los lectores; sin embargo, su visualización no siempre es sencilla y en algunos casos se puede caer en el uso de estos gráficos como simples elementos decorativos.

D3.js y otras bibliotecas de javascript son geniales para crear gráficos y visualizaciones interactivas, pero pueden ser complicadas de usar en una sala de redacción porque requieren conocimientos de codificación y por otra parte, no siempre tenemos la opción de contar con un(a) desarrollador(a) o un(a) diseñador(a) en nuestro equipo de trabajo.

Entonces debemos sortear nuestras propias limitaciones y buscar una herramienta que nos permita entender el uso necesario y pertinente de las gráficas y mapas, sin que éstas tengan un alto nivel de complejidad.

Aquí es donde puedes recurrir a Datawrapper, una plataforma de código abierto enfocada especialmente al periodismo para para cargar datos, crear visualizaciones y mejorar los artículos escritos a partir de cuatro pasos sencillos.

Crea una cuenta en la plataforma, y ten listo, limpio y a mano tu set de datos.

 

1r

 

 

 

Subir datos

Una vez que tengas seleccionado tu dataset, empieza por crear un nuevo gráfico; también puedes usar los datasets de prueba de la herramienta que son útiles porque combinan los datos de ejemplo con los tipos óptimos de gráficas de la herramienta.

En mi caso, uso de ejemplo el dataset de Ingresos y Gastos de Universidades Públicas de Bolivia de “Que no te la charlen” para saber qué universidades reportaron mayores ingresos y gastos durante el 2014; la herramienta te permite copiar los datos de tu hoja de cálculo o importarlos como csv.

2r

 

 

 

Revisar & Describir

Acá debes asegurarte que la herramienta interpreta tus datos correctamente: en la tabla de columnas de números se deben mostrar en azul, las fechas en verde y los textos en negro.

También te permite empezar a personalizar tus columnas desde trasponer la tabla de datos, añadir otras columnas a mano e incluso cambiar los formatos de número, como dividir los números por miles, millones o miles de millones.

3r

 

 

 

 

Visualizar

En esta etapa, verás todas las opciones para la visualización: puedes escoger entre 12 tipos de gráficos para ver cómo los datos se ve como en diferentes tablas.

Un punto a favor para la herramienta es que si requieres hacer correcciones en los pasos anteriores para que tus gráficos tengan más sentido, puedes regresar al paso previo; si tienes dudas de qué gráfico escoger, puedes ver esta guía.

Yo seleccioné el tipo de gráfica de barras de división o split bars, y ajusté el tamaño; luego puedes seguir refinando tu gráfico a partir de la personalización de ejes, etiquetas y grupos, la clasificación del orden de tus datos o la apariencia y colores de tu tabla.

Luego anota el título, las descripciones y fuentes de tu gráfica.

4r

 

 

 

 

Publicar & Incrustar

Finalmente, aunque en diciembre de 2014 Datawrapper cambió sus directivas acerca de los productos gratuitos; recientemente hizo una nueva modificación devolviendo la posibilidad a los usuarios de generar un código responsivo o un iFrame para embeber tu gráfico en tu sitio web o blog, y que adicionalmente tenga interactividad.

 

copy-of-5to-post-visualizacion-basica-para-periodismo

 

 

 

 

Puedes ver que elaborar una visualización con esta herramienta es muy sencillo, la herramienta ofrece múltiples opciones de personalización, es una buena manera para aprender el por qué y el para qué de tus visualizaciones sin mayor complicación sobre todo cuando estás empezando, y añade el valor de la interactividad de las visualizaciones para que tus lectores también puedan generar sus propias conclusiones a partir de tu reportaje.

 

Mapas y D3.js

- el diciembre 15, 2014 en Tutoriales


Este post va dirigido especialmente a desarrolladores, diseñadores y/o cualquier curioso que conozca o quiera incursionar en el mundo de la programación. Hablaremos principalmente de D3.js, libreria basada en Javascript para la creación de gráficos y mapas interactivos.

¿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.orges 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 CartogramChoropleth map para darle la interacción y distribución necesaria de los datos. ms2 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 GeoCommonsDiva-Gis. Lo primero es subir los datos geográficos. Luego de eso, tendremos la siguiente vista: ms1Nos 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. Mapstarter 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. Mapstarter2   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. Mapstarter3   Nunca esta de más darle una última revisada a los datos. Y finalmente podremos descargar nuestro proyecto de Mapstarer. Mapstarter4En 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. localhost 8383 MapsClima index.html   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!