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
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
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 portal de Open Data, haz una tabla dinámica y represéntalo en un gráfico
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
Transformar para móvil (svg)
TU RETO ESTA SEMANA
· Open data Barcelona
https://opendata-ajuntament.barcelona.cat/data/es/dataset/cens-activitats-comercials
· Barcelona Dades:
https://ajuntament.barcelona.cat/estadistica/catala/index.htm
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?
· Barcelona Dades:
https://ajuntament.barcelona.cat/estadistica/catala/index.htm
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/
· Kaggle:
https://www.kaggle.com/
Fuentes de datos
Storytelling and Data Visualization
· The World Bank
https://maps.worldbank.org/
Datos geospaciales
· Map SVG:
https://mapsvg.com/maps/world
· 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
