visualizzare i dati con d3js
DESCRIPTION
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 "Un’iniziativa 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.TRANSCRIPT
VisualizzareidaticonD3jsAlessioCimarelli( )@jenkin27
www.dataninja.it
Bari,23novembre2013
DatiUndato(dallatinodatumchesignificaletteralmentefatto)èunadescrizioneelementare,
spessocodificata,diunacosa,diunatransazione,diunavvenimento.
L'elaborazionedeidatipuòportareallaconoscenzadiun'informazione.
Ognitipodidatodipendedalcodiceedalformatoimpiegati.
Idatipossonopresentarsisottodiverseforme(Wikipediadixit)
Sonoentitàmisurabiliconunsignificatorelativoalcontestoincuisipresentanoovengonoraccontate.
Percomprenderliemanipolarliènecessariorappresentarli!
Rappresentareidati
Numeriecollezionidinumeri
Unitàdimisura
Relazioni
Logicaformale,matematica,statistica...
Immagini
Aristotele,Metafisica,Incipit(IVsecoloa.C.)
Tuttigliuominitendonopernaturaalsapere.Losegnalaillorol'amoreperlesensazioni,amatepersestesse,
indipendentementedall'utilità,preferitatratuttelavista,nonsoloinvista
dell'azione,maanchesenzaintenzionepratica.Ilmotivoèche,mostrandolamolteplicitàdelledifferenze,lavistafaacquisirepiùdellealtresensazioni
[nuove]conoscenze.
Elementigrafici
GraficaegeometriaSpessoredelbordoColoredelbordoColoredelriempimentoTrasparenzaPosizionedelcentroLunghezzadelraggio(lunghezzadegliassi)(angolodirotazione)
Ognielementograficoèunivocamentedefinitodauncertonumerodiparametri
Arte...?
Visualizzareidati
Datiinunamano,immagininell'altra
Datirappresentatidanumeri,parametrigraficimisuraticonnumeri
Lachiavestanelconnettereopportunamenteidatiaiparametrideglielementidavisualizzare
Data-DrivenDocuments
HTML&SVG+
CSS+
Javascript
Generareemanipolarepaginewebinbaseaundataset,definendolaconnessionetradatie
attributideglielementiXML
D3.jsD3.jsisaJavaScriptlibraryfor
manipulatingdocumentsbasedondata.D3helpsyoubringdatatolifeusing
HTML,SVGandCSS.D3’semphasisonwebstandardsgivesyouthefull
capabilitiesofmodernbrowserswithouttyingyourselftoaproprietaryframework,
combiningpowerfulvisualizationcomponentsandadata-drivenapproach
toDOMmanipulation.
DalPh.D.alNewYorkTimes
,insiemealProf.JeffHeereaVadimOgievetsky,unaltrostudente,pubblicala
libreriaProtoVispervisualizzazioniinterattiveduranteilsuocorsodidottorato(2009).
MikeBostocks
Nel2011itrereimplementanotuttoenasceD3:propostainun ,èarrivataoggialla ,da
sempreopen-source.papersuunIEEE versione3.3.10
Dall'ambienteaccademico,Mikeentranegliufficidellagrandeeditoriainternazionale.
SelezionareeassociareIlselettorisonoquelliCSS,elementieattributisonoquelli
HTMLeSVGcosìcomedefinitidalW3C.
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){returnd+"px";});
Creare,aggiornare,distruggereIlcuoredellalibreriastanellacapacitàdiassociareinostridati(tipicamentearray)aelementidelDOMpermettendodiaccedereaquellimodificati,aquellinonancoraesistenti,a
quellinonpiùutili.
varp=d3.select("body").selectAll("p").data([4,8,12,16,24,36]).enter().append("p").style("font-size",function(d){returnd+"px";}).text(function(d){return"Sonogrande"+d+"px";});
p.data([36,24,16,12,8,4]).style("font-size",function(d){returnd+"px";});
p.data([16,12,8]).exit().remove();
AssociazioneperchiaveIlmetododata()associaidatiaglielementidelDOM.Può
farloperindice,maancheperchiave.
varsizes=[{id:"a",size:12},{id:"b",size:16},{id:"c",size:24}];
varp=d3.select("body").selectAll("p").data(sizes).enter().append("p").style("font-size",function(d){returnd.size+"px";}).text(function(d){return"Sono"+d.id+"esonogrande"+d.size+"px";});
Associazioneperchiave(2)Ilmetododata()associaidatiaglielementidelDOM.Può
farloperindice,maancheperchiave.varnewSizes=[{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){returnd.id;}).style("font-size",function(d){returnd.size+"px";}).text(function(d){return"Sonosempre"+d.id+",maorasonogrande"+d.size+"px";});p.enter().append("p").style("font-size",function(d){returnd.size+"px";}).text(function(d){return"Sono"+d.id+"esonogrande"+d.size+"px";});p.exit().remove();
NullaèistantaneoLalibreriaèingradodiinterpolareivaloridellamaggior
partedegliattributinumericidefinitinell'HTMLesoprattuttonell'SVG.
varp=d3.select("body").selectAll("p").data([4,8,12,16,24,36]).enter().append("p").style("font-size","0px").text(function(d){return"Sonogrande"+d+"px";});
p.transition().duration(750).delay(function(d,i){returni*10;}).style("font-size",function(d){returnd+"px";});
IlmondoèfattoascaleNonbastaassociareunaseriedidatiaspecificielementidel
DOMemodificarnedirettamentegliattributi.
Ildominiodeinostridatipotrebbenonesseredirettamentecompatibileconl'intervalloincuisonodefinitiivaloridegli
attributi.
Es.Hoglistipendideiministriecivogliofareungraficoabarre"ministro->stipendioin
euro".Sel'altezzadellebarreèugualeallostipendioinpixel,mibucanoilsoffitto!
Hobisognodifunzionidiscala
Ilmondoèfattoascale(2)Idatipossonoaveredominicontinui(numerireali)odiscreti
(categorie).
GliattributideglielementiHTMLoSVGsonosemprediscreti(pixel!)ehannounintervallolimitato(risoluzione
delloschermo,codiciesadecimali,ecc.).
Neancheadirlo,D3hamoltimetodiperdefiniretrasformazioniopportunedeidati,siachesitrattididominicontinui(scalelineari,apotenza,logaritmiche,quantizzate,
temporali)odidominidiscreti.
Metodidibase
UnavoltaselezionatiglielementidelDOM,lalibreriaoffremetodipercrearli/distruggerli,riordinarli,modificare/
animareiloroattributi,associarvieventi,applicarvifunzioni.
Tuttoruotaattornoad3.selectAll([selettore]).
Eilchainingfornisceun'interfacciasempliceepulita!
Metodidibase(2)
D3nonèunalibreriaperlamanipolazionedidataset,maincludeunaseriecompletadimetodiutilipergestiree
manipolaregliarray.
Hatuttociòcheserveperrecuperaredatidasorgentiremote:XMLHttpRequestrulez!
Èingradodieffettuareilparsingdeipiùcomuniformatiperloscambiodidati:csv,tsvevolendo*sv(oltrealjsone
formatibasatisudiesso,ovviamente).
Metodidibase(3)L'accoppiataHTML5+CSS3ègraficamentemoltopotente,manonpuòessereversatilequantoun'applicazioneXML
dedicataallagraficavettoriale.
D3nasceconilpienosupportoallespecifichedell'SVGeconmoltimetodiperlagenerazioneelamanipolazionedioggetticomelinee,archi,curvediBézier,simboli,ecc.
LayoutsIlcuoredellalibreriaagisceaunlivellomoltobasso:dati,
elementi,attributi.
Macisonovisualizzazionicherichiedonospecifichemanipolazionideidatiecalcoliperladeterminazionedell'aspettograficodeivarielementi(torte,barre
raggruppate,grafi,alberi,clustering,gerarchie,ecc.).
Lacomponented3.layouts()hametodicheimplementanonumerosialgoritmiutili.
Geo
Dallaversione3.0lapartedimanipolazionedidatigeograficisièsviluppataenormemente.
Ilmetodod3.geo()permettedilavorareconleproiezioni,visualizzareemanipolareelementiespressiincoordinategeografiche,applicaretrasformazioniallegeometrie.
Ok,chiedovenia,questarobachiedetelaa !napo
Plugins
Comeognilibreriajavascriptchesirispetti,ancheD3puòesserearricchitadaplugindedicati.
Quelliufficialisonositrovanonelrepository.https://github.com/d3/d3-plugins
Manonsonomoltiesonopococommentati...:(
BasatosuD3Lalibreriaharaggiuntountalesuccessochecomincianoa
spuntaremoltiprogettiD3-based.
-Grandidatasetedashboardcomposite-Graficiriutilizzabili-Frameworkpercostruiregraficiriutilizzabili-Toolkitgraficoperjavascript-Datavizin3dimensioni!-Graficiinterattiviin4passi
-Vizcomplesseperdesigner-MioportingsuframeworkEnyo.js(appena
cominciato...)
DC.jsNVD3.jsd3.chartRickshawD3+Three.jsDatawrapperRawd3js4enyo
Bastano~2000esempi?
http://christopheviau.com/d3list/gallery.html
Senzadimenticareil ela ...sitoufficiale documentazione
Eoraavoi!
https://drive.google.com/folderview?id=0B6j_-GzOiSPsR2RPc0ZxNlZLd0U&usp=sharing
PergiocareconD3bastauneditorditesto( )eunbrowser( ).Oppure ...
notepad++chrome jsFiddle