Data Visualization Lab - #SOD14 - Bologna - 30 marzo 2014
1 like852 views
Il documento esplora la visualizzazione dei dati, evidenziando l'importanza di rappresentare i dati per comprenderli e manipolarli in contesti significativi. Viene discusso l'uso di grafici e strumenti come D3.js per creare visualizzazioni interattive basate su dataset, oltre a diverse tecniche di visualizzazione quali grafici a dispersione, storicizzazioni e mappe geografiche. Si accenna inoltre alla manipolazione dei dati con metodi d3 e all'uso di plugin per ampliare le capacità della libreria.
![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.](https://image.slidesharecdn.com/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-3-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/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-29-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/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-30-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/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-31-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/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-32-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/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-33-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/data-viz-lab-sod14-140329215336-phpapp01/85/Data-Visualization-Lab-SOD14-Bologna-30-marzo-2014-36-320.jpg)
Data Visualization Lab - #SOD14 - Bologna - 30 marzo 2014
- 7. Grafici base
- 20. Le reti Gephi...
- 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.