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

Per a què serveix?

detectar patrons
interacció
explorar
personalizar
analitzar en profunditat

1.- Tipus de gràfics

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

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

"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

3. Fes el complex, simple

Medium Infogram

4. Fes el complex, simple

5. Alinia tot amb tot

(i ordena, ordena, ordena)

...si pots

Medium Infogram

6. COMENÇA L'AXIS EN 0

2023

80%?

2013

16,2%

Tràfic per a mòbil:

7. MOBILE FIRST

Sense códi & gratis & fàcils

NO CODING & FREE &
NOT THAT EASY

amb codi & gratis & difícils

Eines

10.-Eines

Storytelling and Data Visualization

Exemples d'ús

DATAWRAPPER

https://reutersinstitute.politics.ox.ac.uk/es/digital-news-report/2022/dnr-resumen-ejecutivo

https://ajuntament.barcelona.cat/dades/ca/conjuntura-de-barcelona

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/

https://media.diba.cat/diba/labturisme/2023-01/index.html

FONT: DADES TURISME INE EXPERIMENTAL TELEFONIA MÒBIL

Datawrapper tooltips

negreta: text en negreta

salt de línia:

text de color específic: text

fons del text de color: text

text gran: <big>text</big>

text gran: text

línia horitzontal: <hr>

Eines

Storytelling and Data Visualization

1.- DATAWRAPPER

El teu exercici

DADES

Eina molt versàtil
El procés d'aprenentatge és molt ràpid
Es pot integrar en web i en mòbil
Experiència d'usuari -> permet l'exploració per part de l'usuari
Narració guiada -> explorar de forma guiada a través de les Stories
Plugin de Canva per integrar gràfics de Flourish a les presentacions

¿Per què Flourish?

Mil mujeres asesinadas (RTVELab)
https://lab.rtve.es/mil-mujeres-asesinadas/datos/

Singapore Societies (Kontinentalist)
http://v1.kontinentalist.com.s3-website-ap-southeast-1.amazonaws.com/stories/singapore-registered-and-secret-societies-history-19th-century-data/

The origins of Coffe in Asia (Kontinentalist)
https://kontinentalist.com/stories/are-coffee-trade-markets-in-asia-sustainable-and-ethical

Listas de espera (Newtral)
https://www.newtral.es/especiales/listas-de-espera-en-sanidad/

Projectes amb Flourish

Gràfics amb Flourish

Eines

2.- Flourish

El teu exercici

DADES

https://slides.com/

Publicar

Infogram
PowerBI
Obtenir les dades
Creació del projecte
Afegir objectes i customitzar

Estructura

Teoria

Pràctica

Tipus
Dashboards i principis gràfics
Pictogrames per no dissenyadors

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