d3js tips and tricks

talks in OSDC 2014, Taiwan.

Transcript

1. d3js - tips and tricks tkirby@osdc 2014
2. 0 Convention Difficulty Number
3. 1 Visualization 123
4. Purpose
9. 1 2 3 4 反⿊黑箱 ⽩白⾊色正義 (⼈人次)
10. 1 2 3 4 反⿊黑箱 ⽩白⾊色正義 2 2 y (⼈人次)
11. 50萬 反⿊黑箱 ⽩白⾊色正義 10萬 錯誤的⻑⾧長條圖使⽤用⽅方式! 基準點需要從零開始
12. 50萬 反⿊黑箱 ⽩白⾊色正義 0 正確的⻑⾧長條圖使⽤用⽅方式! ...好吧這是個失敗的例⼦子
13. 1000 反⿊黑箱 ⽩白⾊色正義 0 換個觀點，陳述的事實也不同
14. 1000 反⿊黑箱 ⽩白⾊色正義 0 萬⼈人響應 ———— 九⼈人到場 少數⼈人
 不代表主流⺠民意 y: 響應 / 到場
16. zbryikt.github.io/visualize/jobless/ 台灣⼈人失業原因統計圖 / ⽉月
17. 2 d3js 123
18. Data Driven ! Document Model Powerful
 Visualizing Lib d3js d3js d3js d3js d3js d3js d3js d3js d3js d3js
19. data data data data data selection enter exit selection
20. data data data data selection enter exit selection d3.selectAll(“div”) .data(data) .enter().append(“div”) .exit().remove() d3.selectAll(“div”)
21. new
 data data new data.onChange enter exit selection
