VisualizzarecoseconidatiAlessio Cimarelli@jenkin27
www.dataninja.it
#SOD14-Bologna,30marzo2014
Dati
Sonoentitàmisurabiliconunsignificatorelativoalcontestoincuisipresentanoovengonoraccontate.
Percomprenderliemanipolarliènecessariorappresentarli!
Numeriecollezionidinumeri,unitàdimisura,relazioni...equindilogicaformale,matematica,statistica...
Immagini
Aristotele,Metafisica,Incipit(IVsecoloa.C.)
Tuttigliuominitendonopernaturaalsapere.Losegnalailloroamoreperlesensazioni,amatepersestesse,
indipendentementedall'utilità,preferitatratuttelavista,nonsoloinvista
dell'azione,maanchesenzaintenzionepratica.Ilmotivoèche,mostrandolamolteplicitàdelledifferenze,lavistafaacquisirepiùdellealtresensazioni
[nuove]conoscenze.
GraficaegeometriaSpessoredelbordoColoredelbordoColoredelriempimentoTrasparenzaPosizionedelcentroLunghezzadelraggio(lunghezzadegliassi)(angolodirotazione)
Ognielementograficoèunivocamentedefinitodauncertonumerodiparametri
Visualizzareidati
Datiinunamano,immagininell'altra
Datirappresentatidanumeri,parametrigraficimisuraticonnumeri
Lachiavestanelconnettereopportunamenteidatiaiparametrideglielementidavisualizzare
Data-DrivenDocuments
HTML&SVG+
CSS+
Javascript
Generareemanipolarepaginewebinbaseaundataset,definendolaconnessionetradatie
attributideglielementiXML
Graficibase
GraficodidispersioneÈilpiùsempliceperevidenziareunadipendenzatraduevariabili(correlazione).Almenounadevepossedereun
ordinamentointrinseco.
Idatisonolegatiallecoordinate(x,y)deipunti.
Graficodidispersione
GraficoalineeIlpiùusatopermostraregliandamentineltempo.Utile
quandosisaqualevariabileèdipendenteequaleindipendente(ordineintrinseco).
Ugualealgraficoadispersione,maipuntisonocollegatidalineeenonsipossonoscambiaregliassi.
Graficoalinee
Getthedata...
IstogrammaQuandosivoglionoconfrontareivaloridiunavariabileche
nonhannounarelazionereciprocatraloro(variabileindipendentenonordinata)èpreferibileutilizzareunistogrammapiuttostocheungraficoapuntioalinee.
Idatisonolegatiall'altezzadellebarre.
GraficoabarreorizzontaliQuestavarianteèmoltoutilesesihannomolteetichettelunghedamostrare.Siadattaanchemeglioallosviluppo
verticaledellepagineweb.
Idatisonolegatiallalunghezzadellebarre.
Graficoabarre
OpenSpendingBologna2012...
TorteeciambelleDausaresolopermostraredatichesommatiinsieme
rappresentanountotale(epresisingolarmenterappresentanotuttelepartideltotale).
Idatisonolegatiall'angolodeisettoricircolari.Ilraggiononconta!
Torteeciambelle
LatabellaContienetuttiidatiedèmoltocompatta.Eventualiformattazionidellecellepossonoaiutarelalettura.
DatawrapperDatawrapperisanon-commercial,opensourcesoftware,
licensedunder .theMITLicense
DatawrapperwasdevelopedforABZV,ajournalismtrainingorganizationaffiliatedtoBDVZ(GermanAssociationof
NewspaperPublishers).
LeretiUnavisualizzazioneareteèadattaperevidenziarerapporti
reciproci(relazioni)traoggetti.
Sononecessaridueingredienti:
inodi,individuatidaunidunicoecaratterizzatidavariparametri;icollegamenti,individuatidaunacoppiaordinatadinodiecaratterizzatialorovoltadavariparametri.
Lereti
Gephi...
LemappeLarappresentazionedidatigeograficiavvieneintre
modalitàdifferenti:
Punti-Luoghigeograficiconspecifichecoordinate(latitudineelongitudine)Linee-Seriedipunticollegati(strade,percorsi,…)Perimetri-Poligonichedefinisconodeterminatearee(quartieri,comuni,province,regioni,nazioni,…)
Iluoghi
SimormoratraibeneinformatichelaTerranonsiapiatta...maviviamocomunqueinduedimensioni!
Duedimensioni->Duecoordinate
Peridentificareunivocamenteunpuntosuunasuperficiecivoglionoduenumeri:latitudineelongitudine.
Esempio: ?dovesiamoinquestomomento44°29'47.2"N|11°20'45.1"E
Lechoropleth
Quandoidatisiriferisconoaterritoriestesi(province,regioni,nazioni),quindiadellesuperfici,sipossono
codificareneicoloridiriempimento.
Datonumerico->Scalacromatica
Ilmagicomondodeicolori:http://colorschemedesigner.com/http://colorbrewer2.org/
Unesempio:leslotmachineNel2013loStatoItaliano,attraversol'AAMS,haautorizzato
684esercizicommercialiainstallareslotmachineevideolotteries.
Getthedata...
LeslotaBologna
LaconcentrazionedelleslotinItalia
GoogleFusionTables'namezzaciofeca...
Veroverissimo,maèsemplice,gratuitoegeocodificasenzagrandilimiti(purchélecoordinatesiusinosolosulleGoogle
Maps).
LeslotaBologna
CartoDBCartoDBisacloudbasedmapping,analysisand
visualizationenginethatletsusersbuildspatialapplicationsforbothmobileandtheweb.
LaconcentrazionedelleslotinItalia
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.4.4
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.
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.
Plugins
Comeognilibreriajavascriptchesirispetti,ancheD3puòesserearricchitadaplugindedicati.
Quelliufficialisonositrovanonelrepository.https://github.com/d3/d3-plugins
BasatosuD3Lalibreriaharaggiuntountalesuccessocheormaiesistono
moltiprogettiD3-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
RAWThemissinglinkbetweenspreadsheetsandvectorgraphics.
Grazie#SOD!AlessioCimarelli
@jenkin27
www.dataninja.itNewsletter
http://newsletter.dataninja.it/lists/
Q&Ahttp://www.dataninja.it/qa/
Top Related