Visualització de dades
Repte Barcelona Dades Obertes 
Tercera edició_2020
27 de novembre de 2019


01
Què ens diuen les dades?
Què ens diuen les dades?
Escalfament 
global
Mínim solar secundari
Volcà Krakatoa 1883
Baixa activitat solar (1795-1820)
Volcà Tambora 1815
Més informació a: https://www.meteo.cat/wpweb/climatologia/el-clima-ara/serie-climatica-de-barcelona/
Què ens diuen les dades?
Link: https://opendata-ajuntament.barcelona.cat/data/ca/dataset/temperatures-hist-bcn
Què ens diuen les dades?
Temperatura
Temps
Per simplificar: dades agregades per 
any
Busquem: tendències, anomalies
Link: https://opendata-ajuntament.barcelona.cat/data/ca/dataset/temperatures-hist-bcn
02
Tipus de gràfics
Els gràfics
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Comparacions
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Comparacions
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres
Voleu:
● Comparar un conjunt de 
valors. 
● Establir un rànquing.
● Ordenar de més gran a 
més petita.
Característiques:
● Noms de les categories 
llargs: orientació 
horitzontal.
● Línia de referència 
(mitjana, objectiu…).
● Ressaltar amb colors.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres
Voleu:
● Comparar un conjunt de 
valors. 
● Establir un rànquing.
● Ordenar de més gran a 
més petita.
Característiques:
● Noms de les categories 
llargs: orientació 
horitzontal.
● Línia de referència 
(mitjana, objectiu…).
● Ressaltar amb colors.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres
 Ordre temporal
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres
L’eix quantitatiu ha de començar a cero, per no 
confondre el lector.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres
Segur?
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
El cero ha de ser sempre la referència? La 
importància del CONTEXT
Què ens diuen les dades?
Escalfament 
global
Mínim solar secundari
Volcà Krakatoa 1883
Baixa activitat solar (1795-1820)
Volcà Tambora 1815
Més informació a: https://www.meteo.cat/wpweb/climatologia/el-clima-ara/serie-climatica-de-barcelona/
Gràfic de barres agrupades
Volem:
● Entendre la 
descomposició d’una 
categoria en els 
diferents segments 
que la componen.
Característiques: 
● També hi ha 
codificació per colors.
● Valorar sempre si és 
més clar fer gràfics 
separats.
Partides pressupostàries per categoria i subcategoria.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres apilades
Volem:
● Comparar el valor 
total de la suma dels 
segments.
Exemple:
● Quan és difícil 
comparar el nombre 
de partides 
pressupostàries 
destinades a cada 
subsector.
Població dels estats americans segmentats per rangs d’edat.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres apilades
Alternativa: separar en diferents gràfics
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de barres apilades
Atenció:
● Quan només 
s’apilen dues 
categories es pot 
aconseguir un 
gràfic més 
aclaridor.
Publicacions de facebook segons temes d’actualitat pel Partit Demòcrata i el 
Republicà.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de radar
Volem:
● Comparar moltes 
variables.
Atenció:
● No es poden 
representar variables 
amb valors negatius / 
positius.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de radar
Massa variables!
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic d’intensitat de colors
Volem:
● Fer comparacions 
qualitatives. Els valors es 
representen amb colors en 
lloc de nombres.
● Mostrar evolució temporal, 
buscar patrons, 
correlacions…
Evolució d’infectats per malària.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic d’intensitat de colors
Volem:
● Fer comparacions 
qualitatives. Els valors es 
representen amb colors en 
lloc de nombres.
● Mostrar evolució temporal, 
buscar patrons, 
correlacions…
Atenció:
● L’ordre és important
Evolució d’infectats per malària.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de marques
Aporta context.
Valor per comparar
Barra
Valors acceptables
Volem: Avaluar un valor concret respecte del que s’esperava i 
respecte d’uns rangs de qualitat establerts.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic múltiple
Volem:
● Mostrar el comportament 
d’una mateixa variable per 
diferents categories.
Característiques:
● Quan hi ha massa 
categories per un sol 
mapa.
● Dades en el temps. 
Diferents gràfics per a 
cada moment determinat.
Beneficis d’una empresa a cada estat dels per categories de 
producte i per tipus de client.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Tendències
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de línies
Volem: 
● Mostrar l’evolució 
temporal d’una o més 
variables 
quantitatives.
Vendes de dos productes d’una empresa.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de línies
Atenció: 
● Amb l’eix y! Es corre el risc d’emfatitzar massa els canvis. 
● Cal tenir en compte que la representació de massa línies pot reduir 
considerablement la llegibilitat del gràfic.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de pendents
Volem:
● Comparar l’abans i el després 
d’una variable en diverses 
categories.
Característiques:
● Els valors màxims i mínims de 
cadascun dels eixos ha de ser 
el mateix. 
Classificació dels diferents equips de la primera 
divisió de futbol. 
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Minigràfic
Volem:
● Veure el comportament del valor mostrat 
a grans trets.
Caracterísitques:
● Són secundaris.
● Petits i sense eixos.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Mapes
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Mapa de coropletes
Volem: 
● Trobar patrons geogràfics 
en les dades. 
Atenció: 
● S’ha d’utilitzar per resoldre 
dubtes de caire geogràfic. 
No per fer un rànquing de 
les diferents regions.
 Taxa d’atur als Estats Units.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Mapa de símbols proporcionals
