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.
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.
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.
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.
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!
La tabella
Contiene tutti i dati ed è molto compatta. Eventuali formattazioni delle celle possono aiutare la lettura.
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).
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, …)
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.
44°29'47.2" N | 11°20'45.1" E
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:
Un esempio: le slot machine
Nel 2013 lo Stato Italiano, attraverso l'AAMS, ha autorizzato 684 esercizi commerciali a installare slot machine e videolotteries.
Le slot a Bologna
La concentrazione delle slot in Italia
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
CartoDB
CartoDB is a cloud based mapping, analysis and visualization engine that lets users build spatial applications for both mobile and the web.
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.
Dal Ph.D. al New York Times
Mike Bostocks, 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).
Dall'ambiente accademico, Mike entra negli uffici della grande editoria internazionale.
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"; });
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();
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";
});
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();
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"; });
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
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.
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!
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).
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.
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.
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.
Plugins
Come ogni libreria javascript che si rispetti, anche D3 può essere arricchita da plugin dedicati.
Basato su D3
La libreria ha raggiunto un tale successo che ormai esistono molti progetti D3-based.
-
DC.js - Grandi dataset e dashboard composite
-
NVD3.js - Grafici riutilizzabili
-
d3.chart - Framework per costruire grafici riutilizzabili
-
Rickshaw - Toolkit grafico per javascript
-
D3+Three.js - Data viz in 3 dimensioni!
-
Datawrapper - Grafici interattivi in 4 passi
-
Raw - Viz complesse per designer
-
d3js4enyo - Mio porting su framework Enyo.js (appena cominciato...)