d3js for 0media

Transcript

1. D3JS kirby
2. Scalable Vector Graphics SVG
3. <svg> <rect x=“10” y=“10” width=“20” height=“20”> </svg>
4. <circle> ! <ellipse> ! <line> ! <path> ! <text> hello world!
5. <circle cx=“10” cy=“10” r=“10” >
6. <ellipse cx=“10” cy=“10” rx=“20” ry=“10” >
7. <line x1=“10” y1=“10” x2=“20” y2=“20” >
8. <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
9. <path d=“....”> M (x,y)+ - Move to (+ lineto) C (x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2
11. <path d=“....”> Q (x1,y1,x,y)+ - Quadratic Bezier T (x,y)+ - Quadratic Bezier
12. <path d=“....”> A (rx,ry,a,b,c,x,y)+ - Quadratic Bezier
13. <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
14. 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=“ ”
15. http://goo.gl/fPUFgv SVG Editor
16. <path d=“……” fill=“…” stroke=“…” stroke-width=“size” stroke-dasharray=“…” stroke-dashoffset=“…” transform=“ translate(x y) rotate(r x y) scale(x y) ” >
17. <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>
19. Coordinate <svg width=“200px” height=“200px” viewBox=“0 0 100 100” preserveAspectRatio=“…”> …… </svg> preserveAspectRatio=“None” or x{Min,Mid,Max}Y{Min,Mid,Max}
20. width height (x1,y1) (x2,y2) <svg width=“w” height=“h” viewBox=“x1 y1 x2 y1”>
22. preserveAspectRatio xMin xMid xMax yMin yMid yMax
23. SMIL <path d=“……”> <animate/> <animateTransform/> <animateMotion/> Animation in SVG (IE not support)
24. <animate/> 屬性變化 ! <animateTransform/> 線性轉換變化 ! <animateMotion/> 路徑
25. <animate attributeName=“r” dur=“1s” repeatCount=“indefinite” from=“…” to=“…” begin=“…” end=“…” values=“…” keyTimes=“…” keySplines=“…” calcMode=“…”/> discrete,paced,linear,spline
26. <animateTransform attributeName=“transform” type=“…”/> ! <animateMotion> <mpath xlink:href=“…”/> </animateMotion>
27. <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>
28. 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>
29. Data Driven ! Document Model Powerful
 Visualizing Lib d3js d3js d3js d3js d3js d3js d3js d3js d3js d3js
30. data data data data data selection enter exit selection
31. data data data data selection enter exit selection d3.selectAll(“div”) .data(data) .enter().append(“div”) .exit().remove() d3.selectAll(“div”)
32. new
 data data new data.onChange enter exit selection
33. Topic 1 - Selections
34. d3.select(“body”) .attr(“class”, “root”) d3.select(“body”) .style({ background: “#999”, color: “#009” }) d3.select(“body”) .text(“123”); d3.select(“body”) .html(“123”);
35. d3.select(“body”).selectAll(“div”) .style({ background: “#999”, color: “#009” }) d3.select(“body”).selectAll(“div”) .style({ background: function() { return “#f00” }, color: “#009” })
36. d3.select(“body”).selectAll(“div”) .style({ background: function(d,i) { return "rgba("+(i*85)+",128,192,1)"; }, color: “#009” })
37. d3.select(“body”).selectAll(“div”) .data([“#f00”,”#f90”,”#ff0”]) .style({ background: function(d,i){ return d; }, color: “#009” })
38. 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; });
39. Topic 2 - Utilities
40. Utility functions d3.json(path, callback) d3.csv(path, accessor, callback) d3.html(path, callback) d3.text(path, type, callback) d3.xhr() …
41. 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
42. 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)
43. Scale functions d3.scale.linear() .domain([0,100]) .range([“#000”,”#f00”]) d3.scale.category10() d3.scale.category20() d3.scale.category20b() d3.scale.category20c()
44. Topic 3 - Layout
45. Pack Layout
46. Pack Layout nodes = d3.layout.pack().size([w,h]) .nodes(data) structure of data: { value: ?, children: [ ] } { value: ?, children: [ ], parent, depth, x, y, r }
47. {
 parent: null, children: [ {value: 3}, {value: 1}, {value: 4}, {value: 1}, {value: 5}, ………… ] } c = data.map( function(d) { return {value: d}; } ); ! root = { children: c }
48. {
 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:…}, …… ]
49. 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> }
50. 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 }
51. 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
52. Force Layout d3.layout.force() .size() .gravity() .charge() .friction() .nodes() .start() d3.on(“tick”, callback) [{…},{…},…] [ {…, x:…, y:…}, {…, x:…, y:…}, {…, x:…, y:…}, … ]
53. 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();
54. 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 }