Visualizzare i dati con D3js
3 likes2,255 views
Lezione tenuta da Alessio Cimarelli (@jenkin27) su data visualization e uso della libreria javascript D3js nell'ambito dell'iniziativa di formazione Open data in ACTION! dei Laboratori dal Basso a Bari (23/11/2013). Versione interattiva con link: http://slid.es/dataninja/open-data-in-action-bari "Uniniziativa di formazione incentrata sulla tematica degli Open Data, rivolta ad imprenditori, innovatori, giornalisti e sviluppatori, professionisti del settore e non addetti ai lavori, organizzata dalle Associazioni AkuBari in collaborazione con OpenBSK, entrambe vincitrici di Principi Attivi 2012". Platea costituita principalmente da 30 studenti del quarto anno del liceo classico, poi giornalisti, docenti, sviluppatori, attivisti open data.
![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.)](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-4-320.jpg)
![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"; });](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-12-320.jpg)
![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();](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-13-320.jpg)
![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";
});](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-14-320.jpg)
![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();](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-15-320.jpg)
![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"; });](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-16-320.jpg)
![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!](https://image.slidesharecdn.com/open-data-in-action-bari-131125055012-phpapp02/85/Visualizzare-i-dati-con-D3js-19-320.jpg)