Volem:
● Trobar patrons geogràfics en 
dades que contenen punts 
geogràfics (latitud i longitud).
Característiques:
● No calen regions polítiques. 
● El color pot ser una segona 
variable.  
● Cal utilitzar la transparència 
per facilitar la lectura.
Nombre de persones censades als Estats Units.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Volem:
● Comparar un valor amb la 
suma dels altres.
Característiques:
● És un gràfic ideal quan hi ha 
dos valors.
Però...
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Atenció: 
● Moltes categories, millor barres.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Atenció: 
● L’ús de 3D pot dificultar la comprensió.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Atenció: 
● Millor ordenar les dades per ordre seqüencial.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Atenció:
● Si les dades ordinals segueixen un ordre 
temporal, millor línies.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Parts d’un total
Atenció:
● Si s’han de comparar diferents categories, millor 
barres.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Pictograma
Volem:
● Expressar un valor i alhora 
oferir un context que permeti 
identificar si és gran o petit.
Característiques:
● Són òptims per representar 
percentatges. 
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Mapa d’arbre
Volem: 
● Veure una 
agrupació 
jeràrquica de 
valors.
Volum de vendes d’una empresa (mida) i benefici (color).
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Distribucions
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Histograma
Volem:
● Entendre com estan 
distribuïts els valors 
d’una variable. En 
particular, quan els 
valors es distribueixen 
de manera similar al 
voltant de la mitjana.
Valoracions d’un conjunt de sèries de televisió.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Diagrama de caixa
Atenció:
● No és un gràfic adient per a tots 
els públics. Cal conèixer 
conceptes fonamentals de 
Caixa de les valoracions dels capítols de sèries de televisió. l’estadística descriptiva.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Correlacions
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Correlacions
Volem:
● Veure la relació que hi ha 
entre dues variables.
● Detectar elements atípics.
Vendes i benefici per producte. Cada punt és un producte. 
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Correlacions
Relació lineal, exponencial, polinomial o logarítmica entre dues variables.
Agrupacions.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de bombolles Volem:
● Representar fins a 5 variables 
diferents alhora:
● posició segons l’eix x 
(variable principal).
● posició segons l’eix y 
(variable principal).
● color del punt (per distingir 
categories).
● mida del punt (per buscar 
el valor més gran de la 
variable).
● animació per representar 
l’evolució temporal de 
Benefici, vendes i descompte per a un conjunt de productes. 
La mida i color de la bombolla representa la magnitud del cada punt (interactius).
descompte. 
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Gràfic de bombolles
Eix x: esperança de vida
Eix y: ingressos
Mida: població
Color: continent
Evolució: amb el temps
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Coordenades paral·leles
Volem:
● Explorar conjunts de 
dades 
multidimensionals.
Atenció:
● Sobretot per 
interactius.
 Comparació de models de cotxe a partir de diferents característiques. 
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Connexions, relacions i xarxes
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Connexions, relacions i xarxes
 Diagrama de nodes i arestes  Diagrama de Sankey
Volem: Volem:
● Detectar patrons entre ● Estudiar diferents categories o 
elements del conjunt de estats a través dels quals una 
dades. variable va canviant de valor.
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Connexions, relacions i xarxes
03
Recomanacions
Menys és més
Context: És important donar suficient context per poder comprendre millor 
les dades, omplir-les de significat i guiar el lector cap a una conclusió 
 determinada.
