Infografía y visualización de datos
Infografía y visualización de datos
Diploma Periodismo de datos y Visualización
@eli_vivas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926074/logoFCRIBlanquerna_gran.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Programa
- 22 marzo Introducción. Lecciones aprendidas en Infografía (2 h) Eli Vivas
- 29-30 marzo Javascript- D3. Sandra Becker III-IV (8 h) (continuación)
- 5 abril. Herramientas básicas. Charts y tablas (Datawrapper) (2 h) Eli Vivas
- 12 abril. Datos mapeados. Pablo Martín 300.000 km (2h).
- 26 abril. Herramientas básicas. Charts (Flourish) (2 h) Eli Vivas
- 3-4 mayo. D3. Martin González (The Economist) (8 h)
- 10 mayo. Herramientas básicas. Charts (Flourish II) (2 h) Eli Vivas
- 17 mayo. Visualizar en diferentes dispositivos Ferran Morales (Mundo Deportivo).
- 24 mayo. Mapas y datos geolocalizados (2 h) Eli Vivas
- 31 mayo. Xaquin Veira (2h) D3 y parallax (Propublica-National Geographic)
- 7 junio. Datos geolocalizados. Marc Torres (Instamaps)
- 14 junio. Análisis y visualización de datos con Tableau public (I) Eli Vivas
- 21 junio. Análisis y visualización de datos con Tableau public (II) Eli Vivas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Lecciones de una periodista que sin tener ni idea de diseño pasó encerrada
21 años en una sección de infografía
con 10 grafistas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5927309/tumblr_inline_oqo36zIDCs1qie8gc_1280.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5927333/tumblr_olhblh4en81qk7sffo1_1280.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5927343/1419811534986.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Infografía
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926455/591654196d241.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Visualización de datos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Visualización de datos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Visualización de la información
- detectar patrones
- interacción
- explorar
- personalizar
- analizar en profundidad
1. Color (existe otro código, y no es un lenguaje de programación)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926365/google-chart.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
Color
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
2. Resalta lo importante
(quieres explicarlo todo, pero no satures al personal)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926504/Captura_de_pantalla_2019-03-22_a_las_13.09.20.png)
Título (descripcion del gráfico)
Subtítulo (años, medidas)
Fuente. Autor. ** Notas
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
3. Desambigua (un título no es lo que pensabas)
3. 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
5. Alineación
(ordena, ordena, ordena)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926479/Alineación-Liga_de_Portoviejo_vs._Técnico_Universitario.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926593/Captura_de_pantalla_2019-03-22_a_las_13.30.34.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
via Víctor Pascual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926598/Captura_de_pantalla_2019-03-22_a_las_13.30.44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
via Víctor Pascual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926600/Captura_de_pantalla_2019-03-22_a_las_13.30.54.png)
via Víctor Pascual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926604/Captura_de_pantalla_2019-03-22_a_las_13.31.20.png)
via Víctor Pascual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926605/Captura_de_pantalla_2019-03-22_a_las_13.31.42.png)
via Víctor Pascual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926607/Captura_de_pantalla_2019-03-22_a_las_13.31.55.png)
via Víctor Pascual
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
PARA QUÉ SIRVE QUÉ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
1 ejercicio
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
¿Qué distrito de Barcelona tiene más locales vacíos?
Represéntalo en un gráfico
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
La solución está aquí debajo
(no la mires hasta que acabes)
¿Preguntas?
Próxima sesión D3 con Javascript
Sandra Becker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
1 lectura para el finde
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/5926086/2Y480rag_400x400.jpg)
BUSCADORES
Text
Gráficos con Flourish
Mapas
Tipos de mapas
- De puntos
- De cloropetas
- Clusters
Puntos
The migrants files
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6067735/Captura_de_pantalla_2019-04-26_a_las_10.40.08.png)
Geolocalizar
- Latitud
- Longitud
Complementos
- Geocode
- Google Fusion Tables (en extinción hasta el 9 de diciembre)
- =CONCATENATE(
Geolocalizar
Latitud
Puntos
Cloropetas
Geoportal
Geoportal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6116553/Captura_de_pantalla_2019-05-10_a_las_14.39.05.png)
Google Fusion Tables
Educació
Elecciones
Estáticos
Ilustrator
Formatos
- .ai
- .svg
- .png
- .jpg
Estáticos
Transformar para móvil (svg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6175379/Captura_de_pantalla_2019-05-24_a_las_15.19.42.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6175380/Captura_de_pantalla_2019-05-24_a_las_15.19.29.png)
Tableau Public (1)
Sessió 1
-
Al final de la sessió sereu capaços de:
-
Importar arxius de diferents formats i diferentes fonts a Tableau Public
-
Aprendre a fer gràfics i mapes amb Tableau Public
-
Fer fulls de treball
-
Fer dashboards i històries.
-
Publicar
Importar arxius
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255603/Captura_de_pantalla_2019-06-12_a_las_16.48.01.png)
Importa des de Google Drive
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255627/Captura_de_pantalla_2019-06-14_a_las_11.33.27.png)
Data dating
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255671/Captura_de_pantalla_2019-06-12_a_las_15.41.29.png)
Preparar los datos
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255646/Captura_de_pantalla_2019-06-14_a_las_11.36.12.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255648/Captura_de_pantalla_2019-06-14_a_las_11.36.32.png)
Filas y columnas
Arrastra las variables en filas y columnas para hacer el gráfico. La variables numéricas aparecen como "medidas"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255697/Captura_de_pantalla_2019-06-14_a_las_11.44.56.png)
Escoger el gráfico
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255610/Captura_de_pantalla_2019-06-12_a_las_16.25.32.png)
Filtros y customización
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255694/Captura_de_pantalla_2019-06-12_a_las_16.25.54.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/657567/images/6255695/Captura_de_pantalla_2019-06-12_a_las_16.25.49.png)
Tableau Public 2
Dashboards
-
Al final de la sesión seréis capaces de:
-
Conectar diferentes archivos de datos
-
Crear un dashboard de tableau con diferentes elementos
-
Crear una historia
-
Actualizar datos
-
Publicar
Subtitle
La Nacion.data
Alcaldesas 2015
Alcaldesas 2019
Gracias
Infografía y visualización de datos
By Eli Vivas
Infografía y visualización de datos
- 554