D3.js workshop

62,733 views
70,851 views

Published on

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

No Downloads
Views
Total views
62,733
On SlideShare
0
From Embeds
0
Number of Embeds
50,505
Actions
Shares
0
Downloads
390
Comments
0
Likes
70
Embeds 0
No embeds

No notes for slide

D3.js workshop

  1. 1. D3 WORKSHOP
  2. 2. WEB STANDARDSD3 provides transformation; no new representation.
  3. 3. MAPPING DATA TO ELEMENTSVisualisation requires visual encoding: mapping data to elements.
  4. 4. NOTHING NEW D3 refers to Data-Driven DocumentsW3C Document Object Model.
  5. 5. D3 = STANDARDSLearning D3 is largely learning web standards
  6. 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. 7. HTML 5<DCYEhm>!OTP tl<eacast"t-"mt hre=uf8><oybd>Hlowrdel,ol!
  8. 8. SVGSVG Spechttp://www.w3.org/TR/SVG/MDNhttps://developer.mozilla.org/en/SVGD3 API Referencehttps://github.com/mbostock/d3/wiki/SVG-Shapes
  9. 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. 10. SVG != HTML
  11. 11. CSSCSS Spechttp://www.w3.org/TR/CSS2/Selectors Spechttp://www.w3.org/TR/selectors/
  12. 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. 13. JAVASCRIPTMDNhttps://developer.mozilla.org/en/JavaScriptDouglas Crockford’s JavaScript: The Good Partshttp://shop.oreilly.com/product/9780596517748.dohttp://javascript.crockford.com/
  14. 14. JAVASCRIPT<DCYEhm>!OTP tl<eacast"t-"mt hre=uf8><oybd><citsrp> cnoelg"el,wrd"; osl.o(Hlo ol!)<srp>/cit
  15. 15. STARTING WITH D3
  16. 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. 17. DEVELOPER TOOLS
  18. 18. DASHlatest version
  19. 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. 20. SELECTORS
  21. 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. 22. SELECTORS Javascriptdcmn.urSlcoAl"r,cd" ouetqeyeetrl(pe oe) jQuery$r,cd (pe oe) D3d.eetl(pe cd" 3slcAl"r, oe)
  23. 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. 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. 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. 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. 27. DATA
  28. 28. DATA ARE ARRAYS Selections are arrays Data are arrays Coincidence?
  29. 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. 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. 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. 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. 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. 34. ENTER, UPDATE & EXIT Thinking with Joins
  35. 35. ENTERNew data, for which there were no existing elements.
  36. 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. 37. UPDATENew data that was joined successfully to an existing element.
  38. 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. 39. EXITExisting elements, for which there were no new data.
  40. 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. 41. ENTER + UPDATEEntering nodes are added to update on append.
  42. 42. ENTER + UPDATEvrcrl =sgslcAl"ice) a ice v.eetl(crl" .aadt) dt(aa;crl.xt)rmv(; iceei(.eoe)
  43. 43. KEY FUNCTION You can control the join;by default, the join is by index.
  44. 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. 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. 46. LOADING DATAD3 provides several convenience routines using XMLHttpRequest . CSV JSON
  47. 47. D3 AND ARRAY
  48. 48. D3 AND ARRAYJavaScript has a number of useful built-in array methods. array. {filter,map,sort,…}
  49. 49. D3 also has a variety of data-transform methods; explore the API . d3. {nest,keys,values,…}
  50. 50. SCALES
  51. 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. 52. QUANTITATIVE SCALESMap a continuous (numeric) domain to a continuous range. linear sqrt pow log quantize threshold quantile identity
  53. 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. 54. DOMAINS & RANGESTypically, domains are derived from data while ranges are constant.
  55. 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. 56. INTERPOLATORSQuantitative scales support multiple interpolators.
  57. 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. 58. OBJECT INTERPOLATION just to mention
  59. 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. 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. 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. 62. COLOR SCALE
  63. 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. 64. AXIS
  65. 65. AXISD3 provides convenient labeling for scales.
  66. 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. 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. 68. TICK FORMATS d3.format d3.time.format
  69. 69. MARKS/SHAPES
  70. 70. SVG COORDINATESAbsolute positioning; the origin ⟨0,0⟩ is the top-left corner!
  71. 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. 72. SVG BASIC SHAPES rect circle line text
  73. 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. 74. PATH GENERATORSConfigurable functions for generating paths from data. d3.svg.line d3.svg.area
  75. 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. 76. D3.SVG.AREACheck the docs
  77. 77. LINE INTERPOLATORSLine and area generators support multiple interpolation modes. Linear, Step and Basis Interpolation
  78. 78. RADIAL AREAS & LINESSimilar to d3.svg.{area,line}, except in polar coordinates. d3.svg.arc
  79. 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. 80. LAYOUTS
  81. 81. LAYOUTS ARE DATALayouts are reusable algorithms that generate data, not display.
  82. 82. LAYOUTS ARE VARIEDEach layout is different. Most are stateless, but not all.
  83. 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. 84. D3.LAYOUT.TREEMAP
  85. 85. D3.LAYOUT.TREE
  86. 86. D3.LAYOUT.PACK
  87. 87. D3.LAYOUT.PARTITION
  88. 88. Layouts are configurable functions.vrtemp=d.aottemp) a rea 3lyu.rea( .adn() pdig4 .ie[it,hih]; sz(wdh egt)
  89. 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. 90. D3.LAYOUT.FORCE
  91. 91. D3.LAYOUT.BUNDLE
  92. 92. D3.GEOM.VORONOI
  93. 93. D3.LAYOUT.CHORD
  94. 94. SUM UPSelectorsDataJoins (enter, update, exit)ScalesAxisShapesLayouts
  95. 95. NOW YOU KNOW D3JS
  96. 96. REFERENCEShttp://bost.ocks.org/mike/d3/workshop/
  97. 97. LETS BUILD SOME STUFF

×