eli@storydata.cat / elisa.vivas@upf.edu

Storytelling &

Data Visualization

Storytelling &

Data Visualization

Project in residence at the Area Tallers

Infografia vs Dataviz

Infografia

Germanwings flight-Inconsolata

Infografia

Visualització de dades

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

Visualització de dades

Translació de dades a un contex visual

Charles Minard, 1869

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

Visualització de dades

Dades

INFOGRAPHICS

Cualitativa

Cuantitativa

Híbrida

52,9%

Per a què serveix?

detectar patrons
interacció
explorar
personalizar
analitzar en profunditat

1.- Tipus de charts

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

1.- Tipus de gràfics

2. Color

No més de 7 colors en un gràfic
El gris, el teu millor amic
Fes servir colors intuitius (pero fuig dels estereotips Home-Dona)
Fes servir paletes de colors; funcionen!

2. US DEL COLOR

3. Resalta el que és important

(ho vols explicar tot en un gràfic, pero no saturis al personal)

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ítol (descripció del gràfic)

Subtítol (anys, mesures)

Font. Autor. ** Notes

3. No t'oblidis cap element

Titol memorable

Subtítol i context

Axis text

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

Legend text

Titol llegenda

Axis y títol

Axis x títol

4. Afegeix context

Source: Google News Timeline

Pors públiques en els mitjans

Swine Flu

Bird Flu

Killer Wasps

Apocalypse
2000

5. Juga amb la tipografia

(però fins a un cert punt)

Defineix UNA tipografia (o parla amb el maquetador)
Juga amb els estils per fixar L'ATENCIÓ
Jerarquitza la informació per la mida

"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. Fes el complex, simple

Medium Infogram

5. Fes el complex, simple

6. Alinia tot amb tot

(i ordena, ordena, ordena)

Storytelling and Data Visualization

...si pots

6. Alinia tot amb tot

(i ordena, ordena, ordena)

...si pots

Medium Infogram

7. COMENÇA L'AXIS EN 0

via Víctor Pascual

8. ¡ULL AMB LES COMPARACIONS!

via Víctor Pascual

2021

80%?

2013

16,2%

Tràfic per a mòbil:

9. MOBILE FIRST

SIn código & gratis & fáciles

NO CODING & FREE &
NOT THAT EASY

con código & gratis & difíciles

10.-Eines

Storytelling and Data Visualization

10.-Eines

Storytelling and Data Visualization

10.-Eines

Storytelling and Data Visualization

Exemples d'ús

DATAWRAPPER

https://reutersinstitute.politics.ox.ac.uk/digital-news-report/2023

https://ajuntament.barcelona.cat/dades/ca/presentacio-barcelona-2021

https://www.diaridebarcelona.cat/w/forum-quantifica-primer-cop-contaminacio-odorifera-traves-projecte-ciencia-ciutadana?redirect=%2F

https://a-storydata.vev.site/cities-at-night/

SLIDES

Mapas

El mapa de

les aigües contaminades.

Sentit Crític

Dades

Geojson Catalunya

Datawrapper tooltips

negrita: text en negrita

salto de línea:

texto de color específico: text

fondo del texto de color: text

texto grande: <big>text</big>

texto gran: text

línea horitzontal: <hr>

https://slides.com/

10.-Eines

Storytelling and Data Visualization

DATAWRAPPER

El teu exercici

Eli Vivas

eli@storydata.cat

Twitter @eli_vivas | @storydatabcn

IG @storydata

Definició infografia

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