Storytelling &

Data Visualization

Posgrado en Data Analytics

Eli Vivas

eli@storydata.cat

Twitter @eli_vivas | @storydatabcn

IG @storydata

Infografía vs Dataviz

Definición infografía

  • Infografía

    De Infographie®, marca reg.

    1. f. Técnica de elaboración de imágenes mediante computadora.

    2. f. Imagen obtenida por infografía.

    3. f. Representación gráfica que apoya una información de prensa.

    Real Academia Española 

Storytelling and Data Visualization

Infografía

Germanwings flight-Inconsolata

Storytelling and Data Visualization

Storytelling and Data Visualization

Visualización de datos

A graphical representation of data or concepts, which is either an internal construct of the mind or an external artifact supporting decision making

 

 

 

C. Ware 2000

  •  

Storytelling and Data Visualization

Visualización de datos

Translation of raw data to a visual context

Storytelling and Data Visualization

Charles Minard, 1869

Storytelling and Data Visualization

Visualización de datos

Storytelling and Data Visualization

Visualización de datos

Storytelling and Data Visualization

Visualización de datos

¿Para qué sirve?

  • detectar patrones
  • interacción
  • explorar
  • personalizar
  • analizar en profundidad

Storytelling and Data Visualization

1.- Tipos de
Data Visualizations

Storytelling and Data Visualization

1.- Tipos de
Data Visualizations

Storytelling and Data Visualization

2. Color (existe otro código, y no es un lenguaje de programación)

Storytelling and Data Visualization

  • No más de 7 colores en un chart
  • El gris, tu mejor amigo
  • Usa colores intuitivos (pero huye de los estereotipos Men-Women)
  • Usa paletas de colores; funcioan

 

2. USO DEL COLOR

Storytelling and Data Visualization

Infographics and Data Visualization

2. USO DEL COLOR

3. Resalta lo importante

(quieres explicarlo todo, pero no satures al personal)

Storytelling and Data Visualization

Storytelling and Data Visualization

2 4 3 5 6 4 3 7 6 5 3

4 3 4 5 4 1 3 2 8 9 7

5 4 6 7 2 1 5 0 6 5 4

2 6 7 8 9  3 1 2 4 0 1

5 3 4 0 9 2 5 4 7 7 2

5 4 1 1 2 0 9 0 9 5 6

2 4 3 5 6 4 3 7 6 5 3

4 3 4 5 4 1 3 2 8 9 7

5 4 6 7 2 1 5 0 6 5 4

2 6 7 8 9  3 1 2 4 0 1

5 3 4 0 9 2 5 4 7 7 2

5 4 1 1 2 0 9 0 9 5 6

2 4 3 5 6 4 3 7 6 5 3

4 3 4 5 4 1 3 2 8 9 7

5 4 6 7 2 1 5 0 6 5 4

2 6 7 8 9  3 1 2 4 0 1

5 3 4 0 9 2 5 4 7 7 2

5 4 1 1 2 0 9 0 9 5 6

Título (descripcion del gráfico)

Subtítulo (años, medidas)

Fuente. Autor. ** Notas

3. No te olvides nada

Storytelling and Data Visualization

Awesome title

Subtitle that contextualizes

Axis text

Axis text

Axis text

Axis text

Axis text

Axis text

Axis text

Caption with the source and who created the chart. Notes if necessary

Legend text

Legend text

Legend title

Axis y title

Axis x title

Storytelling and Data Visualization

4. Añade contexto

Storytelling and Data Visualization

4. Añade contexto

Source: Google News Timeline

Miedos públicos en los medios

Swine Flu

Bird Flu

Killer Wasps

Apocalypse
2000

Storytelling and Data Visualization

5. Juega con la tipografía (pero hasta cierto punto)

  • Define UNA tipografía (o habla con el jefe de diseño)
  • Juega con los estilos para fijar LA ATENCIÓN
  • Jerarquiza la información por el tamaño

Storytelling and Data Visualization

Storytelling and Data Visualization

"Think about subway maps, which are abstracted from the complex shape of the city and are focused on the rider’s goal: to get from one place to the next"

Visualizing Data by Ben Fry

5. Haz lo complejo, simple 

Storytelling and Data Visualization

Medium Infogram

5. Haz lo complejo, simple 

6. Alinea todo con todo

(y ordena, ordena, ordena)

Storytelling and Data Visualization

...si puedes

6. Alinea todo con todo

(y ordena, ordena, ordena)

Storytelling and Data Visualization

...si puedes

Medium Infogram

7. EMPIEZA EL AXIS EN 0

Storytelling and Data Visualization

via Víctor Pascual

8. ¡OJO CON LAS COMPARACIONES! 

Storytelling and Data Visualization

via Víctor Pascual

