Your SlideShare is downloading. ×
0
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
D3.js workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

D3.js workshop

35,622

Published on

0 Comments
54 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
35,622
On Slideshare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
302
Comments
0
Likes
54
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. D3 WORKSHOP
  • 2. WEB STANDARDSD3 provides transformation; no new representation.
  • 3. MAPPING DATA TO ELEMENTSVisualisation requires visual encoding: mapping data to elements.
  • 4. NOTHING NEW D3 refers to Data-Driven DocumentsW3C Document Object Model.
  • 5. D3 = STANDARDSLearning D3 is largely learning web standards
  • 6. HTMLHTML5 Spechttp://www.w3.org/TR/html5/HTML5 for Developershttp://developers.whatwg.org/MDNhttps://developer.mozilla.org/en/HTMLDive Into HTML5http://diveintohtml5.info/
  • 7. HTML 5<DCYEhm>!OTP tl<eacast"t-"mt hre=uf8><oybd>Hlowrdel,ol!
  • 8. SVGSVG Spechttp://www.w3.org/TR/SVG/MDNhttps://developer.mozilla.org/en/SVGD3 API Referencehttps://github.com/mbostock/d3/wiki/SVG-Shapes
  • 9. SVG<DCYEhm>!OTP tl<eacast"t-"mt hre=uf8><v wdh"6"hih=50>sg it=90 egt"0" <ety"2> tx =1" Hlo wrd el, ol! <tx> /et<sg/v>
  • 10. SVG != HTML
  • 11. CSSCSS Spechttp://www.w3.org/TR/CSS2/Selectors Spechttp://www.w3.org/TR/selectors/
  • 12. CSS<DCYEhm> !OTP tl<eacast"t-" mt hre=uf8><tl> syebd {bcgon:selle } oy akrud tebu;<sye /tl><oy bd>Hlo wrd el, ol!
  • 13. JAVASCRIPTMDNhttps://developer.mozilla.org/en/JavaScriptDouglas Crockford’s JavaScript: The Good Partshttp://shop.oreilly.com/product/9780596517748.dohttp://javascript.crockford.com/
  • 14. JAVASCRIPT<DCYEhm>!OTP tl<eacast"t-"mt hre=uf8><oybd><citsrp> cnoelg"el,wrd"; osl.o(Hlo ol!)<srp>/cit
  • 15. STARTING WITH D3
  • 16. START SMALL<DCYEhm> !OTP tl<eacast"t-" mt hre=uf8><tl>*CS*<sye sye/ S //tl><oy bd><citsc"3v.s>/cit srp r=d.2j"<srp><cit/ JvSrp *<srp> srp>* aacit //cit
  • 17. DEVELOPER TOOLS
  • 18. DASHlatest version
  • 19. D3 RESOURCESD3 API Referencehttps://github.com/mbostock/d3/wiki/API-ReferenceD3 Wikihttps://github.com/mbostock/d3/wikiD3 Grouphttps://groups.google.com/group/d3-jsD3 Stack Overflowhttp://stackoverflow.com/questions/tagged/d3.js
  • 20. SELECTORS
  • 21. CSS SELECTORS pe cd { r, oe fn-aiy "el" mnsae otfml: Mno, oopc; fn-ie 4p; otsz: 8x } CSS style selectors#o fo / <n i=fo> / ay d"o"fo o / <o> / fo.o fo / <n cas"o" / ay ls=fo>[o=a] fobr / <n fo"a" / ay o=br>fobr o a / <o>br<fo / fo<a>/o>fobr o.a / <o cas"a" / fo ls=br>fobr o#a / <o i=br> / fo d"a"
  • 22. SELECTORS Javascriptdcmn.urSlcoAl"r,cd" ouetqeyeetrl(pe oe) jQuery$r,cd (pe oe) D3d.eetl(pe cd" 3slcAl"r, oe)
  • 23. SELECTIONS ARE ARRAYS/ slc al<ice eeet / eet l crl> lmnsvrcrl =d.eetl(crl"; a ice 3slcAl"ice)/ stsm atiue adsye / e oe trbts n tlscrl.tr"x,2) iceat(c" 0;crl.tr"y,1) iceat(c" 2;crl.tr"" 2) iceat(r, 4;crl.tl(fl" "e"; icesye"il, rd)
  • 24. METHOD CHAINING/ slc al<ice eeet / eet l crl> lmns/ adstsm atiue adsye / n e oe trbts n tlsd.eetl(crl" 3slcAl"ice) .tr"x,2) at(c" 0 .tr"y,1) at(c" 2 .tr"" 2) at(r, 4 .tl(fl" "e"; sye"il, rd)
  • 25. SELECTION.APPEND Single/ slc te<oy eeet / eet h bd> lmnvrbd =d.eet"oy) a oy 3slc(bd";/ ada <1 eeet / d n h> lmnvrh =bd.ped"1) a 1 oyapn(h";h.et"el!) 1tx(Hlo"; Collection/ slc al<eto>eeet / eet l scin lmnsvrscin=d.eetl(scin) a eto 3slcAl"eto";/ ada <1 eeett ec / d n h> lmn o ahvrh =scinapn(h"; a 1 eto.ped"1)h.et"el!) 1tx(Hlo";
  • 26. WARNING!!Use caution with method chaining: append returns a new selection! vrh =d.eetl(scin) a 1 3slcAl"eto" .tl(bcgon" "tebu" sye"akrud, selle) .ped"1) apn(h" .et"el!) tx(Hlo";
  • 27. DATA
  • 28. DATA ARE ARRAYS Selections are arrays Data are arrays Coincidence?
  • 29. DATA Numbers/ Abrcat pras / a hr, ehp?vrdt =[,1 2 3 5 8; a aa 1 , , , , ] Objects/ Asatrlt pras / ctepo, ehp?vrdt =[ a aa {:1.,y 91} x 00 : .4, {: 80 y 81} x ., : .4, {:1.,y 87} x 30 : .4, {: 90 y 87} x ., : .7, {:1.,y 92} x 10 : .6];
  • 30. DATA TO ELEMENTS Use data to create multiple elements. sgslcAl"ice) v.eetl(crl" .aadt) dt(aa .ne(.ped"ice) etr)apn(crl" .tr"x,x at(c" ) .tr"y,y at(c" ) .tr"" 25; at(r, .)We want the selection “circle” to correspond to data.
  • 31. .DATA() Use data to create multiple elements. vrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa;The data method computes the join, defining enter and exit.
  • 32. vrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa; crl.ne(.ped"ice) iceetr)apn(crl";Appending to the enter selection creates the missing elements.
  • 33. fnto xd {rtr dx } ucin () eun .; fnto yd {rtr dy } ucin () eun .; vrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa; crl.ne(.ped"ice) iceetr)apn(crl" .tr"x,x at(c" ) .tr"y,y at(c" ) .tr"" 25; at(r, .)The new elements are bound to data, so we can compute attributes.
  • 34. ENTER, UPDATE & EXIT Thinking with Joins
  • 35. ENTERNew data, for which there were no existing elements.
  • 36. When initializing, you might ignore update and exit. vrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa .ne(.ped"ice) etr)apn(crl" .tr"x,x at(c" ) .tr"y,y at(c" ) .tr"" 25; at(r, .)
  • 37. UPDATENew data that was joined successfully to an existing element.
  • 38. UPDATEWhen updating, you might ignore enter and exit. vrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa .tr"x,x at(c" ) .tr"y,y at(c" ) .tr"" 25; at(r, .)
  • 39. EXITExisting elements, for which there were no new data.
  • 40. EXITvrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa;crl.ne(.ped"ice) iceetr)apn(crl" .tr"x,x at(c" ) .tr"y,y at(c" ) .tr"" 25; at(r, .)
  • 41. ENTER + UPDATEEntering nodes are added to update on append.
  • 42. ENTER + UPDATEvrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa;crl.xt)rmv(; iceei(.eoe)
  • 43. KEY FUNCTION You can control the join;by default, the join is by index.
  • 44. / Asatrlt pras / ctepo, ehp? vrdt =[ a aa {ae "lc" x 1.,y 91} nm: Aie, : 00 : .4, {ae nm: "o" x 80 y 81} Bb, : ., : .4, {ae "ao" x 1.,y 87} nm: Crl, : 30 : .4, {ae "ae,x 90 y 87} nm: Dv" : ., : .7, {ae "dt" x 1.,y 92} nm: Eih, : 10 : .6 ];If needed, data should have a unique key for joining.
  • 45. fnto kyd {rtr dnm;} ucin e() eun .ae vrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt,ky dt(aa e) .tr"x,x at(c" ) .tr"y,y at(c" ) .tr"" 25; at(r, .)The key function returns a unique string for each datum.
  • 46. LOADING DATAD3 provides several convenience routines using XMLHttpRequest . CSV JSON
  • 47. D3 AND ARRAY
  • 48. D3 AND ARRAYJavaScript has a number of useful built-in array methods. array. {filter,map,sort,…}
  • 49. D3 also has a variety of data-transform methods; explore the API . d3. {nest,keys,values,…}
  • 50. SCALES
  • 51. DOMAIN => RANGEScales are functions that map from data-space to visual- space. fnto xd { ucin () rtr d*4 +"x; eun 2 p" }Scales are convenient but optional; you can roll your own.
  • 52. QUANTITATIVE SCALESMap a continuous (numeric) domain to a continuous range. linear sqrt pow log quantize threshold quantile identity
  • 53. vrx=d.cl.ier) a 3saelna( .oan[2 2] dmi(1, 4) .ag(0 70) rne[, 2];x1) / 20 (6; / 4vrx=d.cl.qt) a 3saesr( .oan[2 2] dmi(1, 4) .ag(0 70) rne[, 2];x1) / 289592053 (6; / 6.069638vrx=d.cl.o( a 3saelg) .oan[2 2] dmi(1, 4) .ag(0 70) rne[, 2];x1) / 288694063 (6; / 9.2998777
  • 54. DOMAINS & RANGESTypically, domains are derived from data while ranges are constant.
  • 55. vrx=d.cl.ier) a 3saelna( .oan[,d.a(ubr)) dmi(0 3mxnmes] .ag(0 70) rne[, 2];vrx=d.cl.o( a 3saelg) .oand.xetnmes) dmi(3etn(ubr) .ag(0 70) rne[, 2];fnto vled {rtr dvle } ucin au() eun .au;vrx=d.cl.o( a 3saelg) .oand.xetojcs vle) dmi(3etn(bet, au) .ag(0 70) rne[, 2];
  • 56. INTERPOLATORSQuantitative scales support multiple interpolators.
  • 57. vrx=d.cl.ier) a 3saelna( .oan[2 2] dmi(1, 4) .ag("tebu" "rw") rne[selle, bon];x1) / #656 (6; / 668vrx=d.cl.ier) a 3saelna( .oan[2 2] dmi(1, 4) .ag("p" "2p") rne[0x, 70x];x1) / 20x (6; / 4pvrx=d.cl.ier) a 3saelna( .oan[2 2] dmi(1, 4) .ag("tebu" "rw") rne[selle, bon] .neplt(3itroaes) itroaed.nepltHl;x1) / #c0f (6; / 3b5
  • 58. OBJECT INTERPOLATION just to mention
  • 59. DIVERGING SCALESSometimes, you want a compound (“polylinear”) scale. vrx=d.cl.ier) a 3saelna( .oan[1,0 10) dmi(-0 , 0] .ag("e" "ht" "re") rne[rd, wie, gen]; x-) / #f00 (5; / f88 x5) / #000 (0; / 8c8
  • 60. ORDINAL SCALESAn ordinal scale is essentially an explicit mapping. vrx=d.cl.ria( a 3saeodnl) .oan[A,"" "" "") dmi("" B, C, D] .ag(0 1,2,3]; rne[, 0 0 0) x"";/ 1 (B) / 0
  • 61. vrx=d.cl.aeoy0) a 3saectgr2( .oan[A,"" "" "") dmi("" B, C, D];x"";/ #e78 (B) / acevrx=d.cl.aeoy0) a 3saectgr2( .oan[A,"" "" "") dmi("" B, C, D];x"";/ #c0c (E) / 2a2x"";/ #c0c (E) / 2a2xdmi(;/ A B C D E .oan) / , , , ,
  • 62. COLOR SCALE
  • 63. Ordinal ranges can be derived from continuous ranges. vrx=d.cl.ria( a 3saeodnl) .oan[A,"" "" "") dmi("" B, C, D] .agPit(0 70) rneons[, 2]; x"";/ 20 (B) / 4 vrx=d.cl.ria( a 3saeodnl) .oan[A,"" "" "") dmi("" B, C, D] .agRudad(0 70,.) rneonBns[, 2] 2; x"";/ 26 brpsto (B) / 0, a oiin xrnead) / 17 brwdh .agBn(; / 3, a it
  • 64. AXIS
  • 65. AXISD3 provides convenient labeling for scales.
  • 66. Createvryxs=d.v.xs) a Ai 3sgai( .cl() saey .ret"et) oin(lf"; Rendersgapn(g) v.ped"" .tr"ls" " ai" at(cas, y xs) .alyxs; cl(Ai) Style.xspt,.xsln { ai ah ai ie fl:nn; il oe srk:#0; toe 00 saerneig cipde; hp-edrn: rsEgs}
  • 67. TICKSQuantitative scales can be queried for “human-readable” values. vrx=d.cl.ier) a 3saelna( .oan[2 2] dmi(1, 4) .ag(0 70) rne[, 2]; xtcs5;/ [2 1,1,1,2,2,2] .ik() / 1, 4 6 8 0 2 4The requested count is only a hint (for better or worse).
  • 68. TICK FORMATS d3.format d3.time.format
  • 69. MARKS/SHAPES
  • 70. SVG COORDINATESAbsolute positioning; the origin ⟨0,0⟩ is the top-left corner!
  • 71. vrsg=d.eet"oy)apn(sg) a v 3slc(bd".ped"v" .tr"it" otrit) at(wdh, ueWdh .tr"egt,otregt; at(hih" ueHih) vrg=sgapn(g) a v.ped"" .tr"rnfr" "rnlt( at(tasom, tasae" +mriLf +"" agnet , +mriTp+""; agno ))Use margins for decorative elements, such as axes.
  • 72. SVG BASIC SHAPES rect circle line text
  • 73. SVG PATHS <ahd"126929516,2.608859L3.819503 pt =M5.4601042305070568138935661,2.337133L3.6994406303973919L3.94298354617258149805434,3.7164296111384528,3.5331829.6819285355930870L1140937631189641L85610681,3.33875049.4579815337622297.800311,3.43906166.1245483,3.96057L21811298337737086L95735754,3.598405L23331346,3.106838L228338723286614126.71915063320664376.4340173,3.677780L8834988363507990065.7693443537220455.4409882,3.545653L39671242,3.67153155.05781713591941816.037121313052637L63923181,2.479315L38279273,2.295086L83003015,2.86230956.0263173601689996.7102005316102725L88171073,1.81513277.4"2742993380129458L33…>
  • 74. PATH GENERATORSConfigurable functions for generating paths from data. d3.svg.line d3.svg.area
  • 75. D3.SVG.LINE Createvrx=d.cl.ier) a 3saelna(, y=d.cl.ier) 3saelna(;vrln =d.v.ie) a ie 3sgln( .(ucind {rtr xdx;} xfnto() eun (.) ) .(ucind {rtr ydy;}; yfnto() eun (.) ) Rendersgapn(pt" v.ped"ah) .au(bet) dtmojcs .tr"ls" "ie) at(cas, ln" .tr"" ln) at(d, ie;
  • 76. D3.SVG.AREACheck the docs
  • 77. LINE INTERPOLATORSLine and area generators support multiple interpolation modes. Linear, Step and Basis Interpolation
  • 78. RADIAL AREAS & LINESSimilar to d3.svg.{area,line}, except in polar coordinates. d3.svg.arc
  • 79. D3.SVG.ARCvrmEaper ={ a yxmlAc "neRdu" 0 inrais: , "ueRdu" 30 otrais: 6, "trAge:0 / 1 ocok satnl" , / 2 lc "nAge:12/ rdas ednl" . / ain};vrac=d.v.r( a r 3sgac) .neRdu() inrais0 .ueRdu(6) otrais30;/ cntutadfutpelyu / osrc eal i aotvrpe=d.aotpe) a i 3lyu.i(;/ drv dt t fe t d.v.r / eie aa o ed o 3sgacvrmAc =penmes; a yrs i(ubr)vrpt =sgslcAl"ah) a ah v.eetl(pt" .aamAc) dt(yrs .ne(.ped"ah) etr)apn(pt" .tr"" ac; at(d, r)
  • 80. LAYOUTS
  • 81. LAYOUTS ARE DATALayouts are reusable algorithms that generate data, not display.
  • 82. LAYOUTS ARE VARIEDEach layout is different. Most are stateless, but not all.
  • 83. HIERARCHICAL LAYOUTSThere are lots of ways to visualize hierarchical data! d3.layout.treemap d3.layout.tree d3.layout.pack d3.layout.partition d3.layout.force d3.layout.bundle d3.geom.voronoi d3.geom.chord
  • 84. D3.LAYOUT.TREEMAP
  • 85. D3.LAYOUT.TREE
  • 86. D3.LAYOUT.PACK
  • 87. D3.LAYOUT.PARTITION
  • 88. Layouts are configurable functions.vrtemp=d.aottemp) a rea 3lyu.rea( .adn() pdig4 .ie[it,hih]; sz(wdh egt)
  • 89. fnto xd {rtr dx } ucin () eun .;fnto yd {rtr dy } ucin () eun .;fnto d(){rtr dd;} ucin xd eun .xfnto d(){rtr dd;} ucin yd eun .ysgslcAl"cl" v.eetl(.el) .aatempndsro) dt(rea.oe(ot) .ne(.ped"et) etr)apn(rc" .tr"ls" "el) at(cas, cl" .tr"" x at(x, ) .tr"" y at(y, ) .tr"it" d) at(wdh, x .tr"egt,d) at(hih" y;
  • 90. D3.LAYOUT.FORCE
  • 91. D3.LAYOUT.BUNDLE
  • 92. D3.GEOM.VORONOI
  • 93. D3.LAYOUT.CHORD
  • 94. SUM UPSelectorsDataJoins (enter, update, exit)ScalesAxisShapesLayouts
  • 95. NOW YOU KNOW D3JS
  • 96. REFERENCEShttp://bost.ocks.org/mike/d3/workshop/
  • 97. LETS BUILD SOME STUFF

×