Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SVG + D3.JS Course Slide

tkirby
May 28, 2015

SVG + D3.JS Course Slide

tkirby

May 28, 2015
Tweet

More Decks by tkirby

Other Decks in Education

Transcript

  1. 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>
  2. block / inline-block table / list / flex … static

    / relative absolute / fixed … Display Mode Position Method
  3. ?

  4. <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
  5. <path d=“....”> M (x,y)+ - Move to (+ lineto) C

    (x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2
  6. <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
  7. Hello World! Hello World! Hello World! start middle end Hello

    World! dominant-baseline text-anchor central
  8. <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>
  9. 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>
  10. data data data data selection enter exit selection d3.selectAll(“div”) .data(data)

    .enter().append(“div”) .exit().remove() d3.selectAll(“div”)
  11. 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)
  12. Pack Layout nodes = d3.layout.pack().size([w,h]) .nodes(data) structure of data: {

    value: ?, children: [ ] } { value: ?, children: [ ], parent, depth, x, y, r }
  13. {
 parent: null, children: [ {value: 3}, {value: 1}, {value:

    4}, {value: 1}, {value: 5}, ………… ] } c = data.map( function(d) { return {value: d}; } ); root = { children: c }
  14. {
 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:…}, …… ]
  15. 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
  16. Force Layout d3.layout.force() .size() .gravity() .charge() .friction() .nodes() .start() d3.on(“tick”,

    callback) [{…},{…},…] [ {…, x:…, y:…}, {…, x:…, y:…}, {…, x:…, y:…}, … ]
  17. 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();