"Visualizzare cose con i dati" - Mini corso sulla data visualization nell'ambito del secondo raduno nazionale di Spaghetti Open Data insieme a Density Design: le basi della grafica web data-driven, grafici base con Datawrapper, reti con Gephi, mappe con CartoDB e Google Fusion Tables, grafici interattivi con D3js.

1. Visualizzare cose con i dati
Alessio Cimarelli @jenkin27
www.dataninja.it
#SOD14 - Bologna, 30 marzo 2014

2. Dati
Sono entità misurabili con un significato relativo al contesto
in cui si presentano o vengono raccontate.
Per comprenderli e manipolarli è necessario
rappresentarli!
Numeri e collezioni di numeri, unità di misura, relazioni... e
quindi logica formale, matematica, statistica...

3. Immagini
Aristotele, Metafisica, Incipit (IV secolo a.C.)
Tutti gli uomini tendono per natura al
sapere. Lo segnala il loro amore per
le sensazioni, amate per se stesse,
indipendentemente dall'utilità, preferita
tra tutte la vista, non solo in vista
dell'azione, ma anche senza intenzione
pratica. Il motivo è che, mostrando la
molteplicità delle differenze, la vista
fa acquisire più delle altre sensazioni
[nuove] conoscenze.

4. Grafica e geometria
Spessore del bordo
Colore del bordo
Colore del riempimento
Trasparenza
Posizione del centro
Lunghezza del raggio
(lunghezza degli assi)
(angolo di rotazione)
Ogni elemento grafico è univocamente definito
da un certo numero di parametri

5. Visualizzare i dati
Dati in una mano, immagini nell'altra
Dati rappresentati da numeri,
parametri grafici misurati con numeri
La chiave sta nel connettere opportunamente i
dati ai parametri degli elementi da visualizzare

6. Data-Driven Documents
HTML & SVG
+
CSS
+
Javascript
Generare e manipolare pagine web in base a un
dataset, definendo la connessione tra dati e
attributi degli elementi XML

7. Grafici base

8. Grafico di dispersione
È il più semplice per evidenziare una dipendenza tra due
variabili (correlazione). Almeno una deve possedere un
ordinamento intrinseco.
I dati sono legati alle coordinate (x,y) dei punti.

9. Grafico di dispersione

10. Grafico a linee
Il più usato per mostrare gli andamenti nel tempo. Utile
quando si sa quale variabile è dipendente e quale
indipendente (ordine intrinseco).
Uguale al grafico a dispersione, ma i punti sono collegati da
linee e non si possono scambiare gli assi.

11. Grafico a linee
Get the data...

12. Istogramma
Quando si vogliono confrontare i valori di una variabile che
non hanno una relazione reciproca tra loro (variabile
indipendente non ordinata) è preferibile utilizzare un
istogramma piuttosto che un grafico a punti o a linee.
I dati sono legati all'altezza delle barre.

13. Grafico a barre orizzontali
Questa variante è molto utile se si hanno molte etichette
lunghe da mostrare. Si adatta anche meglio allo sviluppo
verticale delle pagine web.
I dati sono legati alla lunghezza delle barre.

14. Grafico a barre
Open Spending Bologna 2012...

15. Torte e ciambelle
Da usare solo per mostrare dati che sommati insieme
rappresentano un totale (e presi singolarmente
rappresentano tutte le parti del totale).
I dati sono legati all'angolo dei settori circolari.
Il raggio non conta!

16. Torte e ciambelle

17. La tabella
Contiene tutti i dati ed è molto compatta. Eventuali
formattazioni delle celle possono aiutare la lettura.

18. Datawrapper
Datawrapper is a non-commercial, open source software,
licensed under .the MIT License
Datawrapper was developed for ABZV, a journalism training
organization affiliated to BDVZ (German Association of
Newspaper Publishers).

19. Le reti
Una visualizzazione a rete è adatta per evidenziare rapporti
reciproci (relazioni) tra oggetti.
Sono necessari due ingredienti:
i nodi, individuati da un id unico e caratterizzati da vari
parametri;
i collegamenti, individuati da una coppia ordinata di nodi
e caratterizzati a loro volta da vari parametri.

20. Le reti
Gephi...

21. Le mappe
La rappresentazione di dati geografici avviene in tre
modalità differenti:
Punti - Luoghi geografici con specifiche coordinate
(latitudine e longitudine)
Linee - Serie di punti collegati (strade, percorsi, …)
Perimetri - Poligoni che definiscono determinate aree
(quartieri, comuni, province, regioni, nazioni, …)

