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

d3js for 0media

d3js for 0media

tkirby

May 03, 2014
Tweet

More Decks by tkirby

Other Decks in Technology

Transcript

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

    (x1,y1,x2,y2,x,y)- Curve to ctrl1 ctrl2
  3. <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
  4. <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>
  5. 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>
  6. data data data data selection enter exit selection d3.selectAll(“div”) .data(data)

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

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

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

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