Visualizzare i dati con D3js

Alessio Cimarelli (@jenkin27)

Bari, 23 novembre 2013

Dati

Un dato (dal latino datum che significa letteralmente fatto) è una descrizione elementare, spesso codificata, di una cosa, di una transazione, di un avvenimento.
L'elaborazione dei dati può portare alla conoscenza di un'informazione.
Ogni tipo di dato dipende dal codice e dal formato impiegati.
I dati possono presentarsi sotto diverse forme (Wikipedia dixit)

Sono entità misurabili con un significato relativo al contesto in cui si presentano o vengono raccontate.

Per comprenderli e manipolarli è necessario rappresentarli!

Rappresentare i dati



Numeri e collezioni di numeri

Unità di misura

Relazioni


Logica formale, matematica, statistica...

Immagini

Tutti gli uomini tendono per natura al sapere. Lo segnala il loro l'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.

Aristotele, Metafisica, Incipit (IV secolo a.C.)

Elementi grafici

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

Arte...?


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

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

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).

Nel 2011 i tre reimplementano tutto e nasce D3: proposta in un paper su un IEEE, è arrivata oggi alla versione 3.3.10, da sempre open-source.

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.

Es. Ho gli stipendi dei ministri e ci voglio fare un grafico a barre "ministro -> stipendio in euro". Se l'altezza delle barre è uguale allo stipendio in pixel, mi bucano il soffitto!

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.

Ok, chiedo venia, questa roba chiedetela a napo!

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.

Ma non sono molti e sono poco commentati... :(

Basato su D3

La libreria ha raggiunto un tale successo che cominciano a spuntare 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...)

Bastano ~2000 esempi?

Senza dimenticare il sito ufficiale e la documentazione...

E ora a voi!
https://drive.google.com/folderview?id=0B6j_-GzOiSPsR2RPc0ZxNlZLd0U&usp=sharing

Per giocare con D3 basta un editor di testo (notepad++) e un browser (chrome). Oppure jsFiddle...

Open data in Action - Laboratori dal basso - Bari - 23 novembre 2013

By Dataninja srls

Made with Slides.com

Open data in Action - Laboratori dal basso - Bari - 23 novembre 2013

"Visualizzare i dati con D3js" - Presentazione della lezione tenuta a Bari sulla data visualization e sulla libreria javascript D3.

  • 6,477

More from Dataninja srls