Este documento presenta una introducción a la visualización de datos. Explica por qué la visualización es importante debido al rápido ritmo de vida y la gran cantidad de datos disponibles. Luego describe algunos proyectos de visualización en los que el autor ha participado y herramientas básicas como Google Fusion Tables e Infogr.am. Finalmente, concluye que las visualizaciones deben diseñarse para ser fáciles de entender y que herramientas más avanzadas como D3 requieren conocimientos de programación.

1. Visualización
Juan Elosua Tomé (@jjelosua)

2. Contenido
● ¿Por qué es importante la visualización?
● En mis carnes
● Herramientas básicas
● Herramientas avanzadas
● Conclusiones

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

4. 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.

5. 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.

6. 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!!

7. Ritmo de vida (III) - Imagen vs. Texto

8. 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

9. 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!!

10. 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

11. Big data (III) - Crossfilter.js

12. En mis carnes (I) - EeL
VS

13. 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.

14. 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

15. 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.

16. 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.

17. 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.

18. En mis carnes (VII) - Indultometro
VS

19. 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.

20. 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.

21. En mis carnes (X) - Indultometro
● El origen de la información es un google spreadsheet
por lo que si se añade una nueva fila automáticamente
se publica.

22. 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.

23. En mis carnes (XII) - DVMI
VS

24. 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á.

25. 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.

26. 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.

27. 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

28. 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.

29. 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.

30. Google fusion tables (III) - Mapas
● 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
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!

31. 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.

32. Infogr.am (I)
● Infogr.am es un servicio que nos permite
crear gráficos de una manera sencilla.
● Requiere registrarse

33. Infogr.am (II)
● Una vez hacemos login podemos:
○ Crear una nueva visualización
○ Explorar nuestra librería de visualizaciones creadas.

34. Infogr.am (III)
● Seleccionamos el gráfico deseado

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

36. 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.

37. 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.
2.
3.
4.
5.
Descargar la información del INE
Limpiar la información (Excel)
Importar los datos en fusion tables
Combinar con los perímetros de provincias
Dar estilo a nuestro mapa.

38. 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.
2.
3.
4.
5.
Descargar la información del INE
Crear un gráfico de evolución en infogr.am
Copiar y pegar los datos en infogr.am
Incorporar textos
Dar estilo a nuestro gráfico

39. Herramientas avanzadas (I)

40. 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.

41. 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.

42. 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.

43. 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.

44. 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

45. 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.

46. ¡¡Gracias!!
¿Dudas o preguntas?
Juan Elosua Tomé
Twitter: @jjelosua