tkirby
May 28, 2015
160

# SVG + D3.JS Course Slide

May 28, 2015

## Transcript

3. ### block / inline-block table / list / ﬂex … static

/ relative absolute / ﬁxed … Display Mode Position Method
4. None

13. None

19. None
20. None
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
24. None

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=“ ”

31. ### <path d=“……” fill=“…” stroke=“…” stroke-width=“size” stroke-dasharray=“…” stroke-dashoffset=“…” transform=“ translate(x y)

rotate(r x y) scale(x y) ” >
32. None

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

300 330 360”

not support)

41. ### <animate attributeName=“r” dur=“1s” repeatCount=“indefinite” from=“…” to=“…” begin=“…” end=“…” values=“…” keyTimes=“…”

keySplines=“…” calcMode=“…”/> discrete,paced,linear,spline

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}

y1”>
46. None

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

51. ### data data data data selection enter exit selection d3.selectAll(“div”) .data(data)

.enter().append(“div”) .exit().remove() d3.selectAll(“div”)

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” })

})

})
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; });

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

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 }