d3/examples/donut/donut.html

<html>
  <head>
    <title>Donut Chart</title>
    <script type="text/javascript" src="../../d3.js"></script>
    <style type="text/css">

body {
  font: 10px sans-serif;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 400,
    h = 400,
    r1 = Math.min(w, h) / 2,
    r0 = r1 * .6,
    n = 10,
    data = arcs(d3.range(n).map(Math.random)),
    color = d3.scale.category20(),
    arc = d3.svg.arc();

var vis = d3.select("body")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h);

vis.selectAll("g.arc")
    .data(data)
  .enter().append("svg:g")
    .attr("class", "arc")
    .attr("transform", "translate(" + r1 + "," + r1 + ")")
  .append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

window.addEventListener("keypress", update, false);

function update() {
  var prev = data,
      next = data = arcs(d3.range(n).map(Math.random)),
      i = 0;
  for (; i < n; ++i) prev[i].next = next[i];
  d3.selectAll("g.arc > path")
      .data(prev)
      .each(transitionSplit);
}

// 1. Wedges split into two rings.
function transitionSplit(d, i) {
  d3.select(this)
    .transition()
      .attrTween("d", tweenArc({
        innerRadius: i & 1 ? r0 : (r0 + r1) / 2,
        outerRadius: i & 1 ? (r0 + r1) / 2 : r1
      }))
      .each("end", transitionRotate);
}

// 2. Wedges translate to be centered on their final position.
function transitionRotate(d, i) {
  var a0 = d.next.startAngle + d.next.endAngle,
      a1 = d.startAngle - d.endAngle;
  d3.select(this)
    .transition()
      .attrTween("d", tweenArc({
        startAngle: (a0 + a1) / 2,
        endAngle: (a0 - a1) / 2
      }))
      .each("end", transitionResize);
}

// 3. Wedges then update their values, changing size.
function transitionResize(d, i) {
  d3.select(this)
    .transition()
      .attrTween("d", tweenArc({
        startAngle: d.next.startAngle,
        endAngle: d.next.endAngle
      }))
      .each("end", transitionUnite);
}

// 4. Wedges reunite into a single ring.
function transitionUnite(d, i) {
  d3.select(this)
    .transition()
      .attrTween("d", tweenArc({
        innerRadius: d.next.innerRadius,
        outerRadius: d.next.outerRadius
      }));
}

function tweenArc(b) {
  return function(a) {
    var i = d3.interpolate(a, b);
    for (var key in b) a[key] = b[key]; // update data
    return function(t) {
      return arc(i(t));
    };
  };
}

function arcs(values) {
  var k = (2 * Math.PI) / values.reduce(function(p, d) { return p + d; }, 0),
      a = 0;
  return values.map(function(d, i) {
    return {
      startAngle: a,
      endAngle: a += d * k,
      innerRadius: r0,
      outerRadius: r1
    };
  });
}

    </script>
  </body>
</html>
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`<html>`
			`<head>`
			`<title>Donut Chart</title>`
Simplify data join. Add insert & empty. The data join is now specified as a single function of data, as with all other properties. This allows the key to be computed on the previously-bound data, rather than requiring the key to be serialized into the DOM (say, as an attribute). In the case that there is no previously-bound data, it is still possible to access the associated node as the `this` context. The `enter` operator no longer performs an append. For symmetry with the `exit` operator, you must call `append` after obtaining the entering selection. This requires a tiny bit more code, but should make the code more clear. Also, it provides an opportunity to use a different instantiation operator, such as the new `insert` operator. This takes a second argument, which is a selector for the insert-before reference element. For example, the selector ":first-child" will prepend nodes. The `empty` operator allows you to query whether a selection is empty (i.e., contains zero matching nodes). 2011-01-31 22:00:35 +03:00			`<script type="text/javascript" src="../../d3.js"></script>`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`<style type="text/css">`

			`body {`
			`font: 10px sans-serif;`
			`}`

			`</style>`
			`</head>`
			`<body>`
			`<script type="text/javascript">`

			`var w = 400,`
			`h = 400,`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`r1 = Math.min(w, h) / 2,`
			`r0 = r1 * .6,`
