SVG + D3.JS Course Slide

7f7cce675da85bf8807da9f8d0c3a955?s=47 tkirby
May 28, 2015

SVG + D3.JS Course Slide

7f7cce675da85bf8807da9f8d0c3a955?s=128

tkirby

May 28, 2015
Tweet

Transcript

  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
  4. None
  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” >

  13. None
  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. ?

  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
  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) ” >
  32. None
  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”>
  46. None
  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 }