Màster de Periodisme de Dades i Fact Checking
Laura Navarro Soler
Visualització de Dades
Visualització de Dades
Google Spreadsheets
Datawrapper
Flourish
Illustrator
Mapbox
D3.js
R (ggplot2)
Assistència
Pràctiques/exercicis
Seguiment actiu
Visualització de Dades
Visualització de Dades
Cairo, Alberto. The Truthful Art: Data, Charts, and Maps for Communication
Tufte, Edward. The Visual Display of Quantitative Information.
Wilke, Claus. Fundamentals of Data Visualization: https://clauswilke.com/dataviz/
BBC Visual and Data Journalism cookbook for R graphics (R): https://bbc.github.io/rcookbook/
Dougherty, Jack; Ilyankou, Ilya. Hands on Data Visualization (R):
15/12/2021
Visualització de Dades
John Hopkins University
Coronavirus Simulator — The Washington Post
The “Flatten the curve” graph
Traducció de dades en cru a elements visuals
per detectar patrons, tendències i valors atípics
Visualització de dades
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 ©
Adolfo Arranz
Germanwings flight-Inconsolata
'El Viaje de oro de Sandra Sánchez'-Miguel Ángel Fernández
A graphical representation of data, which is either an internal construct of the mind or an external artifact supporting decision making
C. Ware 2000
How America Uses its land - Bloomberg
Font: Podios
Visualització de dades
William Playfair (s.XVIII)
Florence Nightingale (1854)
Visualització de dades
Charles Minard (1869)
Visualització de dades
W.E.B. Du Bois (1900)
Visualització de dades
Nigel Holmes
Visualització de dades
"Vanishing tropical rainforests", Reuters
"Sexual violence in Singapore", Kontinentalist
"Access to assisted reproduction", Civio
escriure cada fase en una metodologia
Cerca i anàlisi de dades, la base
20%
80%
visualitzar
cerca, neteja i anàlisi
Tipus
34, 45, 8795, 65.9, 3.555550
molt bé
malament
excel·lent
poma, taronja, pera, llimona
2020, 13-02-2020, dilluns 13 de febrer
Quantitatives
Qualitatives
Nominal
Discretes
Contínues
Ordinal
Dates
2, 4, 10, 100
Visualització de dades
https://ft-interactive.github.io/visual-vocabulary/
Visualització de Dades
Visualització de Dades
The visual encoding is the way in which data is mapped into visual structures, upon which we build the images on a screen.
Posició
Mida
Visualització de Dades
Forma
Orientació
Saturació
To
Visualització de Dades
The New York Times
Visualització de Dades
The New York Times
CODIFIACIÓ VISUAL: COLOR (TO), POSICIÓ I MIDA
Què vull explicar?
· Centra't en els conceptes clau
· Un gràfic, una idea
· Entrevista les dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
· No més de set colors en un gràfic.
· Gris, el teu millor amic.
· Utilitza colors intuitius (pero evita repetir estereotips home-dona).
· Utilitza paletes de colors. Funcionen.
Visualització de Dades
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
Visualització de Dades
Visualització de Dades
Visualització de Dades
Títol increíble
Subtítol que contextualitza
text axis
text axis
text axis
text axis
text axis
text axis
Text axis
Font i qui ha creat el gràfic. Notes si és necessari.
Text
Text
Títol llegenda
Títol axis Y
Títol axis X
Visualització de Dades
Visualització de Dades
Source: Google News Timeline
Swine Flu
Bird Flu
Killer Wasps
Apocalypse
2000
100%
0%
50%
Visualització de Dades
"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
Visualització de Dades
Visualització de Dades
Medium Infogram
gràfics de barres i columnes
Visualització de Dades
però està bé no fer-ho en els de línies
Visualització de Dades
Visualització de Dades
Visualització de Dades
2020
50,8%
2013
16,2%
Visualització de Dades
Visualització de Dades
sense programar & gratis & fàcil
sense programar & gratis & no tant fàcil
programar & gratis & complexes
Visualització de dades
deixar al usuari connectar coses
comparar
veure diferents angles
presentar informació no esbiaixada
oferir bon context
triar la visualització correcta
centrar l'atenció, un punt de vista
una bona història
Visualització de Dades
US Gun deaths, Periscopic
Bussed Out, The Guardian
Visualització de Dades
#Cuéntalo
The Guardian . The climate disaster is here
Visualització de dades
Mitjans
Reuters Graphics
South China Morning Post
The Washington Post
The New York Times
Al Jazeera
The Pudding
The Economist
The Times
Information is Beautiful
Dear Data
El Confidencial
El País
El Diario.es
Persones
Alberto Cairo
David Mc Candless (Information is Beautiful)
Nicholas Felton (annual report)
Federica Fragapane
Xaquín Viera
Lisa Charlotte Muth (Datawrapper)
Nathan Yau (Flowing Data)
Mona Chalabi
Ferran Morales
Amber Thomas (The Pudding)
Artur Galocha (Washington Post)
Visualització de Dades
Mona Chalabi
Visualització de Dades
Domestic Data Streamers
Visualització de Dades
The Birthday Paradox, The Pudding
Visualització de dades
Visualització de dades
22/12/2021
Visualització de dades
Visualització de dades
Visualització de dades
Visualització de dades
Alberto Cairo
“Los gráficos no deben simplificar los mensajes. Deben aclararlos, resaltar tendencias, descubrir patrones y revelar realidades que antes no eran visibles ".
Visualització de dades
Un dataset, 25 visualitzacions
Nathan Yau
Visualització de dades
Compara la tendència anual i per a cada país
Un dataset, 25 visualitzacions
Visualització de dades
Mostra la tendència de cada país per separat, sense sobreposar-se
Un dataset, 25 visualitzacions
Visualització de dades
Es centra en la diferència per sexe, i en comparació amb altres països
Un dataset, 25 visualitzacions
Visualització de dades
Mostra la distribució i també l'evolució
Un dataset, 25 visualitzacions
Visualització de dades
Mostra l'evolució i la distribució, posant atenció a cada any
Un dataset, 25 visualitzacions
Visualització de dades
Mostra la propagació de la distribució (com de distribuïda està la informació)
Un dataset, 25 visualitzacions
Visualització de dades
Gràfics poc efectius
Passa a totes les empreses de tots els sectors i a tot tipus de persones. Passa als mitjans. Passa als llocs on menys ho esperem. Per què?
Perquè qualsevol pot posar algunes dades en una aplicació i crear un gràfic. Hi ha una història en les dades, però les aplicacions no saben quina història és.
Què és el més important per a triar un gràfic?
Si us pregunteu quin és el gràfic adequat per aquesta situació?, la resposta és sempre la mateixa: el que sigui més fàcil de llegir per la vostra audiència...
Cole Nussbaumer
i el que puguem fer amb les dades que tenim!
Visualització de dades
Visualització de dades
https://ft-interactive.github.io/visual-vocabulary/
Desviació
BAR DIVERGING
BAR DIVERGING-STACKED
SPINE-CHART
BALANCE FILLED LINE
Posen l'atenció a la variació (+/-)
font: daydreamingnumbers.com
Temporal
Canvi en el temps
LINE
COLUMN TIME-LINE
COLUMN-LINE-CHART
SLOPE
AREA
CIRCLE TIME-LINE
Temporal
Canvi en el temps
Quin gràfic és més efectiu?
Rankings
Posició
BAR ORDERED
COLUMN ORDERED
SLOPE
LOLLIPOP
BUMP
De vegades s'eviten els gràfics de barres perquè són habituals. Això és un error.
Més aviat, els gràfics de barres s'han d'aprofitar perquè són comuns, ja que això significa menys corba d'aprenentatge per al lector.
Rankings
Posició
Correlació
Relació entre variables
SCATTERPLOT
COLUMN-TIME-LINE
BUBBLE
XY HEATMAP
SPURIOUS CORRELATIONS
SCATTERPLOT CONNECTED
Distribució
Com estan distribuïdes?
HISTOGRAM
BOXPLOT
DOT PLOT
PYRAMIDS
Claus Wilke
Part del tot
Mostra part d'una variable sobre el total
COLUMN STACKED
PIE CHART
DOUGHNUT
TREEMAP
GRIDPLOT
Quan tenim molts grups, els treemap no funcionen. Hem d'agrupar o triar un altre tius de gràfic.
Recomanats quan tenim grans grups i volem posar èmfasi en una de les parts.
Quin gràfic és més efectiu?
Espacial
Patrons geogràfics
CHOROPLETH
POINTS/DOTS
FLOW
CONTOUR
EQUALISED CARTOGRAM
CARTOGRAM
Flux
Mostren moviment i/o connexions
SANKEY
CHORD
NETWORK
CIVIO fa servir el sankey vertical per explicar el "trajecte" de les sol·licituds d'Ingrés Mínim Vital
Visualització de dades
Getting to the point
Què fem quan tenim moltes dades? Com les hauríem de visualitzar?
Identificar el propòsit de la teva visualització: explicació o exploració?
Saber quines dades tens, i si funcionen pel propòsit
Identificar l'audiència i dissenyar el gràfic d'acord amb ella
Adaptar el disseny a l'espai (Desktop, mòbil, tablet, paper..)
Visualització de dades
Permeten comparacions exactes
Permeten comparacions
aproximades
Visualització de dades
Visualització de dades
Crear un gràfic és un procès circular:
Produïr, revisar i refinar
Visualització de dades
Data-ink ratio (E.Tufte)
Eliminar dades redundants
No mentir
Mostrar com més dades millor (no tallar eixos)
Assegurar la llegibilitat
Ordenar i alinear
Escollir el gràfic més apropiat
Color: no utilitzar colors a la lleugera i crear consistència
Visualització de dades
La relació de dades-tinta (data-ink ratio) és la proporció de tinta que s'utilitza per presentar dades reals en comparació amb la quantitat total de tinta (o píxels) utilitzada en tota la pantalla.
No obligar a girar el cap
Integrar la llegenda dins del gràfic, si es pot
Utilitzar anotacions per afegir valor i ressaltar 'outliers'
Visualització de dades
via Víctor Pascual
Visualització de dades
via Víctor Pascual
Visualització de dades
via Víctor Pascual
Visualització de dades
12/01/2022
Visualització de Dades
Visualització de Dades
Visualització de Dades
Utilitzat per molts mitjans:
- El País
- Eldiario.es
- The New York Times
- Sentit Crític
- Thompson Reuters...
Recursos Datawrapper Academy i River Chart
És bastant flexible
És mobile responsive
Compte amb el format de les dades. S'han de preparar d'acord amb el gràfic que volem fer.
Visualització de Dades
negreta: <b> text en negreta </b>
salt de línia: <br>
text de color específic: <span style="color:#56436">text</span>
fons del text de color: <span style="background-color:#56436">text</span>
text gran: <big>text</big>
text gran: <span style=font-size:110%">text</span>
línia horitzontal: <hr>
També podem aplicar estils html dins de les caselles d'anotacions (negretes, colors de text-fons, mida..)
Sempre que afegim text o fletxes, comprovar com es veu en versió mòbil, i decidir si incloure-la o no.
Visualització de Dades
dataset de prova:
Asuntos incoados, denunciados por violencia de género, por CCAA y edad
Exercici: Evolució per edats a Catalunya, afegir una anotació
Visualització de Dades
Visualització de Dades
Visualització de Dades
dataset de prova:
Infracciones penales imputadas al denunciado según tipo de infracción
Visualització de Dades
Tema:
Terrasses extra a la ciutat de Barcelona
Exercici
Buscar les dades
Pensar tres temes en grup
Per parelles, crear un gràfic d'un dels temes amb datawrapper o RAWGraphs
Publicar l'article
Visualització de Dades
Visualització de Dades
d3.js = data-driven-documents
Manipulació eficient de documents basats en dadades
Mike Bostock
JAVASCRIPT
CSS
HTML
D3.JS
Visualització de Dades
d3.js = data-driven-documents
Four Ways to Slice Obama’s 2013 Budget Proposal, The New York Times
Visualització de Dades
D3.js és una llibreria de Javascript que permet manipular elements d'una pàgina web (DOM).
Aquí podem trobar exemples de gràfics amb D3 que podem modificar:
Tutorial d'introducció a D3:
https://square.github.io/intro-to-d3/web-standards/
Guided tour:
https://observablehq.com/@enjalot/touring-the-d3-ecosystem
19/01/2022
Visualització de Dades
27/01/2022
Visualització de Dades
Visualització de Dades
Visualització de Dades
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/
Visualització de Dades
Visualització de Dades
Visualització de Dades
Dades:
Exceso de mortalidad por países
Gràfic de línies
Visualització de Dades
Visualització de Dades
Dades:
Fuerza militar (Global Fire Power)
Gràfic de cercles
Visualització de Dades
Visualització de Dades
Visualització de Dades
RTS. Radio Television Suisse
Reuters. World’s biggest iceberg heads for disaster
Visualització de Dades
punts
coordenades
regions/polígons
'constel·lació' de coordenades
Visualització de Dades
Latitude | Longitude | name |
---|---|---|
42.061201860 | -0.490321024 | point1 |
38.887787884 | -1.537996281 | point2 |
38.696322447 | -9.137571576 | point3 |
geometry | name |
---|---|
polygon | region1 |
multipolygon | region2 |
polygon | region3 |
-0.48576,38.00000;-1.5600786,38.547564;-0.496745634,37.058475, etc.
Visualització de Dades
JSON (acronym of JavaScript Object Notation). És un format de text simple per a l'intercanvi de dades.
CSV (Comma Separated Values)
TSV (Tabulator Separated Values)
Excel
GeoJSON. El mateix que un JSON pero dissenyat per representar geometries vectorials.
Altres: XML, KML
SHP (Shapefile)
Visualització de Dades
Les dades geolocalitzades dibuixen punts o formes i emmagatzemen informació per a cada un d'aquests punts o regions.
Visualització de Dades
Visualització de Dades
· Geographical Institutes websites / Open Data
http://centrodedescargas.cnig.es/CentroDescargas/index.jsp
Fonts de dades geolocalitzades
Projeccions
Visualització de Dades
Visualització de Dades
Visualització de Dades
Dades:
The Migrants Files
Mapa de punts
Visualització de Dades
3/02 - Ferran Morales
Instal·lar Illustrator si no el teniu
Exercici: agafar un dataset i fer un gràfic amb Flourish. Entregar el link dijous 03/02
03/02/2022
Visualització de Dades
02/02/2022
Infografía y Visualización de Datos
10/02/2022
Visualització de Dades
Visualització de Dades
Latitude | Longitude | name |
---|---|---|
42.061201860 | -0.490321024 | point1 |
38.887787884 | -1.537996281 | point2 |
38.696322447 | -9.137571576 | point3 |
geometry | name |
---|---|
polygon | region1 |
multipolygon | region2 |
polygon | region3 |
-0.48576,38.00000;-1.5600786,38.547564;-0.496745634,37.058475, etc.
Visualització de Dades
JSON (acronym of JavaScript Object Notation). És un format de text simple per a l'intercanvi de dades.
CSV (Comma Separated Values)
TSV (Tabulator Separated Values)
Excel
GeoJSON. El mateix que un JSON pero dissenyat per representar geometries vectorials.
Altres: XML, KML ,TopoJSON
SHP (Shapefile)
Visualització de Dades
Visualització de Dades
Visualització de Dades
Mapes de
punts
Busquem dades a OpenDataBCN
Geolocalitzem amb Geocoder (o amb un altre eina)
Exercici: Mapa accidents de patinet
Si són pocs, datawrapper geolocalitza
Visualització de Dades
Mapes de coropletes
Visualització de Dades
[17:40]
Escala categòrica: categories d'elements
Escala seqüencial: valors (de menys a més)
Escala divergent: positiu, negatiu i terme mig
Visualització de Dades
Mapa de regions
barris
Dades per barris de Barcelona
Fem servir un mapa base de Datawrapper
Visualització de Dades
Regions de
Catalunya
Dades:
I quan volem fer un mapa que
no està a DW?
Busquem les regions per una banda i les dades per l'altra. Després les unim.
Anna Thieme
fet amb datawrapper!
https://blog.datawrapper.de/la-palma-volcano-eruption-map/
· Geographical Institutes websites / Open Data
http://centrodedescargas.cnig.es/CentroDescargas/index.jsp
Fonts de dades geolocalitzades
https://academy.datawrapper.de/article/134-what-to-consider-when-creating-choropleth-maps
What to consider when creating choropleth maps, Datawrapper
https://blog.datawrapper.de/beautifulcolors/
How to pick more beautiful colors for your data visualizations, Lisa Charlotte Rost (Datawrapper)
Outlier Conference 2021, Data Visualization Society
Pràctica
17/02/2022
Visualització de Dades
Visualització de Dades
Aconseguir dades per regions
Buscar un SHP o GeoJSON
Convertir amb Mapshaper (si cal)
Canviar la projecció a proj wgs84 i simplificar
Carregar GeoJSON i dataset al programa (Datawrapper o Flourish)
Visualització de Dades
13F: Dades de les eleccions de CyL
Quin ha sigut el % de votants de España Vaciada i Soria YA!
Exercici
Buscar el mapa de seccions censals de Castilla y León, processar-lo i fer el mapa amb Flourish
Visualització de Dades
Programes com Datawrapper o Flourish estan bé, però són limitats.
Tothom pot crear un gràfic amb DW en qüestió de minuts, però amb {ggplot2} podem crear els nostres propis gràfics.
La corba d'aprenentatge de la programació és molt gran, però {ggplot2} és molt accessible i es basa en un sistema intuïtiu.
Visualització de Dades
{ggplot2} és un paquet de visualització de dades per al llenguatge de programació R creat per Hadley Wickham.
Està dissenyat per funcionar de manera iterativa: comencem amb una capa que mostra les dades en brut i afegim capes d'anotacions i resums estadístics.
Exemples investigació
Dominic Royé
Exemples investigació
Dominic Royé
Exemples investigació
Dominic Royé
Exemples mitjans
FiveThirtyEight
Exemples comunitat #R
Cédric Scherer
Generative Art
Visualització de Dades
Paquets d'R per visualitzar dades (entre d'altres):
{ggplot2} crea visualitzacions de dades basades en el 'grammar of graphics' {ggstream} crea streamgraphs {patchwork} combina diferents gràfics {cowplot} combina gràfics, text i imatges {ggplotly} converteix els gràfics en interactius {RColorBrewer} ofereix paletes de colors {leaflet} crea mapes amb una llibrería JS {tmap & tmaptools} llegeix Shapefiles i uneix dades geogràfiques {shiny} converteix R en aplicacions web
Comencem?
Document amb tots els passos
24/02/2022
Visualització de Dades
Visualització de Dades
Reuters Graphics: Russian gas threat in Europe
El Páis: El ataque de Rusia, en Mapas
The New York Times: Maps: Tracking the Russian Invasion of Ukraine
Visualització de Dades
Construir un gràfic per capes
Canviar la forma i els colors
Establir un tema principal pels gràfics
Guardar el gràfic
Visualització de Dades
Comencem?
Visualització de Dades
03/03/2022
Visualització de Dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
Visualització de Dades
10/03/2022
Visualització de Dades
17/03/2022
Visualització de Dades
Visualització de Dades
Visualització de Dades
com afegir popups amb Javascript
Visualització de Dades
com fer ombres en els mapes
Visualització de Dades
crear tooltips
Visualització de Dades
Com incrustar el mapa
Visualització de Dades
24/03/2022
Visualització de Dades