VisualizaciónJuan Elosua Tomé (@jjelosua)

Contenido

● ¿Por qué es importante la visualización?

● En mis carnes

● Herramientas básicas

● Herramientas avanzadas

● Conclusiones

¿Quién soy?

Juan Elosua Tomé (Twitter: @jjelosua)

● Ingeniero de Telecomunicaciones que trabaja como desarrollador freelance con experiencia en análisis y visualizaciones de datos.

Algunos proyectos en los que he colaborado:■ El indultómetro■ España en Llamas■ Donde van mis impuestos - Parte autonómica■ Infoamazonía: Ganado vs. Deforestación

Introducción (I)

● La visualización de datos es un campo en continuo crecimiento en los últimos años. Este auge se debe a dos razones principales○ Nuestro acelerado ritmo de vida.○ El aumento exponencial de los datos disponibles.

Ritmo de vida (I) - Piramide info.

● La visualización es una potente herramienta para ayudar al lector a avanzar más rápido en la pirámide de la información.

Ritmo de vida (II)

● Hoy en día le dedicamos 2 minutos a una cosa y si no nos resulta atractiva pasamos a la siguiente.○ smartphones, whatsup, redes sociales, etc.

● Aquí entra con fuerza la visualización ya que permite generar el interés del usuario de una manera mucho más directa que el texto

¡¡Una imagen vale más que mil palabras!!

Ritmo de vida (III) - Imagen vs. Texto

Ritmo de vida (IV) - Riesgos

● En ocasiones en nuestro afán de generar visualizaciones atractivas, perdemos de vista lo más importante que es ayudar al lector a entender lo que queremos transmitir.

● Una buena visualización debe entenderse de una forma fácil y no contener elementos que no aporten valor o desvíen la atención.

Data Visualization vs. Data Art

Big data (I)

● Según cálculos de IBM, el ser humano generó, desde el principio de su historia hasta el año 2003, unos cinco exabytes de información, cinco mil millones de gigabytes.

● El año pasado, generamos aproximadamente ese mismo volumen de información cada dos días.

● El próximo año, lo generaremos aproximadamente cada diez minutos!!

Big data (II)

● La visualización se transforma de un capricho para que quede bonito en una auténtica necesidad para poder comprender los datos que recibimos.

● Existe toda una categoría de herramientas de visualización para poder hacer análisis de la información.

Veamos un ejemplo

Big data (III) - Crossfilter.js

En mis carnes (I) - EeL

VS

En mis carnes (II) - EeL

● Este proyecto consistía en dar un mayor contexto al problema de los incendios en España.

● Contactamos con el ministerio para obtener información de detalle de cada uno de los incendios (EGIF) para el periodo 2001-2011

● Una vez conseguida la información se requirió de un trabajo previo de adaptación de formatos:○ Access a MySQL para análisis○ Coordenadas UTM a coordenadas geográficas.

En mis carnes (III) - EeL

● Queríamos dar la información lo más precisa posible por lo que uno de los retos de este proyecto fue generar una superficie real de cada incendio dentro del mapa

En mis carnes (IV) - EeL

Una buena práctica a la hora de visualizar una información es dar al lector una opción de "visita guiada" que ayude a comprender los puntos básicos de la visualización.

En mis carnes (V) - EeL

Posteriormente se puede crear una opción de exploración para que sea el lector el que busque la información de su interés.

En mis carnes (VI) - EeL

Lecciones aprendidas:● Es importante dar una visita guiada al lector

para paliar el shock de sentirse perdido al enfrentarse a una visualización compleja.

● Al tratar con un volumen importante de datos se debe tener en cuenta la usabilidad y el rendimiento a la hora de diseñar la visualización.

En mis carnes (VII) - Indultometro

VS

En mis carnes (VIII) - Indultometro

● Este proyecto consistía en dar un mayor contexto a la controvertida medida de los indultos en España.

● En muchas ocasiones el cómo se publica la información es tan importante como los datos en si, al tener el BOE una frecuencia diaria sin profundidad histórica no se puede comprender el alcance de la medida.

En mis carnes (IX) - Indultometro

● Voy a destacar en este caso una libreria llamada Timeline.js○ permite tender un puente entre las personas

técnicas y no técnicas a la hora de colaborar.

● El origen de la información es un google spreadsheet por lo que si se añade una nueva fila automáticamente se publica.

En mis carnes (X) - Indultometro

En mis carnes (XI) - Indultometro

Lecciones aprendidas:● Existen librerías que permiten una

colaboración entre perfiles técnicos y no técnicos para poder alimentar a una visualización.

● Si vamos a generar una gráfica auxiliar a un texto no debemos complicarla de manera excesiva, ya que necesitaremos gran parte del texto para hacerla comprensible.

En mis carnes (XII) - DVMI

VS

En mis carnes (XIII) - DVMI

● Pocas personas en España se han leído alguna vez los presupuestos generales del estado.

● De hecho muy pocas personas conocen el PIB de nuestro país o su presupuesto anual,

● Si no proveemos a los ciudadanos de formas sencillas de acceder a dicha información esto no cambiará.

En mis carnes (XIV) - DVMI

● Es posible generar visualizaciones altamente interactivas que permitan al lector tener una visión global a la vez que navegar a la parte que le resulte más interesante.

En mis carnes (XV) - DVMI

Lecciones aprendidas:● Las librerías interactivas permiten generar

visualizaciones coordinadas que mezclan los datos desde varios puntos de vista permitiendo un análisis más profundo.

● Es importante definir estándares y generar información consistente de cara a poder realizar comparaciones útiles.

Herramientas básicas (I)

● Otro de los indicios de que la visualización es un campo en auge es la proliferación de librerías y herramientas que nos permiten generar visualizaciones de una forma rápida.

