Aprèn a editar infografies i mapes interactius

curs

Eli Vivas

eli@storydata.cat

Twitter @eli_vivas | @storydatabcn

IG @storydata

sessió 1

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

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

History: https://history.infowetrust.com/

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

https://ft-interactive.github.io/visual-vocabulary/

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

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

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

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

"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