23. 3 Read Examples
25. http://mbostock.github.io/d3/talk/20111018/collision.html zbryikt.github.io/visualize/dorling/
26. 4 Attributes with {}
27. d3.select(“circle”) .attr(“cx”, “100px”)
28. d3.select(“circle”) .attr(“class”, “ball”)! .attr(“cx”, “100px”)! .attr(“cy”, “100px”)! .attr(“r”, “10px”)! .attr(“stroke”, “#f00”)! .attr(“stroke-width”, “100px”)! .attr(“fill”, “#f00”)! …
29. attrs = { class: "ball" cx: "100px" cy: "100px" r: "10px" stroke: "#f00" "stroke-width": "100px" fill: “#f00” }; d3.select(“circle”).attr(attrs) d3.select(“circle”) .attr(“class”, “ball”) .attr(“cx”, “100px”) .attr(“cy”, “100px”) .attr(“r”, “10px”) .attr(“stroke”, “#f00”) .attr(“stroke-width”, “100px”) .attr(“fill”, “#f00”) …
30. 5 with CSS
31. attrs = { class: "ball" cx: "100px" cy: "100px" r: "10px" stroke: "#f00" "stroke-width": "100px" fill: “#f00” }; ! d3.select(“circle”).attr(attrs) attrs = { class: "ball" cx: "100px" cy: "100px" r: "10px" }; d3.select(“circle”).attr(attrs) .ball { stroke: #f00 stroke-width: 100px fill: #f00 } javascript css
32. attrs = { class: "ball" cx: function(it) { return it.cx; } cy: function(it) { return it.cy; } r: function(it) { return it.r; } }; .…selectAll(“circle”).attr(attrs) .ball { stroke: #f00 stroke-width: 100px fill: #f00 } javascript css attrs = { class: "ball" cx: "100px" cy: "100px" r: "10px" }; d3.select(“circle”).attr(attrs) .ball { stroke: #f00 stroke-width: 100px fill: #f00 } javascript css
33. attrs = { class: "ball" cx: function(it) { return it.cx; } cy: function(it) { return it.cy; } r: function(it) { return it.r; } stroke:! function(it) { return it.s; }! fill:! ! function(it) { return it.fill; }! “stroke-width”: function(it) {! return it.strokeWidth;! } }; .…selectAll(“circle”).attr(attrs) javascript .ball { stroke: #f00 stroke-width: 100px fill: #f00 } javascript css attrs = { class: "ball" cx: function(it) { return it.cx; } cy: function(it) { return it.cy; } r: function(it) { return it.r; } }; .…selectAll(“circle”).attr(attrs)
34. 6 with AngularJS
35. [“red”,”green”,”blue”,”purple”, “blue”]
36. a = d3.select(“body”).selectAll(“div.bk”).data(data) a.enter().append(“div”)! .attr(“class”,”bk”)! .style(“background”, function(it){! return it;! });! a.exit().remove();! 1. choose div.bk 3. append div 2. set data 4. update attribute 6. remove div
37. a = d3.select(“body”).selectAll(“div.bk”).data(data) a.enter().append(“div”) .attr(“class”,”bk”) .text(function(it){ return it; }); a.exit().remove(); javascript: function main($scope) { $scope.data = data; } ! html: <div class=“bk” ng-repeat=“d in data”! ng-attr-style=“background:{{d}}”>
38. attrs = { class: "ball" cx: function(it) { return it.cx; } cy: function(it) { return it.cy; } r: function(it) { return it.r; } stroke:! function(it) { return it.s; }! fill:!! ! function(it) { return it.fill; }! “stroke-width”: function(it) {! return it.strokeWidth;! } }; .…selectAll(“circle”).attr(attrs)
39. <circle class=“ball” ng-repeat=“c in data” cx=“{{cx}}” cy=“{{cy}}” r=“{{r}}” stroke=“{{s}}” fill=“{{fill}}” stroke-width=“{{strokeWidth}}” /> attrs = { class: "ball" cx: function(it) { return it.cx; } cy: function(it) { return it.cy; } r: function(it) { return it.r; } stroke:! function(it) { return it.s; }! fill:! ! function(it) { return it.fill; }! “stroke-width”: function(it) {! return it.strokeWidth;! }}; .…selectAll(“circle”).attr(attrs)
40. <circle class=“ball” ng-repeat=“c in data” cx=“{{cx}}” cy=“{{cy}}” r=“{{r}}” stroke=“{{s}}” fill=“{{fill}}” stroke-width=“{{strokeWidth}}” /> javascript:! function main($scope) { $scope.data = data; } html
41. 7 use Jade
42. <g id=“group1” class=“text-group”> <text class=“text” id=“text1” ng-repeat=“t in text”> <textspan> {{t[0]}} </textspan> <textspan> {{t[1]}} </textspan> <animationmotion dur=“2s”> <mpath xlink:href=“#somepath”/> </animatemotion> </text> </g> html
43. <g id=“group1” class=“text-group”> <text class=“text” id=“text1” ng-repeat=“t in text”> <textspan> {{t[0]}} </textspan> <textspan> {{t[1]}} </textspan> <animationmotion dur=“2s”> <mpath xlink:href=“#somepath”/> </animatemotion> </text> </g> html
44. <g id=“group1” class=“text-group”> <text class=“text” id=“text1” ng-repeat=“t in text”> <textspan> {{t[0]}} <textspan> {{t[1]}} <animationmotion dur=“2s”> <mpath xlink:href=“#somepath”>
45. <g id=“group1” class=“text-group”> <text class=“text” id=“text1” ng-repeat=“t in text”> <textspan> {{t[0]}} <textspan> {{t[1]}} <animationmotion dur=“2s”> <mpath xlink:href=“#somepath”>
46. g(id=“group1” class=“text-group”) text(class=“text” id=“text1” ng-repeat=“t in text”) textspan {{t[0]}} textspan {{t[1]}} animationmotion(dur=“2s”) mpath( xlink:href=“#somepath”)
47. g(id=“group1” class=“text-group”) text(class=“text” id=“text1” ng-repeat=“t in text”) textspan {{t[0]}} textspan {{t[1]}} animationmotion(dur=“2s”) mpath( xlink:href=“#somepath”)
48. g#group1.text-group text#text1.text(ng-repeat=“t in text”) textspan {{t[0]}} textspan {{t[1]}} animationmotion(dur=“2s”) mpath(xlink:href=“#somepath”)
49. <g id=“group1” class=“text-group”> <text class=“text” id=“text1” ng-repeat=“t in text”> <textspan> {{t[0]}} </textspan> <textspan> {{t[1]}} </textspan> <animationmotion dur=“2s”> <mpath xlink:href=“#somepath”/> </animatemotion> </text> </g> g#group1.text-group text#text1.text(ng-repeat=“t in text”) textspan {{t[0]}} textspan {{t[1]}} animationmotion(dur=“2s”) mpath(xlink:href=“#somepath”)
50. 8 use LiveScript
51. a = d3.select(“body”).selectAll(“div.bk”).data(data) a.enter().append(“div”)! .attr(“class”,”bk”)! .style(“background”, function(it){! return it;! });! a.exit().remove();!
52. a = d3.select(“body”).selectAll(“div.bk”).data(data) a.enter().append(“div”) .attr(“class”,”bk”) .text(function(it){ return it; }); a.exit().remove(); d3.select(“body”).selectAll(“div.bk”).data(data) ..enter().append(“div”) .attr(“class”,”bk”) .text(function(it){ return it; }); ..exit().remove();
53. d3.select(“body”).selectAll(“div.bk”).data(data) ..enter().append(“div”) .attr(“class”,”bk”) .text( -> it ) ..exit().remove(); d3.select(“body”).selectAll(“div.bk”).data(data) ..enter().append(“div”) .attr(“class”,”bk”) .text(function(it){! return it;! }); ..exit().remove();
54. d3.select “body” .selectAll “div.bk” .data data ..enter!append “div” .attr “class”,”bk” .text -> it ..exit!remove!; d3.select(“body”).selectAll(“div.bk”).data(data) ..enter().append(“div”) .attr(“class”,”bk”) .text( -> it ) ..exit().remove();
55. 9 Angular ! + ! Jade ! +! LiveScript
56. attrs = { class: "ball" cx: function(it) { return it.cx; } cy: function(it) { return it.cy; } r: function(it) { return it.r; } stroke: function(it) { return it.s; } fill: function(it) { return it.fill; } “stroke-width”: function(it) { return it.strokeWidth; } }; p = d3.select(“body”).selectAll(“circle”) .data(data); p.enter().attr(attrs); p.exit().remove();
57. circle.ball( ng-controller=“main” ng-repeat=“c in data”, cx=“{{cx}}”, cy=“{{cy}}”, r=“{{r}}”, stroke=“{{s}}”, fill=“{{fill}}”, stroke-width=“{{strokeWidth}}”) javascript:! main = ($scope) -> $scope.data = data; html
58. so.. this session is not about! D3JS?
59. 10 as aux library D3JS
60. ng-repeat d3.fisheye http://zbryikt.github.io/visualize/ajd3/
61. <svg> <path ng-repeat="x in geoblock” ng-attr-d=“{{x}}"> </svg> $scope.geoblock = data.map($scope.path); $scope.fish = d3.fisheye.circular(); $scope.path = d3.geo.path!projection( function(v) { return fish(d3.geo.mercator(v)); } );
62. svg path(ng-repeat=“x in geoblock”,ng-attr-d=“{{x}}”) $scope ..fish = d3.fisheye.circular! ..geoblock = data.map $scope.path ..path = d3.geo.path!.projection -> $scope.fish! d3.geo.mercator v
63. fish = d3.circular.fisheye(); function projection(v) { return fish(d3.geo.mercator(v)); } path = d3.geo.path().projection(projection); g = d3.select(“body”).selectAll(“path.geo”).data(data); g.exit().remove(); g.enter().append(“path”) ..attr(“class”,”geo”) ..attr(“d”, function(it) { return path(it); });
64. fish = d3.circular.fisheye(); function projection(v) { return fish(d3.geo.mercator(v)); } path = d3.geo.path().projection(proje ction); g = d3.select(“body”).selectAll(“p ath.geo”).data(data); g.exit().remove(); g.enter().append(“path”) ..attr(“class”,”geo”) ..attr(“d”, function(it) { return path(it); }); svg path(ng-repeat=“x in geoblock”, ng-attr-d=“{{x}}”) $scope ..fish = d3.fisheye.circular! ..geoblock = data.map $scope.path ..path = d3.geo.path!.projection -> $scope.fish! d3.geo.mercator v
65. 台北市親⼭山步道列表
66. 11 Animation
67. d3.select “circle” .transition!duration 500 .style “top”, “200px”
68. 12 Multiple Animation
69. d3.select “circle” .transition!duration 500 .style “top”, “200px” .transition!delay 500 ! .duration 500 .style “left”, “200px”
70. 13 Animation in CSS
71. d3.select “circle” .transition!duration 500 .style “top”, “200px” .transition!delay 500 .duration 500 .style “left”, “200px” @keyframes move { 50% top: 200px! 100% left: 200px! ! circle.move { animation: move 1s linear 1 forwards }
72. d3.select “circle” .transition!duration 500 .style “top”, “200px” .transition!delay 500 .duration 500 .style “left”, “200px” d3.select “circle” .attr “class”, “move”
73. 14 Animation in SVG
74. @keyframes move { 50% top: 200px! 100% left: 200px! ! circle.move { animation: move 1s linear 1 forwards } d3.select “circle” .attr “class”, “move” javascript css
75. @keyframes move { 50% top: {{top}} 100% left: {{left}} ! circle.move { animation: move {{dur}} linear {{count}} forwards } d3.select “circle” .attr “class”, “move” javascript css
76. attrs = { class: ! "ball"! cx: ! ! function(it) { return it.cx; }! cy: ! ! function(it) { return it.cy; }! r: ! ! function(it) { return it.r; }! stroke: function(it) { return it.s; } fill: function(it) { return it.fill; } “stroke-width”: function(it) { return it.strokeWidth; } }; .…selectAll(“circle”).attr(attrs) javascript .ball { stroke: #f00 stroke-width: 100px fill: #f00 } javascript css attrs = { class: "ball"! cx:function(it) { return it.cx; }! cy:function(it) { return it.cy; }! r: function(it) { return it.r; }! }; .…selectAll(“circle”).attr(attrs)
77. SMIL <rect> <animate attributeName=“width” from=“2” to=“10” dur=“1s”/> </rect>
78. SMIL rect: animate(attribute=“width”, ng-attr-from=“{{from}}”, ng-attr-to=“{{to}}”, ng-attr-dur=“{{dur}}s”) angularjs + jade
79. http://zbryikt.github.io/visualize/svg-animate/
80. g0v hackath8n 快到了...
81. 15 z-index
82. circle text A circle text B circle text C ……
83. circle text A circle text B circle text C …… Z > B Z > A
84. circle text text circle <g class=“text-group”> <g class=“circle-group”> <g class=“item”>
85. 16 with Canvas
86. Like a Library data = [[0 0] [20 20]]! line = d3.canvas.line!! d3.select “canvas” .call line, data d3 canvas plugin
87. As a DOM Model selectAll “custom:circle” .data data! .enter! .append “custom:circle”! .exit! .remove! http://bl.ocks.org/mbostock/1276463 d3.timer -> selectAll “custom:*” .each ->! if @tagName==“circle” => …! else …!
88. SVG 2 Canvas - CANVG http://loading.io SVG Animation —> Tick by JS Tick by JS —> SVG SVG —> Canvas by canvg Canvas —> GIF by gif.js
89. 17 prerendering
90. CANVG svg to canvas canvg(canvas, “<svg>…”, { renderCallback: cb }) <script src=“canvg.js”> function cb(canvas) { … }
91. PHANTOMJS page = WebPage.create(); page.onLoadFinished = -> page.render(“screenshot.png”);
92. 18 D3js, in 3D
93. http://bl.ocks.org/zbryikt/raw/4539556/ 3D, in SVG
94. http://bl.ocks.org/dcposch/4056536 D3GL — d3 globe plugin globe = d3.gl.globe! d3.selectAll “span” .data texture … .call globe
95. http://www.x3dom.org X3DOM = 3D in DOM http://bl.ocks.org/camio/5087116
96. http://jsfiddle.net/XG7s8/ X3D, in AngularJS
97. http://zbryikt.github.io/visualize/banana/ X3D + D3JS + AngularJS
98. 19 Other Topics
99. Other Topics • with Google Maps and geographics • with Firebase • with Text, Link, Images and HTML • with Crossfilter • Plugins • Optimization
100. Summary d3js + svg + jade + css3 + livescript + angularjs + x3d + webgl + canvg + phantomjs + canvas + smil …
101. 0media 零傳媒 http://0media.tw
102. Attributions Magic Wand by Lemon Liu, http://thenounproject.com/term/magic-wand/1294/ Flame by iconoci,
 http://thenounproject.com/term/flame/9209/
103. links http://zbryikt.github.io/visualize/jobless/ http://mbostock.github.io/d3/talk/20111018/collision.html http://zbryikt.github.io/visualize/dorling/ http://zbryikt.github.io/visualize/ajd3/ http://zbryikt.github.io/visualize/hiking/ http://zbryikt.github.io/visualize/svg-animate/ http://bl.ocks.org/mbostock/1276463 http://loading.io http://bl.ocks.org/dcposch/4056536 http://bl.ocks.org/zbryikt/raw/4539556/ http://bl.ocks.org/camio/5087116 http://jsfiddle.net/XG7s8/ http://zbryikt.github.io/visualize/banana/