22. I luoghi
Si mormora tra i bene informati che la Terra non sia piatta...
ma viviamo comunque in due dimensioni!
Due dimensioni -> Due coordinate
Per identificare univocamente un punto su una superficie ci
vogliono due numeri: latitudine e longitudine.
Esempio: ?dove siamo in questo momento
44°29'47.2" N | 11°20'45.1" E

23. Le choropleth
Quando i dati si riferiscono a territori estesi (province,
regioni, nazioni), quindi a delle superfici, si possono
codificare nei colori di riempimento.
Dato numerico -> Scala cromatica
Il magico mondo dei colori:
http://colorschemedesigner.com/
http://colorbrewer2.org/

24. Un esempio: le slot machine
Nel 2013 lo Stato Italiano, attraverso l'AAMS, ha autorizzato
684 esercizi commerciali a installare slot machine e
videolotteries.
Get the data...
Le slot a Bologna
La concentrazione delle slot in Italia

25. Google Fusion Tables
'na mezza ciofeca...
Vero verissimo, ma è semplice, gratuito e geocodifica senza
grandi limiti (purché le coordinate si usino solo sulle Google
Maps).
Le slot a Bologna

26. CartoDB
CartoDB is a cloud based mapping, analysis and
visualization engine that lets users build spatial applications
for both mobile and the web.
La concentrazione delle slot in Italia

27. D3.js
D3.js is a JavaScript library for
manipulating documents based on data.
D3 helps you bring data to life using
HTML, SVG and CSS. D3’s emphasis on
web standards gives you the full
capabilities of modern browsers without
tying yourself to a proprietary framework,
combining powerful visualization
components and a data-driven approach
to DOM manipulation.

28. Dal Ph.D. al New York Times
, insieme al Prof. Jeff Heer e a Vadim
Ogievetsky, un altro studente, pubblica la
libreria ProtoVis per visualizzazioni interattive durante il suo
corso di dottorato (2009).
Mike Bostocks
Nel 2011 i tre reimplementano tutto e nasce D3: proposta in
un , è arrivata oggi alla , da
sempre open-source.
paper su un IEEE versione 3.4.4
Dall'ambiente accademico, Mike entra negli uffici della
grande editoria internazionale.

29. Selezionare e associare
Il selettori sono quelli CSS, elementi e attributi sono quelli
HTML e SVG così come definiti dal W3C.
d3.selectAll("p").style("font-size", "12px");
d3.selectAll("p").style("font-size", function() {
return (Math.random() * 12) + "px";
});
d3.selectAll("p")
.data([4, 8, 12, 16, 24, 36])
.style("font-size", function(d) { return d + "px"; });

30. Creare, aggiornare, distruggere
Il cuore della libreria sta nella capacità di associare i nostri
dati (tipicamente array) a elementi del DOM permettendo di
accedere a quelli modificati, a quelli non ancora esistenti, a
quelli non più utili.
var p = d3.select("body").selectAll("p")
.data([4, 8, 12, 16, 24, 36])
.enter().append("p")
.style("font-size", function(d) { return d + "px"; })
.text(function(d) { return "Sono grande " + d + "px"; });
p.data([36, 24, 16, 12, 8, 4])
.style("font-size", function(d) { return d + "px"; });
p.data([16, 12, 8])
.exit()
.remove();

31. Associazione per chiave
Il metodo data() associa i dati agli elementi del DOM. Può
farlo per indice, ma anche per chiave.
var sizes = [
{ id: "a", size: 12},
{ id: "b", size: 16},
{ id: "c", size: 24}
];
var p = d3.select("body").selectAll("p")
.data(sizes)
.enter().append("p")
.style("font-size", function(d) { return d.size + "px"; })
.text(function(d) {
return "Sono " + d.id + " e sono grande " + d.size + "px";
});

32. Associazione per chiave (2)
Il metodo data() associa i dati agli elementi del DOM. Può
farlo per indice, ma anche per chiave.
var newSizes = [
{ id: "b", size: 6}, // era { id: "a", size: 6},
{ id: "c", size: 8}, // era { id: "b", size: 8},
{ id: "d", size: 12} // era { id: "c", size: 12}
];
p.data(newSizes, function(d) { return d.id; })
.style("font-size", function(d) { return d.size + "px"; })
.text(function(d) {
return "Sono sempre "+d.id+", ma ora sono grande "+d.size+"px";
});
p.enter().append("p")
.style("font-size", function(d) { return d.size + "px"; })
.text(function(d) {
return "Sono " + d.id + " e sono grande " + d.size + "px";
});
p.exit().remove();