● Veamos dos herramientas sencillas:○ Google Fusion Tables para mapas○ Infogr.am para gráficas

Google fusion tables (I)

● Permite visualizar los datos de una forma sencilla.● Existen varios tipos de visualizaciones:

○ Mapas: con Marcadores, de intensidad, etc.○ Gráficas básicas: Barras, Líneas, “Quesitos”.○ Gráficas interactivas: Líneas con zoom, Red.

Google fusion tables (II) - Mapas

● Para crear un mapa tenemos que tener una forma de identificar la localización de nuestros datos: ○ Añadir la latitud y longitud de los datos.○ Utilizar la geocodificación que proporciona google:

Dirección, Municipio, Provincia, CCAA o País.○ Combinar nuestros datos con otros que contengan

información geográfica.

● Enlaces a tablas auxiliares de perímetros de España.○ CCAAs: Comunidades Autónomas España simplificado 1Km

○ Provincias: Provincias España simplificado 500m

○ Municipios: Municipios España 2012 simplificados 200m

Google fusion tables (III) - Mapas

Tip: Extraídas de los mapas que proporciona el INE, a través de un proceso tedioso por lo que os recomiendo que las utilicéis en vez de tratar de crearlas de nuevo. ¡SON PÚBLICAS!

Google fusion tables (IV) - Mapas

● Una vez tenemos la localización en nuestros datos podremos crear un mapa:○ Si la localización es un punto en el mapa podremos

incluir marcadores y personalizar la información○ Si la localización forma un perímetro (KML),

entonces podremos crear un mapa de intensidad.

Infogr.am (I)

● Infogr.am es un servicio que nos permite crear gráficos de una manera sencilla.

● Requiere registrarse

Infogr.am (II)

● Una vez hacemos login podemos:○ Crear una nueva visualización○ Explorar nuestra librería de visualizaciones creadas.

Infogr.am (III)

● Seleccionamos el gráfico deseado

Infogr.am (IV)

● Infogr.am nos muestra unos datos de ejemplo con el formato que necesitamos generar para crear el gráfico deseado.

Infogr.am (V)

● Una vez finalizado nuestro gráfico podemos compartirlo:○ En redes sociales, verlo en la web de infogr.am o

"Incrustarlo" en un blog u otra página web.

Demo GFT (I) - EPA INE

● Veamos como podemos crear un mapa de intensidad en google fusion tables.

● Objetivo: Mostrar un mapa con los datos de la tasa de paro por provincias para la última EPA disponible 2013T1

1. Descargar la información del INE2. Limpiar la información (Excel)3. Importar los datos en fusion tables4. Combinar con los perímetros de provincias5. Dar estilo a nuestro mapa.

Demo Infogr.am (I) - EPA INE

● Veamos como podemos crear una gráfica de evolucion en infogr.am

● Objetivo: Comparar los datos del último trimestre de la EPA en el periodo 2005-2012 para Andalucía y Euskadi

1. Descargar la información del INE2. Crear un gráfico de evolución en infogr.am3. Copiar y pegar los datos en infogr.am4. Incorporar textos5. Dar estilo a nuestro gráfico

Herramientas avanzadas (I)

Herramientas avanzadas (II)

● Para utilizar la mayoría de estas librerias se requiere conocimientos de programación:○ HTML, Javascript, CSS, ...

● D3js.org cuyo creador mike bostock es editor de gráficos actualmente en el New York Times.○ Veamos un ejemplo

● D3 es una de las librerías más usadas para crear visualizaciones interactivas hoy día.

Conclusiones (I) - Visualización

● En los tiempos que vivimos de ritmo de vida y gran cantidad de información la visualización juega y jugará un papel principal para comprender nuestro mundo.

● Las visualizaciones interactivas permiten: ○ al lector casual obtener una visión global○ al lector más interesado analizar en profundidad

bajo su perspectiva para generar una opinión informada.

Conclusiones (II) - Visualización

● Debemos diseñar nuestros proyectos para alcanzar los objetivos propuestos:○ Data Visualization vs. Data Art○ Exploratory Analysis vs. Data publication.

● Una buena visualización debe entenderse de una forma fácil y no contener elementos que no aporten valor o desvíen la atención.

● Herramientas sencillas de visualización:○ Mapas: Google Fusion Tables, CartoDB, etc.○ Gráficas: Infogr.am, Datawrapper, etc.

Conclusiones (III) - Fusion Tables

● Una herramienta web que permite importar, visualizar, combinar, compartir y publicar tablas de datos.

● La visualización de mapas es sencilla y muy útil.

Conclusiones (IV) - Infogr.am

● Ventajas○ Nos permite crear gráficos de forma sencilla.○ Nos da información sobre el formato de los datos

necesarios para generar la gráfica de forma correcta○ Cuenta con mucha variedad de tipos de gráficas○ Permite crear infografías

● Inconvenientes○ Necesitamos pagar para poder descargar el gráfico

como imagen o hacerlo de forma privada○ Los "themes" son un poco limitados.○ La documentación es muy escasa

Conclusiones (V) - D3

● Ventajas de D3:○ Permite hacer cualquier tipo de visualización.○ Es una librería bien documentada.○ Cuenta con muchos ejemplos que usar de base.

● Inconvenientes de D3:○ Requiere conocimientos de programación○ La curva de aprendizaje es lenta○ Tienes que crear todos los elementos desde 0, para

un gráfico de barras creas los ejes, los ticks, el grid, las barras, las etiquetas, las leyendas...etc.■ NVD3 hace uso de los gráficos reutilizables

facilitando el proceso de generación de D3.

¡¡Gracias!!

¿Dudas o preguntas?

Juan Elosua ToméTwitter: @jjelosua