https://www.yellowfinbi.com/blog/2017/03/spoonful-of-context-helps-data-visualization-go-down
Color: Destacar informació o codificar-la. Cal no abusar-ne! Màxim de cinc 
colors per gràfic.
https://learnui.design/tools/data-color-picker.html#palette
Tipografia: Ha de ser legible.
Text: Un titular adequat pot ser la clau per atraure l’atenció del lector. Pot 
facilitar la comprensió. Màxima síntesi.
Iconografia: Només si serveix per augmentar la comprensió.
Proporció: Assegureu-vos que les dades es veuen bé.
04
Males pràctiques
A l’aula
Feu d’analistes de dades
Detecteu les males pràctiques als següents gràfics.
Ajuntament de
Barcelona
Mirada crítica
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Mirada crítica
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Mirada crítica
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Eixos tallats… o desapareguts
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Eixos tallats… o desapareguts
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Eixos tallats… o desapareguts
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Eixos tallats… o desapareguts
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Anumerisme
Eixos tallats… o desapareguts
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Eixos tallats… o desapareguts
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Eixos tallats… o desapareguts (+ Cherry-picking)
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
No es manté l’escala
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
No es manté l’escala
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Respectar les convencions
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Respectar les convencions
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Els «pastissos»
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Els «pastissos»
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Els «pastissos»
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Què els hi passa?
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Què els hi passa?
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Què els hi passa?
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Què els hi passa?
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Què els hi passa?
barcelona.cat/barcelonactiv
a
05
Eines
Eines
Tableau (https://www.tableau.com/).
DataWrapper (https://www.datawrapper.de/)
Flourish (https://flourish.studio/)
Adobe Illustrator 
(https://www.adobe.com/es/products/illustrator.html)
SketchApp (https://www.sketchapp.com/)
Microsoft Excel (https://products.office.com/en/excel)
Microsoft PowerBI (https://powerbi.microsoft.com/es-es/)
Instamaps (https://www.instamaps.cat): mapes 
D3 (https://d3js.org/): llibreries
R (https://www.r-project.org/)
A l’aula
Eines: Flourish Atenció! Feu servir la versió Cal usuari
en anglès.
A l’aula
Eines: Flourish
OBJECTIU
Analitzar l’evolució temporal de les despeses segons 
les polítiques de l’Ajuntament de Barcelona.
A l’aula
Obtenim les dades
Descarreguem 
les dades
A l’aula
Quin tipus de visualització farem servir?
Volem:
● Estudiar l’evolució 
temporal d’una o 
més variables.
Gràfic de línies.
A l’aula
Quin tipus de visualització farem servir?
En aquest punt:
● Assegureu-vos 
que els textos es 
veuen bé.
● Comproveu que 
no hi ha errors a 
les dades.
● Necessitareu 
agregar dades?
Atenció! Depenen del programa amb el que treballeu i de com 
estigui configurat, treballareu amb punts o comes.
A l’aula
Nova visualització
Flourish
A l’aula
Flourish
Gràfic de línies
A l’aula
Com hem de pujar 
Flourish les dades?
Sempre en 
trobarem un de fet.
A l’aula
Flourish
Volem:
● Una columna per a cada categoria.
● Un columna amb els anys. Què tenim?
A l’aula
Quin tipus de visualització farem servir?
Podem:
● Refer les 
columnes
O...mirem què passa 
si pugem les dades 
directament
A l’aula
Flourish Podem importar el 
full de càlcul
Les podem copiar i 
enganxar
A l’aula
Flourish Dades
Etiquetes
Dades que es 
representen
Miniatura
A l’aula
Flourish
Transformem x i y clicant on assenyala la fletxa vermella.
A l’aula
Flourish
Fixem
B-F
Agafem les columnes (B-F): Deute 
Públic, Seguretat i mobilitat ciutadana, 
Habitatge i urbanisme, Benestar 
comunitari i Medi Ambient.
A l’aula
Descarregueu-vos-el
Flourish
Modifiqueu 
l’estil del 
gràfic
A l’aula
Descarregueu-vos-el
Flourish
Modifiqueu 
l’estil del 
gràfic
A l’aula
Text Mida 
4 lletra
Flourish
Mida 
1. Feu les línies més gruixudes. número
2. Poseu capçalera.
3. Poseu la llegenda a sota.
4. Afegiu textos als eixos x i y i feu els números més grans.
3
Mida 
2 lletra
Text
1
Mida 
número
A l’aula
● Feu les línies més gruixudes.
Flourish ● Poseu capçalera.
● Poseu la llegenda a sota.
● Afegiu textos als eixos x i y i feu els 
números més grans.
Eines: Flourish
Fem el següent gràfic:
Eines: Flourish
Seleccionem les dades que necessitem i les 
enganxem a una pestanya nova.
Eines: Flourish Només ens interessen les dades on 
la nacionalitat és “Cap espanyol”
Eines: Flourish
Nou mapa
Eines: Flourish
Necessitem un Fitxers geojson Importem el fitxer
fitxer de geometria
Eines: Flourish
Eines: Flourish
Eines: Flourish
Afegim una columna on posarem 
les dades de la columna G 
Eines: Flourish (nombre) del full de càlcul. 
D’aquesta manera obtindrem els 
colors amb la gradació.
Eines: Flourish
Copiem les dades del full de càlcul
Atenció! L’ordre dels 
barris ha de ser el mateix.
Eines: Flourish
Què volem visualitzar?
El quadre ha de quedar 
així:
barris
nombre
Eines: Flourish
Haruríem de veure 
això:
Eines: Flourish
Afegim 
Modifiquem l’estil: el títol
Activem 
la visió 
dels Activem 
contorns la visió 
de la 
llegenda
Eines: Flourish
Ho hauríem de veure 
així:
Eines: Flourish
Fitxers geojson
Eines: Flourish
Quan tinguem punts amb coordenades els hem d’afegir en aquesta 
pestanya. Els noms dels barris han de ser idèntics!
Eines: Flourish
Pestanya Mida dels punts Latitud
de punts Longitud
Eines: Flourish
Per visualitzar-ho tot:
Pestanya 
punts
Pestanya 
regions
Mida dels 
punts = 
columna 
valors
Afegiu títol
Eines: Flourish
Afegiu 
llegenda
Coloregeu 
les regions
Exercici
Voleu practicar més?
Fem el següent gràfic:
Eines: Flourish
Fem el següent gràfic:
Eines: Flourish
Fem el següent gràfic:
Exercici
Més propostes?
Gràcies per la vostra atenció!