SVG + D3.JS Course Slide

1. Visualization over Web
2. HTML <a href=“link”>content</a> <img src=“blah.png”>
 <br> <a href=“link”> this link </a> links to a page <br> <p><a href=“link”> this link </a> links to a page </p>
3. block / inline-block table / list / flex … static / relative absolute / fixed … Display Mode Position Method
5. Scalable Vector Graphics SVG
6. <p> <svg> … </svg> </p>
7. <svg> <rect x=“10” y=“10” width=“20” height=“20”> </svg>
8. <circle> <ellipse> <line> <path> <text> hello world!
9. <circle cx=“10” cy=“10” r=“10” >
10. <ellipse cx=“10” cy=“10” rx=“20” ry=“10” >
11. <line x1=“10” y1=“10” x2=“20” y2=“20” >
12. <circle cx=“10” cy=“10” r=“10” stroke=“color” fill=“color” stroke-width=“size” >
14. #abcdef RG B 0 ~ 255 = 0 ~ ff #adf = #aaddff
15. #abcdef RG B rgb(255,128,64) rgba(255,128,64,0.8)
16. <circle cx=“10” cy=“10” r=“10” stroke=“black” fill=“#8fc” stroke-width=“5” >
17. Exercise 1
18. ?
21. <path d=“....”> M (x,y)+ - Move to (+ lineto) Z - Close Path L (x,y)+ - Line to C (x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2 M1,1 L2,1 L 2,2 L1,2Z
22. <path d=“....”> M1,1 L2,1 L 2,2 L1,2Z (1,1) (2,1) (2,2) (1,2) M L L L Z
23. <path d=“....”> M (x,y)+ - Move to (+ lineto) C (x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2
25. <path d=“....”> Q (x1,y1,x,y)+ - Quadratic Bezier T (x,y)+ - Quadratic Bezier
26. <path d=“....”> A (rx,ry,a,b,c,x,y)+ - Quadratic Bezier
27. <path d=“....”> m (x,y)+ - Move to (+ lineto) z - Close Path l (x,y)+ - Line to c (x1,y1,x2,y2,x,y)+ - Curve to ctrl1 ctrl2 q (x1,y1,x,y)+ - Quadratic Bezier a (rx,ry,a,b,c,x,y)+ - Quadratic Bezier
28. M75,50.5l5-1.5c-0.1-2.2-0.4-4.3-0.9-6.3l-5.2-0.1c-0.2-0.6-0.4-1.1-0. 6-1.7l4-3.3c-0.9-1.9-2-3.8-3.2-5.5L69.2,34c-0.4-0.5-0.8-0.9-1.2-1.3l 2.4-4.6c-1.6-1.4-3.3-2.7-5.1-3.8l-3.7,3.6c-0.5-0.3-1.1-0.5-1.6-0.8l0.5 -5.2c-2-0.7-4-1.3-6.2-1.6l-2.1,4.8c-0.6-0.1-1.2-0.1-1.8-0.1l-1.5-5c-2. 2,0.1-4.3,0.4-6.3,0.9l-0.1,5.2c-0.6,0.2-1.1,0.4-1.7,0.6l-3.3-4c-1.9,0.9 -3.8,2-5.5,3.2l1.9,4.9c-0.5,0.4-0.9,0.8-1.3,1.2l-4.6-2.4c-1.4,1.6-2.7,3 .3-3.8,5.1l3.6,3.7c-0.3,0.5-0.5,1.1-0.8,1.6l-5.2-0.5c-0.7,2-1.3,4-1.6,6 .2l4.8,2.1c-0.1,0.6-0.1,1.2-0.1,1.8l-5,1.5c0.1,2.2,0.4,4.3,0.9,6.3l5.2, 0.1c0.2,0.6,0.4,1.1,0.6,1.7l-4,3.3c0.9,1.9,2,3.8,3.2,5.5l4.9-1.9c0.4,0. 5,0.8,0.9,1.2,1.3l-2.4,4.6c1.6,1.4,3.3,2.7,5.1,3.8l3.7-3.6c0.5,0.3,1.1, 0.5,1.6,0.8l-0.5,5.2c2,0.7,4,1.3,6.2,1.6l2.1-4.8c0.6,0.1,1.2,0.1,1.8,0. 1l1.5,5c2.2-0.1,4.3-0.4,6.3-0.9l0.1-5.2c0.6-0.2,1.1-0.4,1.7-0.6l3.3,4c 1.9-0.9,3.8-2,5.5-3.2L66,69.2c0.5-0.4,0.9-0.8,1.3-1.2l4.6,2.4c1.4-1.6 ,2.7-3.3,3.8-5.1l-3.6-3.7c0.3-0.5,0.5-1.1,0.8-1.6l5.2,0.5c0.7-2,1.3-4, 1.6-6.2l-4.8-2.1C74.9,51.7,75,51.1,75,50.5zM50,65c-8.3,0-15-6.7-1 5-15c0-8.3,6.7-15,15-15s15,6.7,15,15 C65,58.3,58.3,65,50,65z d=“ ”
29. http://goo.gl/fPUFgv SVG Editor
30. Exercise 2
31. <path d=“……” fill=“…” stroke=“…” stroke-width=“size” stroke-dasharray=“…” stroke-dashoffset=“…” transform=“ translate(x y) rotate(r x y) scale(x y) ” >
33. transform=“ translate(x,y)
 “
34. transform=“ rotate(r,x,y)
 “
35. transform=“ scale(x,y)
 “
36. <text x=“0” dx=“0” y=“0” dy=“0” text-anchor=“middle" dominant-baseline="central" textLength=“100" rotate=“ 30 60 90 120 150 180 210 240 270 300 330 360”> helloworld! </text>
37. Hello World! Hello World! Hello World! start middle end Hello World! dominant-baseline text-anchor central
38. rotate=“ 30 60 90 120 150 180 210 240 270 300 330 360”
39. SMIL <path d=“……”> <animate/> <animateTransform/> <animateMotion/> Animation in SVG (IE not support)
40. <animate/> 屬性變化 <animateTransform/> 線性轉換變化 <animateMotion/> 路徑
41. <animate attributeName=“r” dur=“1s” repeatCount=“indefinite” from=“…” to=“…” begin=“…” end=“…” values=“…” keyTimes=“…” keySplines=“…” calcMode=“…”/> discrete,paced,linear,spline
42. <animateTransform attributeName=“transform” type=“…”/> <animateMotion> <mpath xlink:href=“…”/> </animateMotion>
43. <ellipse rx=“1” ry=“8”> <animate attributeName=“rx” from=“1” to=“10” dur=“1s” 
 repeatCount=“indefinite”/> <animateTransform attributeName=“transform” type=“rotate” from=“0” to=“180” dur=“0.5s” repeatCount=“indefinite”/> </ellipse>
44. Coordinate <svg width=“200px” height=“200px” viewBox=“0 0 100 100” preserveAspectRatio=“…”> …… </svg> preserveAspectRatio=“None” or x{Min,Mid,Max}Y{Min,Mid,Max}
45. width height (x1,y1) (x2,y2) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”>
47. preserveAspectRatio xMin xMid xMax yMin yMid yMax
48. D3JS js library for manipulating documents based on data <script type=“text/javascript” src=“d3.min.js”></script> <script type=“text/javascript”> d3.json(“data.json”, function(data) { min = d3.min(data); }); </script>
49. Data Driven Document Model Powerful
 Visualizing Lib d3js d3js d3js d3js d3js d3js d3js d3js d3js d3js
50. data data data data data selection enter exit selection
51. data data data data selection enter exit selection d3.selectAll(“div”) .data(data) .enter().append(“div”) .exit().remove() d3.selectAll(“div”)
52. new
 data data new data.onChange enter exit selection
53. Topic 1 - Selections
54. d3.select(“body”) .attr(“class”, “root”) d3.select(“body”) .style({ background: “#999”, color: “#009” }) d3.select(“body”) .text(“123”); d3.select(“body”) .html(“123”);
55. d3.select(“body”).selectAll(“div”) .style({ background: “#999”, color: “#009” }) d3.select(“body”).selectAll(“div”) .style({ background: function() { return “#f00” }, color: “#009” })
56. d3.select(“body”).selectAll(“div”) .style({ background: function(d,i) { return "rgba("+(i*85)+",128,192,1)"; }, color: “#009” })
57. d3.select(“body”).selectAll(“div”) .data([“#f00”,”#f90”,”#ff0”]) .style({ background: function(d,i){ return d; }, color: “#009” })
58. v = d3.select(“body”).selectAll(“div”) .data([“#f00”,”#f90”,”#ff0”]) v.exit().remove(); v.enter().append(“div”); d3.select(“body”).selectAll(“div”) .style({ background: function(d,i){ return d; }, color: “#009” }) .text(function(d) { return d; });
59. Topic 2 - Utilities
60. Utility functions d3.json(path, callback) d3.csv(path, accessor, callback) d3.html(path, callback) d3.text(path, type, callback) d3.xhr() …
61. Utility functions d3.min(array) d3.max(array) d3.sum(array) d3.mean(array) d3.median(array) d3.random.normal d3.set set.has set.forEach d3.map map.has map.forEach d3.transition d3.svg
62. Scale functions d3.scale.linear().domain(array).range(array) radius = d3.scale.linear() .domain([d3.min(data), d3.max(data)]) .range([“#f00”,”#00f”]) ticks = radius.ticks(20); d3.scale.pow().exponent(3).domain(array).range(array) d3.scale.log().domain(array).range(array)
63. Scale functions d3.scale.linear() .domain([0,100]) .range([“#000”,”#f00”]) d3.scale.category10() d3.scale.category20() d3.scale.category20b() d3.scale.category20c()
64. Topic 3 - Layout
65. Pack Layout
66. Pack Layout nodes = d3.layout.pack().size([w,h]) .nodes(data) structure of data: { value: ?, children: [ ] } { value: ?, children: [ ], parent, depth, x, y, r }
67. {
 parent: null, children: [ {value: 3}, {value: 1}, {value: 4}, {value: 1}, {value: 5}, ………… ] } c = data.map( function(d) { return {value: d}; } ); root = { children: c }
68. {
 parent: null, children: [ {value: 3}, {value: 1}, {value: 4}, {value: 1}, {value: 5}, ………… ] } [ {value:0,depth: 0, x:…, y:…, r:…}, {value:3,depth: 1, x:…, y:…, r:…}, {value:1,depth: 1, x:…, y:…, r:…}, {value:4,depth: 1, x:…, y:…, r:…}, …… ]
69. Pack Layout d3.layout.pack() .sort(function(a,b) {…}) .padding(5) .size([w,h]) .nodes(data) d3.layout.pack().links(nodes) { source: <node>, target: <node> }
70. Partition Layout d3.layout.partition() .sort(function(a,b) {…}) .size([w,h]) .nodes(data) d3.layout.partition().links(data) { value: ?, children: [], parent, depth, x, y, r, dx, dy }
71. arc = d3.svg.arc() .startAngle(function(d) { return d.x; }).endAngle(function(d) { return d.x + d.dx; }).innerRadius(function(d) { return Math.sqrt(d.y); }).outerRadius(function(d) { return Math.sqrt(d.y + d.dy); }); Use d3.svg.arc * also check the pie layout
72. Force Layout d3.layout.force() .size() .gravity() .charge() .friction() .nodes() .start() d3.on(“tick”, callback) [{…},{…},…] [ {…, x:…, y:…}, {…, x:…, y:…}, {…, x:…, y:…}, … ]
73. data = [1,2,3,4].map(function(d) { return {v:d}; }); force = d3.layout.force().nodes(data); force.on(“tick”, function() { d3.selectAll(“…”).attr({ x: function(d) { return d.x; }, y: function(d) { return d.y; }, … }); force.start();
74. Cluster Layout d3.layout.cluster() .sort(function(a,b) {…}) .size([w,h]) .nodes(data) d3.layout.cluster().links(data) { value: ?, children: [], parent, depth, x, y }