FONAMENTS DE LA VISUALITZACIÓ
1. Diferències entre la Infografia i visualització de Dades
Infografia
La representació gràfica de conceptes, o patrons en dades o informació
OXFORD DICTIONARY
A visual presentation of information in the form of a chart, graph, or other image accompanied by minimal text, intended to give an easily understood overview, often of a complex subject
PERFIL DEL TURISTA QUE VE A BARCELONA, COM ARRIBA, D’ON VE I ON S’ALLOTJA
Font: Perfil i hàbits dels turistes a la ciutat de Barcelona 2017. Ajuntament de Barcelona.
Autor: Astrid Ortiz
La informació visual ajuda al lector a comprendre millor la informació
“la representació gràfica de dades o conceptes, que té com a resultat una imatge mental o un artefacte extern que ajuda a la presa de decisions”
C. Ware 2000
Translació de dades a un contex visual
A diferència de la infografia, on poden haver elements informatius simbòlics qualitatius, combinats amb elements quantitatius, la visualització de dades és la representació gràfica dels patrons de dades quantitatius que ajuden a la presa de decisió. Darrere d'una visualització de dades sempre hi ha un dataset
Charles Minard, 1869
Tot i que ara mateix hi ha una auge de la visualització de dades des de la irrupció del Bigdata, no és una disciplina novedosa
Gràfics estàtics
Gràfics interactius
Permeten l'exploració
Els gràfics
interactius es poden convertir en format estàtic per a imprimir, però s'han d'adaptar
Filtres
Gràfics estàtics adaptats
Els gràfics en format estàtic (per imprimir) perden la interacció, i al no funcionar els filtres, la informació s'ha de duplicar
Quadres de
comandament (visors)
dashboards
Quadres de comandament (visors)
Dashboards
Abans de començar a visualitzar, hem de tenir clar quin tipus de gràfic ens serveix per representar cada concepte. Per això et recomano que comptis amb un diccionari visual, com el del Finantial Times.
Obre el diccionari i mira quins gràfics corresponen a cada concepte
Fes click al globus i observa com amb només dos colors es pot dirigir l'atenció de l'usuari
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
Fes click aquí sota
Quants números 2 veus
al primer quadrant? I en segon?
I el tercer?
El més important!
Quant temps trigues en descobrir
quants números 2 hi ha?
Fes click aquí sota
"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
Medium Infogram
...si es pot. Els mesos, per exemple, no es poden ordenar
...si es pot. Els mesos, per exemple, no es poden ordenar
Medium Infogram
Mòbil
68,98%
Destock
29,4%
Tràfic per a mòbil 2023
Font: Websimilar
TELLS A
EXPLICAR UNA HISTòRIA
BEN ESTRUCTURADA
VISUALMENT ATRACTIVA
MEMORABLE
Qualitatius
Quantitatius
Híbrid
1
2
3
4
52,9%
1
2
3
1
3
Estàtic
Interactiu
Dinàmic
1
3
Títol
Cos
Peu
1
3
Estadístics
1
3
Jing Zhang
Venngage
Informatius
1
3
Venngage
Timeline
1
3
Nigel Holmes
goodwaydesign
Procés
1
3
David McCandless
Comparatius
FOOTER
Llista
1
3
Idea o tema
Audiència
Estructura
Informació
Afegeix valor
Disseny
FOOTER
RECURSOS PICTOGRÀFICS PER PERFILS DE FORA DEL DISSENY
Una guia detallada de visualització de dades (en anglès)
Datawrapper