Add categorial color palettes. 2010-10-25 03:15:43 +04:00			`n = 10,`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`data = arcs(d3.range(n).map(Math.random)),`
Break d3 into {core,scale,svg} modules. Also enable ADVANCED_OPTIMIZATIONS for the Google compiler. 2010-10-31 02:30:10 +04:00			`color = d3.scale.category20(),`
			`arc = d3.svg.arc();`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
			`var vis = d3.select("body")`
Rename add -> append. 2010-10-02 22:00:31 +04:00			`.append("svg:svg")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("width", w)`
			`.attr("height", h);`

First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`vis.selectAll("g.arc")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.data(data)`
Simplify data join. Add insert & empty. The data join is now specified as a single function of data, as with all other properties. This allows the key to be computed on the previously-bound data, rather than requiring the key to be serialized into the DOM (say, as an attribute). In the case that there is no previously-bound data, it is still possible to access the associated node as the `this` context. The `enter` operator no longer performs an append. For symmetry with the `exit` operator, you must call `append` after obtaining the entering selection. This requires a tiny bit more code, but should make the code more clear. Also, it provides an opportunity to use a different instantiation operator, such as the new `insert` operator. This takes a second argument, which is a selector for the insert-before reference element. For example, the selector ":first-child" will prepend nodes. The `empty` operator allows you to query whether a selection is empty (i.e., contains zero matching nodes). 2011-01-31 22:00:35 +03:00			`.enter().append("svg:g")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("class", "arc")`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`.attr("transform", "translate(" + r1 + "," + r1 + ")")`
			`.append("svg:path")`
Add categorial color palettes. 2010-10-25 03:15:43 +04:00			`.attr("fill", function(d, i) { return color(i); })`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("d", arc);`

Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`window.addEventListener("keypress", update, false);`

			`function update() {`
			`var prev = data,`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`next = data = arcs(d3.range(n).map(Math.random)),`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`i = 0;`
			`for (; i < n; ++i) prev[i].next = next[i];`
			`d3.selectAll("g.arc > path")`
			`.data(prev)`
			`.each(transitionSplit);`
			`}`

			`// 1. Wedges split into two rings.`
			`function transitionSplit(d, i) {`
			`d3.select(this)`
			`.transition()`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.attrTween("d", tweenArc({`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`innerRadius: i & 1 ? r0 : (r0 + r1) / 2,`
			`outerRadius: i & 1 ? (r0 + r1) / 2 : r1`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`}))`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.each("end", transitionRotate);`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`}`

			`// 2. Wedges translate to be centered on their final position.`
			`function transitionRotate(d, i) {`
			`var a0 = d.next.startAngle + d.next.endAngle,`
			`a1 = d.startAngle - d.endAngle;`
			`d3.select(this)`
			`.transition()`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.attrTween("d", tweenArc({`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`startAngle: (a0 + a1) / 2,`
			`endAngle: (a0 - a1) / 2`
			`}))`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.each("end", transitionResize);`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`}`

			`// 3. Wedges then update their values, changing size.`
			`function transitionResize(d, i) {`
			`d3.select(this)`
			`.transition()`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.attrTween("d", tweenArc({`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`startAngle: d.next.startAngle,`
			`endAngle: d.next.endAngle`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`}))`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.each("end", transitionUnite);`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`}`

			`// 4. Wedges reunite into a single ring.`
			`function transitionUnite(d, i) {`
			`d3.select(this)`
			`.transition()`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`.attrTween("d", tweenArc({`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`innerRadius: d.next.innerRadius,`
			`outerRadius: d.next.outerRadius`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`}));`
			`}`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`function tweenArc(b) {`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`return function(a) {`
Restore previous enter behavior. It's a lot more predictable if we always use selectAll to determine the parent node for a given group, rather than trying to infer parent nodes per node during select. 2010-10-24 23:13:15 +04:00			`var i = d3.interpolate(a, b);`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`for (var key in b) a[key] = b[key]; // update data`
			`return function(t) {`
			`return arc(i(t));`
			`};`
			`};`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`}`

First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`function arcs(values) {`
			`var k = (2 * Math.PI) / values.reduce(function(p, d) { return p + d; }, 0),`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`a = 0;`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`return values.map(function(d, i) {`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`return {`
			`startAngle: a,`
First pass at some shape utilities. 2010-10-25 04:05:59 +04:00			`endAngle: a += d * k,`
			`innerRadius: r0,`
			`outerRadius: r1`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`};`
			`});`
			`}`

			`</script>`
			`</body>`
			`</html>`