Visualització de dades
Repte Barcelona Dades Obertes 
Quarta edició_2021
27 de gener de 2020
01
Què ens diuen les dades?
Què ens diuen les dades?
Què ens diuen les dades?
Més informació a: https://www.meteo.cat/wpweb/climatologia/el-clima-ara/serie-climatica-de-barcelona/
Link: https://opendata-ajuntament.barcelona.cat/data/ca/dataset/temperatures-hist-bcn
Què ens diuen les dades?
Escalfament 
global
Mínim solar 
secundari
Baixa activitat solar Volcà Krakatoa 1883
(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?
El canvi climàtic a Barcelona.
Què ens diuen les dades?
El canvi climàtic a Barcelona.
Volcà Tambora 1815 Volcà Krakatoa 1883
Ona de calor
Què ens diuen les dades?
Què ens diuen les dades?
02
Com visualitzar les dades?
«Un full de càlcul no coneix la seva audiència ni el 
seu propòsit. Els programes visualitzen dades; les 
persones visualitzen idees» Scott Berinato
Com triar un tipus de gràfica?
Font: http://atenciociutadana.gencat.cat/web/.content/manuals/guia-visualitzacio-dades.pdf
Com triar un tipus de gràfica?
Com triar un tipus de gràfica?
Gràfic de barres
Fet amb LibreOffice
Gràfic de barres
I si… Ordenem les icones per «categoria»? 
Gràfic de barres
I si… Ordenem les icones per «resultats»? 
Gràfic de barres
I com mostrem els canvis? 
03
Com mirem els gràfics?
Formatgets?
«L’única cosa pitjor que un gràfic de sectors és tenir-ne més d’un». Tufte, 1983. 
Normalment no acostumen a ser la millor tria i són «acceptables» només en contextos molt 
limitats. Comporten dificultats de percepció.
Rànking d’elements visuals
La nostra 
percepció és 
important!
Rànking d’elements visuals
Abans
Després
Abans
Després
Pas per pas
Recordeu aquesta gràfica força confusa? 
Una possibilitat
04
El disseny
Alguns principis bàsics
Adaptat de Good Charts
● Estructura i jerarquia
○ Títols, elements i distribució 
○ Alineació (esquerra; guies visuals)
● Claredat (Comunicació)
○ Cada element és únic (títols que descriuen els eixos)
○ Sense ambigüitats
○ Analitzar cada element
● Simplicitat (Presentació)
○ Compte! Simple no sempre vol dir més clar. 
○ Ús restringit de textos i de colors. 
○ Limitar el recorregut de l’ulls. Etiquetes i llegendes a prop dels elements
Pas per pas
Una mica d’estructura
Pas per pas
Una mica d’estructura
Color
Algunes consideracions bàsiques:
● Simplifica la paleta de colors generals
● El gris és útil
● Color per destacar
● Crear relacions entre els elements
Necessites una paleta? Prova Paletton
Tingueu en compte les alteracions de 
percepcions del color: CVSimulator 
Color
Algunes consideracions bàsiques:
● Simplifica la paleta de colors generals
● El gris és útil
● Color per destacar
● Crear relacions entre els elements
Necessites una paleta? Prova Paletton
Tingueu en compte les alteracions de 
percepcions del color: CVSimulator 
Color: contrastos
Color: contrastos
Pas per pas
Podem millorar això? 
Pas per pas
Colors i categories
Pas per pas
Una mica d’estructura
Pas per pas
Color… i gris
Fonts
● Sense serifa, moderna, llegible a mida petita
● Redueix les diferències d’estil
● Justificació
● Alineació
● Etiquetes
Trucs per a textos i taules
Escriviu un títol atractiu
Modifica només una característica del text per mostrar jerarquia: 
● Mida
● Color
● Pes
● Totes alhora
Coherència
Empreu els mateixos elements durant tota la visualització: 
● Jerarquia
● Fonts
● Colors
● Marges
● Alineació
● … 
Pas per pas
Color… i gris
Pas per pas
Fonts
Menys és més
Menys és més
Elimina els elements innecessaris: 
● Vores
● Quadres
● Colors
● Ombres
● Marcadors dels eixos
● 3D (només si és intrínsecament 3D)
Minimitza els elements: 
● Evita repeticions
● Combina
A l’aula
Busqueu les diferències
A l’aula
Busqueu les diferències
● Títol més atractiu
● Subtítol per millorar la comprensió
● Columnes etiquetades en lloc de llegenda
● Etiquetes numèriques en lloc de números a l’eix
● Un sol color per destacar
● Sense 3D
● Sense quadrícula
● Columnes ordenades de més a menys
Convencions culturals
Convencions culturals
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
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
Respectar les convencions
barcelona.cat/barcelonactiv
a
Ajuntament de
Barcelona
Respectar les convencions
barcelona.cat/barcelonactiv
a
Què els hi passa?
barcelona.cat/barcelonactiv
a
Què els hi passa?
barcelona.cat/barcelonactiv
a
Què els hi passa?
barcelona.cat/barcelonactiv
a
Què els hi passa?
barcelona.cat/barcelonactiv
a
Anumerisme
Com reconèixer gràfics «mal fets»
● Els eixos estan tallats… o desapareguts
● No es manté l’escala en tot el gràfic
● Respectar les convencions
● Els gràfics en 3D deformen la comprensió
● Millor evitar gràfics «de pastís» (comparem millor distàncies 
que angles).
● Poques dades (cherry picking).
barcelona.cat/barcelonactiv
a
05
Eines
Eines
DataWrapper (https://www.datawrapper.de/)
Flourish (https://flourish.studio/)
Instamaps (https://www.instamaps.cat): mapes
Tableau (https://www.tableau.com/)
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/)
D3 (https://d3js.org/): llibreries
R (https://www.r-project.org/)
Eines: Data Wrapper Cal inscriure’s
Eines: Flourish
OBJECTIU
Tornarem a fer els gràfics que hem fet amb libreoffice.
Eines: Datawrapper
Objectiu:
Lloguer mitjà mensual per barris
Renda familiar per barris
Nou gràfic Nou mapa
Eines: Data Wrapper
Enganxem les nostres dades aquí.

Es separa en columnes
Important! Poseu versió 
en català! Si no, 
confondrà comes i punts. 
Comproveu les columnes que són text i les que són números.
Escollim tipus de gràfic

Per intercanviar els eixos
Per pintar el punt que vulguem d’un color diferent
Línia de tendència

Què més podem fer?
● Fer que els punts siguin tan grans com la població dels 
barris. Afegint una columna de població.
● Fer que els punts siguin de diferent color, segons el 
districte de Barcelona, afegint la columna districte.
Ens tornem a descarregar el .csv de lloguer de pisos a 
Barcelona.
En tots dos casos haurem de recordar que no hi ha dades 
per La Marina del Prat Vermell, La Clota i Baró de Viver.
Eliminem els barris que no ens interessen i deixem les columnes Població i 
Districtes.
Afegim les dues columnes. Una la definim com a 
text i l’altra com a número.
Per dir si és número o text
Per fer els punts de mida variable segons la columna “Població”.

Per inserir de 
forma 
interactiva
Descarregar 
imatge
Objectiu:

Analitzarem el període més 
recent del dataset
En aquest cas no ens cal fer gaire 
processament de les dades. Les 
enganxarem directament a 
Datawrapper.

Si necessiteu un 
altre mapa de 
Barcelona. Per ex: 
Àrees Bàsiques 
Sanitàries de 
Barcelona, el 
Escollim els barris trobareu aquí. 
Només l’heu de 
pujar.
Aquesta fila són els 73 barris de Barcelona Hem d’omplir aquesta columna
(en ordre!)
per afegir una 
columna

Per substituir el Número de barri pel nom (columna C)

Objectiu:
Recuperem les dades de fecunditat, però aquest cop només agafem 
les dades d’un districte.

colors
ordenar

Objectiu:

les ocultem
Per buscar
Per veure les barres
Eines: Flourish
Atenció! Feu servir la versió Cal usuari
en anglès.
A l’aula
Eines: Flourish
A l’aula
Eines: Flourish
Sempre trobareu un gràfic fet per defecte. Hem d’anar a la pestanya “Data” 
per introduir les nostres dades.
A l’aula
Eines: Flourish Per pujar les dades
A l’aula
Eines: Flourish
Hem d’assegurar-nos que tenim les dades preparades. Ja les hem 
hagut de netejar i processar.
A l’aula
Eines: Flourish
Hem d’assegurar-nos que tenim les dades preparades. Ja les hem 
hagut de netejar i processar.
A l’aula
Eines: Flourish
Hem d’assegurar-nos que tenim les dades preparades. Ja les hem 
hagut de netejar i processar.
A l’aula
Eines: Flourish
A l’aula
Eines: Flourish
Estudiem el menú de la dreta.
Forma
Mida
Línia perfil
A l’aula
Eines: Flourish
Estudiem el menú de la dreta.
Dot labels → mostra les etiquetes
Per dibuixar 
recta de 
regressió
A l’aula
Eines: Flourish
A l’aula
Eines: Flourish
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
png, jpeg, svg
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
Haurí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
A l’aula
Eines: Instamaps
A l’aula
OBJECTIU
Què volem representar?
Accidents de trànsit per tipologia de vehicle. Cada punt representa un vehicle 
accidentat. Els diferents colors el tipus de vehicle (camió, turisme, motocicleta, etc)
Quines dades ha de contenir el full de càlcul?
Hem de generar un full de dades per cada tipus de vehicle. Ha de contenir columnes 
de coordenades.
Sempre cal revisar que hi ha una quantitat significativa de 
coordenades. Si veiem que n’hi ha moltes de buides, no 
podrem fer el mapa.
A l’aula
ACCIDENTS PER TIPOLOGIA DE VEHICLE
Anem a la pàgina del dataset 
Vehicles implicats en accidents gestionats per la Guàrdia Urbana a la ciutat de Barcelona 
Ens descarreguem el .xlsx/.csv del 2017. 
A l’aula
ACCIDENTS PER TIPOLOGIA DE VEHICLE
Obrim l’arxiu. Tant amb l’excel com amb el libre office se’ns obrirà sense 
problemes.  
A l’aula
ACCIDENTS PER TIPOLOGIA DE VEHICLE
Només estudiarem els accidents que han passat a l’Eixample. Aplicarem un filtre a la columna “Nom 
districte”.  
Recordeu guardar el nou fitxer 
com a csv
A l’aula
ACCIDENTS PER TIPOLOGIA DE VEHICLE
Generem un nou full de dades només amb els taxis.
Repetim la mateixa operació 
seleccionant “Taxi” com a 
tipus de vehicle.
A l’aula
Iniciem sessió a Instamaps
A l’aula
Fer un nou mapa
A l’aula
Ara hem de pujar les dades.
A l’aula
Ara hem de pujar les dades.
A l’aula
Primer carregarem les dades pels 
taxis.
A l’aula
Ups!
A l’aula
A l’aula
Mapa de 
concentració
A l’aula
A l’aula
Mapa 
d’agrupació
A l’aula
Ara carregueu les dades 
per tots els tipus de 
vehicles.
La culpa és dels vianants?
Gràcies per la vostra atenció!