33. Nulla è istantaneo
La libreria è in grado di interpolare i valori della maggior
parte degli attributi numerici definiti nell'HTML e soprattutto
nell'SVG.
var p = d3.select("body").selectAll("p")
.data([4, 8, 12, 16, 24, 36])
.enter().append("p")
.style("font-size", "0px")
.text(function(d) { return "Sono grande " + d + "px"; });
p.transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.style("font-size", function(d) { return d + "px"; });

34. Il mondo è fatto a scale
Non basta associare una serie di dati a specifici elementi del
DOM e modificarne direttamente gli attributi.
Il dominio dei nostri dati potrebbe non essere direttamente
compatibile con l'intervallo in cui sono definiti i valori degli
attributi.
Ho bisogno di funzioni di scala

35. Il mondo è fatto a scale (2)
I dati possono avere domini continui (numeri reali) o discreti
(categorie).
Gli attributi degli elementi HTML o SVG sono sempre
discreti (pixel!) e hanno un intervallo limitato (risoluzione
dello schermo, codici esadecimali, ecc.).
Neanche a dirlo, D3 ha molti metodi per definire
trasformazioni opportune dei dati, sia che si tratti di domini
continui (scale lineari, a potenza, logaritmiche, quantizzate,
temporali) o di domini discreti.

36. Metodi di base
Una volta selezionati gli elementi del DOM, la libreria offre
metodi per crearli / distruggerli, riordinarli, modificare /
animare i loro attributi, associarvi eventi, applicarvi funzioni.
Tutto ruota attorno a d3.selectAll([selettore]).
E il chaining fornisce un'interfaccia semplice e pulita!

37. Metodi di base (2)
D3 non è una libreria per la manipolazione di dataset, ma
include una serie completa di metodi utili per gestire e
manipolare gli array.
Ha tutto ciò che serve per recuperare dati da sorgenti
remote: XMLHttpRequest rulez!
È in grado di effettuare il parsing dei più comuni formati per
lo scambio di dati: csv, tsv e volendo *sv (oltre al json e
formati basati su di esso, ovviamente).

38. Metodi di base (3)
L'accoppiata HTML5 + CSS3 è graficamente molto potente,
ma non può essere versatile quanto un'applicazione XML
dedicata alla grafica vettoriale.
D3 nasce con il pieno supporto alle specifiche dell'SVG e
con molti metodi per la generazione e la manipolazione di
oggetti come linee, archi, curve di Bézier, simboli, ecc.

39. Layouts
Il cuore della libreria agisce a un livello molto basso: dati,
elementi, attributi.
Ma ci sono visualizzazioni che richiedono specifiche
manipolazioni dei dati e calcoli per la determinazione
dell'aspetto grafico dei vari elementi (torte, barre
raggruppate, grafi, alberi, clustering, gerarchie, ecc.).
La componente d3.layouts() ha metodi che implementano
numerosi algoritmi utili.

40. Geo
Dalla versione 3.0 la parte di manipolazione di dati
geografici si è sviluppata enormemente.
Il metodo d3.geo() permette di lavorare con le proiezioni,
visualizzare e manipolare elementi espressi in coordinate
geografiche, applicare trasformazioni alle geometrie.

41. Plugins
Come ogni libreria javascript che si rispetti, anche D3 può
essere arricchita da plugin dedicati.
Quelli ufficiali sono si trovano nel repository
.https://github.com/d3/d3-plugins

42. Basato su D3
La libreria ha raggiunto un tale successo che ormai esistono
molti progetti D3-based.
- Grandi dataset e dashboard composite
- Grafici riutilizzabili
- Framework per costruire grafici riutilizzabili
- Toolkit grafico per javascript
- Data viz in 3 dimensioni!
- Grafici interattivi in 4 passi
- Viz complesse per designer
- Mio porting su framework Enyo.js (appena
cominciato...)
DC.js
NVD3.js
d3.chart
Rickshaw
D3+Three.js
Datawrapper
Raw
d3js4enyo

43. Bastano ~2000 esempi?
http://christopheviau.com/d3list/gallery.html
Senza dimenticare il e la ...sito ufficiale documentazione

44. RAW
The missing link between spreadsheets and vector graphics.

45. Grazie #SOD!
Alessio Cimarelli
@jenkin27
www.dataninja.it
Newsletter
http://newsletter.dataninja.it/lists/
Q&A
http://www.dataninja.it/qa/