Visualizzare i dati con D3js
description
Transcript of Visualizzare i dati con D3js
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