Visualizzare	cose	con	i	dati	
	Alessio	 	Cimarelli	@jenkin27
	 	www.dataninja.it
	#SOD14	-	Bologna,	30	marzo	2014
Dati
Sono	entità	misurabili	con	un	significato	relativo	al	contesto
in	cui	si	presentano	o	vengono	raccontate.
Per	compren...
Immagini	
	Aristotele,	Metafisica,	Incipit	(IV	secolo	a.C.)	
Tutti	gli	uomini	tendono	per	natura	al
sapere.	Lo	segnala	il	...
Grafica	e	geometria	
Spessore	del	bordo
Colore	del	bordo
Colore	del	riempimento
Trasparenza
Posizione	del	centro
Lunghezza...
Visualizzare	i	dati	
	Dati	in	una	mano,	immagini	nell'altra	
	Dati	rappresentati	da	numeri,	
	parametri	grafici	misurati	c...
Data-Driven	Documents
HTML	&	SVG
+
CSS
+
Javascript
	Generare	e	manipolare	pagine	web	in	base	a		un
dataset,	definendo	la	...
Grafici	base
Grafico	di	dispersione
È	il	più	semplice	per	evidenziare	una	dipendenza	tra	due
variabili	(correlazione).	Almeno	una	deve	...
Grafico	di	dispersione
Grafico	a	linee
Il	più	usato	per	mostrare	gli	andamenti	nel	tempo.	Utile
quando	si	sa	quale	variabile	è	dipendente	e	quale...
Grafico	a	linee
Get	the	data...
Istogramma
Quando	si	vogliono	confrontare	i	valori	di	una	variabile	che
non	hanno	una	relazione	reciproca	tra	loro	(variab...
Grafico	a	barre	orizzontali
Questa	variante	è	molto	utile	se	si	hanno	molte	etichette
lunghe	da	mostrare.	Si	adatta	anche	...
Grafico	a	barre
	Open	Spending	Bologna	2012...
Torte	e	ciambelle
Da	usare	solo	per	mostrare	dati	che	sommati	insieme
rappresentano	un	totale	(e	presi	singolarmente
rappr...
Torte	e	ciambelle
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	develo...
Le	reti
Una	visualizzazione	a	rete	è	adatta	per	evidenziare	rapporti
reciproci	(relazioni)	tra	oggetti.
Sono	necessari	due...
Le	reti
Gephi...
Le	mappe
La	rappresentazione	di	dati	geografici	avviene	in	tre
modalità	differenti:
Punti	-	Luoghi	geografici	con	specific...
I	luoghi
Si	mormora	tra	i	bene	informati	che	la	Terra	non	sia	piatta...
ma	viviamo	comunque	in	due	dimensioni!
Due	dimensi...
Le	choropleth
Quando	i	dati	si	riferiscono	a	territori	estesi	(province,
regioni,	nazioni),	quindi	a	delle	superfici,	si	p...
Un	esempio:	le	slot	machine
Nel	2013	lo	Stato	Italiano,	attraverso	l'AAMS,	ha	autorizzato
684	esercizi	commerciali	a	insta...
Google	Fusion	Tables
'na	mezza	ciofeca...
Vero	verissimo,	ma	è	semplice,	gratuito	e	geocodifica	senza
grandi	limiti	(purch...
CartoDB
CartoDB	is	a	cloud	based	mapping,	analysis	and
visualization	engine	that	lets	users	build	spatial	applications
for...
D3.js
D3.js	is	a	JavaScript	library	for
manipulating	documents	based	on	data.
D3	helps	you	bring	data	to	life	using
HTML,	...
Dal	Ph.D.	al	New	York	Times
,	insieme	al	Prof.	Jeff	Heer	e	a	Vadim
Ogievetsky,	un	altro	studente,	pubblica	la
libreria	Pro...
Selezionare	e	associare	
Il	selettori	sono	quelli	CSS,	elementi	e	attributi	sono	quelli
HTML	e	SVG	così	come	definiti	dal	...
Creare,	aggiornare,	distruggere
Il	cuore	della	libreria	sta	nella	capacità	di	associare	i	nostri
dati	(tipicamente	array)	...
Associazione	per	chiave
Il	metodo	data()	associa	i	dati	agli	elementi	del	DOM.	Può
farlo	per	indice,	ma	anche	per	chiave.	...
Associazione	per	chiave	(2)
Il	metodo	data()	associa	i	dati	agli	elementi	del	DOM.	Può
farlo	per	indice,	ma	anche	per	chia...
Nulla	è	istantaneo
La	libreria	è	in	grado	di	interpolare	i	valori	della	maggior
parte	degli	attributi	numerici	definiti	ne...
Il	mondo	è	fatto	a	scale
Non	basta	associare	una	serie	di	dati	a	specifici	elementi	del
DOM	e	modificarne	direttamente	gli...
Il	mondo	è	fatto	a	scale	(2)
I	dati	possono	avere	domini	continui	(numeri	reali)	o	discreti
(categorie).
Gli	attributi	deg...
Metodi	di	base
Una	volta	selezionati	gli	elementi	del	DOM,	la	libreria	offre
metodi	per	crearli	/	distruggerli,	riordinarl...
Metodi	di	base	(2)
D3	non	è	una	libreria	per	la	manipolazione	di	dataset,	ma
include	una	serie	completa	di	metodi	utili	pe...
Metodi	di	base	(3)
L'accoppiata	HTML5	+	CSS3	è	graficamente	molto	potente,
ma	non	può	essere	versatile	quanto	un'applicazi...
Layouts
Il	cuore	della	libreria	agisce	a	un	livello	molto	basso:	dati,
elementi,	attributi.
Ma	ci	sono	visualizzazioni	che...
Geo
Dalla	versione	3.0	la	parte	di	manipolazione	di	dati
geografici	si	è	sviluppata	enormemente.
Il	metodo	d3.geo()	permet...
Plugins
Come	ogni	libreria	javascript	che	si	rispetti,	anche	D3	può
essere	arricchita	da	plugin	dedicati.
Quelli	ufficiali...
Basato	su	D3
La	libreria	ha	raggiunto	un	tale	successo	che	ormai	esistono
molti	progetti	D3-based.
	-	Grandi	dataset	e	das...
Bastano	~2000	esempi?
	http://christopheviau.com/d3list/gallery.html
Senza	dimenticare	il	 	e	la	 ...sito	ufficiale docume...
RAW
The	missing	link	between	spreadsheets	and	vector	graphics.
Grazie	#SOD!
Alessio	Cimarelli
@jenkin27
www.dataninja.it
Newsletter
http://newsletter.dataninja.it/lists/
Q&A
http://www....
Upcoming SlideShare
Loading in...5
×

Data Visualization Lab - #SOD14 - Bologna - 30 marzo 2014

418

Published on

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

Published in: Data & Analytics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
418
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Data Visualization Lab - #SOD14 - Bologna - 30 marzo 2014

  1. 1. Visualizzare cose con i dati Alessio Cimarelli @jenkin27 www.dataninja.it #SOD14 - Bologna, 30 marzo 2014
  2. 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. 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. 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. 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. 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. 7. Grafici base
  8. 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. 9. Grafico di dispersione
  10. 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. 11. Grafico a linee Get the data...
  12. 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. 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. 14. Grafico a barre Open Spending Bologna 2012...
  15. 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. 16. Torte e ciambelle
  17. 17. La tabella Contiene tutti i dati ed è molto compatta. Eventuali formattazioni delle celle possono aiutare la lettura.
  18. 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. 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. 20. Le reti Gephi...
  21. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 43. Bastano ~2000 esempi? http://christopheviau.com/d3list/gallery.html Senza dimenticare il e la ...sito ufficiale documentazione
  44. 44. RAW The missing link between spreadsheets and vector graphics.
  45. 45. Grazie #SOD! Alessio Cimarelli @jenkin27 www.dataninja.it Newsletter http://newsletter.dataninja.it/lists/ Q&A http://www.dataninja.it/qa/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×