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