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/