Storytelling and Data Visualization

via Víctor Pascual

Storytelling and Data Visualization

via Víctor Pascual

Storytelling and Data Visualization

via Víctor Pascual

Storytelling and Data Visualization

Storytelling and Data Visualization

2021

54,8%

2013

16,2%

Tráfico para móbil:

9. MOBILE FIRST

SIn código & gratis & fáciles

NO CODING & FREE &
NOT THAT EASY

con código & gratis & difíciles

10.-Herramientas

Storytelling and Data Visualization

ESTUDIO DE CASO

Storytelling and Data Visualization

¿De dónde partimos?

NECESITO UN TRASTERO

AUDITORÍA INVERSORES

¿Por dónde empezamos?

ESTUDIO DE CASO

Storytelling and Data Visualization

ESTUDIO DE CASO

Storytelling and Data Visualization

LINK: Necesito un Trastero 2020-Interactivo

LINK: NUT-2020

CONTRASEÑA: EADA

ID AL SLIDE 43

Y MIRAD EL VÍDEO DE PRINCIPIO A FIN.

 

¿QUÉ DIFERENCIAS ENCONTRÁIS CON LAS VISUALIZACIONES DEL PROGRAMA EXPLORA

Y LAS DE LOS INFORMES?

ESTUDIO DE CASO

Storytelling and Data Visualization

 

No hay marcha atrás. De repente, te vuelves imprescindible....

ESTUDIO DE CASO

Storytelling and Data Visualization

NECESITO UN TRASTERO

AUDITORÍA INVERSORES

¿Hasta dónde les llevamos?

Storytelling and Data Visualization

¿Y esto, cómo se hace?

1 ejercicio

Loguéate en Datawrapper

Storytelling and Data Visualization

¿Qué distrito de Barcelona tiene más locales vacíos?

 

Coge el dataset del 2014 del portal de Open Data, haz una tabla dinámica y represéntalo en un gráfico. O el del 2019

Storytelling and Data Visualization

Si lo prefieres más fácil 

La solución está aquí debajo

(no hagas click -si puedes- hasta que acabes)

Storytelling and Data Visualization

Gráficos con Flourish

Storytelling and Data Visualization

MAPAS

TIPOS

PUNTOS

COROPLETAS

BURBUJAS

CALOR

FLUJOS

HEX BINING

Storytelling and Data Visualization

MAPAS

Latitude Longitude name
42.061201860  -0.490321024 point1
38.887787884  -1.537996281 point2
38.696322447  -9.137571576 point3
geometry name
polygon region1
multipolygon region2
polygon region3

Storytelling and Data Visualization

Storytelling and Data Visualization

MAPAS

Los datos geoespaciales dibujan puntos o formas, y almacenan información para cada uno de estos puntos o regiones

Storytelling and Data Visualization

PROYECCIONES

Puntos

Storytelling and Data Visualization

Geolocalizar

  • Latitud
  • Longitud

Storytelling and Data Visualization

Complementos cuando no hay datos geolocalizados

  • Geocode cells
  • Zgeocode
  • =CONCATENATE(

Storytelling and Data Visualization

Prueba con las direcciones de los animales domésticos de Gavà 

Coropletas

Storytelling and Data Visualization

Geoportal 

Geoportal 

Estáticos

Ilustrator

 

Formatos

  • .ai
  • .svg
  • .png
  • .jpg

Estáticos

TU RETO ESTA SEMANA

Fuentes de datos

Storytelling and Data Visualization

  • ¿En qué lugar de Barcelona ubicarías una franquicia o una delegación de Necesito un Trastero o de cualquier otro negocio?
  • ¿Qué visualizaciones te ayudarían a mostrarlo?
  • ¿Qué variables has usado?

Otros recursos

· Statistics Division of the UN:
http://data.un.org/

· Google Dataset Search:
https://datasetsearch.research.google.com/

· WHO Database:
https://www.who.int/data

· National Stastistics Institute:
https://www.ine.es/

Fuentes de datos

Storytelling and Data Visualization

· The World Bank
https://maps.worldbank.org/

Datos geospaciales

· Geographical Institutes websites / Open Data:
http://centrodedescargas.cnig.es/CentroDescargas/index.jsp​  

Próxima sesión

Resolución + Google Data Studio

  • Al final de la sesión seréis capaces de:

  • Importar archivos de diferentes formatos i diferentes fuentes a Google Data Studio

  • Aprender a hacer gráficos y mapas con Google Data Studio

  • Hacer dashboards y storytelling.

  • Publicar

Gracias

eli@storydata.cat

Twitter @eli_vivas | @storydatabcn

IG @storydata

Storytelling & Dataviz Eada

By Storydata

Storytelling & Dataviz Eada

  • 386