Your SlideShare is downloading. ×
0
Visualización
Juan Elosua Tomé (@jjelosua)
Contenido
● ¿Por qué es importante la visualización?
● En mis carnes
● Herramientas básicas
● Herramientas avanzadas
● Con...
¿Quién soy?
Juan Elosua Tomé (Twitter: @jjelosua)
● Ingeniero de Telecomunicaciones que trabaja como
desarrollador freelan...
Introducción (I)
● La visualización de datos es un campo en
continuo crecimiento en los últimos años.
Este auge se debe a ...
Ritmo de vida (I) - Piramide info.
● La visualización es una potente herramienta
para ayudar al lector a avanzar más rápid...
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.
○ ...
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á...
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 cinc...
Big data (II)
● La visualización se transforma de un
capricho para que quede bonito en una
auténtica necesidad para poder ...
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.
● Cont...
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
proyec...
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 "visit...
En mis carnes (V) - EeL

Posteriormente se puede crear una opción de
exploración para que sea el lector el que
busque la i...
En mis carnes (VI) - EeL
Lecciones aprendidas:
● Es importante dar una visita guiada al lector
para paliar el shock de sen...
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
in...
En mis carnes (IX) - Indultometro
● Voy a destacar en este caso una libreria
llamada Timeline.js
○ permite tender un puent...
En mis carnes (X) - Indultometro
● El origen de la información es un google spreadsheet
por lo que si se añade una nueva f...
En mis carnes (XI) - Indultometro
Lecciones aprendidas:
● Existen librerías que permiten una
colaboración entre perfiles t...
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...
En mis carnes (XIV) - DVMI
● Es posible generar visualizaciones
altamente interactivas que permitan al lector
tener una vi...
En mis carnes (XV) - DVMI
Lecciones aprendidas:
● Las librerías interactivas permiten generar
visualizaciones coordinadas ...
Herramientas básicas (I)
● Otro de los indicios de que la visualización
es un campo en auge es la proliferación de
librerí...
Google fusion tables (I)
● Permite visualizar los datos de una forma sencilla.
● Existen varios tipos de visualizaciones:
...
Google fusion tables (II) - Mapas
● Para crear un mapa tenemos que tener una forma de
identificar la localización de nuest...
Google fusion tables (III) - Mapas
● Enlaces a tablas auxiliares de perímetros de España.
○ CCAAs: Comunidades Autónomas E...
Google fusion tables (IV) - Mapas
● Una vez tenemos la localización en nuestros datos
podremos crear un mapa:
○ Si la loca...
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 visualizaci...
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 ...
Infogr.am (V)
● Una vez finalizado nuestro gráfico podemos
compartirlo:
○ En redes sociales, verlo en la web de infogr.am ...
Demo GFT (I) - EPA INE
● Veamos como podemos crear un mapa de
intensidad en google fusion tables.
● Objetivo: Mostrar un m...
Demo Infogr.am (I) - EPA INE
● Veamos como podemos crear una gráfica
de evolucion en infogr.am
● Objetivo: Comparar los da...
Herramientas avanzadas (I)
Herramientas avanzadas (II)
● Para utilizar la mayoría de estas librerias se
requiere conocimientos de programación:
○ HTM...
Conclusiones (I) - Visualización
● En los tiempos que vivimos de ritmo de vida
y gran cantidad de información la
visualiza...
Conclusiones (II) - Visualización
● Debemos diseñar nuestros proyectos para
alcanzar los objetivos propuestos:
○ Data Visu...
Conclusiones (III) - Fusion Tables
● Una herramienta web que permite importar, visualizar,
combinar, compartir y publicar ...
Conclusiones (IV) - Infogr.am
● Ventajas
○ Nos permite crear gráficos de forma sencilla.
○ Nos da información sobre el for...
Conclusiones (V) - D3
● Ventajas de D3:
○ Permite hacer cualquier tipo de visualización.
○ Es una librería bien documentad...
¡¡Gracias!!
¿Dudas o preguntas?
Juan Elosua Tomé
Twitter: @jjelosua
Upcoming SlideShare
Loading in...5
×

Curso de Verano "Datos y Gobierno Abierto" Juan Elosua

129

Published on

Ponencia de Juan Elosua dentro del curso de verano "Datos y gobierno Abierto" organizado por la iniciativa Aragón Open Data de la Dirección General de Nuevas Tecnologías del Gobierno de Aragón.

La ponencia se celebró dentro de los cursos de verano de la Universidad de Zaragoza, en Jaca, del 10 al 12 de Julio de 2013 y se titula "Nuevos modos de visualización de datos para permitir su comprensión"

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
129
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Curso de Verano "Datos y Gobierno Abierto" Juan Elosua"

  1. 1. Visualización Juan Elosua Tomé (@jjelosua)
  2. 2. Contenido ● ¿Por qué es importante la visualización? ● En mis carnes ● Herramientas básicas ● Herramientas avanzadas ● Conclusiones
  3. 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. 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. 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. 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. 7. Ritmo de vida (III) - Imagen vs. Texto
  8. 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. 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. 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. 11. Big data (III) - Crossfilter.js
  12. 12. En mis carnes (I) - EeL VS
  13. 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. 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. 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. 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. 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. 18. En mis carnes (VII) - Indultometro VS
  19. 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. 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. 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. 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. 23. En mis carnes (XII) - DVMI VS
  24. 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. 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. 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. 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. 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. 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. 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. 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. 32. Infogr.am (I) ● Infogr.am es un servicio que nos permite crear gráficos de una manera sencilla. ● Requiere registrarse
  33. 33. Infogr.am (II) ● Una vez hacemos login podemos: ○ Crear una nueva visualización ○ Explorar nuestra librería de visualizaciones creadas.
  34. 34. Infogr.am (III) ● Seleccionamos el gráfico deseado
  35. 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. 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. 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. 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. 39. Herramientas avanzadas (I)
  40. 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. 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. 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. 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. 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. 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. 46. ¡¡Gracias!! ¿Dudas o preguntas? Juan Elosua Tomé Twitter: @jjelosua
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×