d3/examples/donut/donut.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Donut Chart</title>
<style>

body {
  font: 10px sans-serif;
}

</style>
<body>
<script src="../../d3.js"></script>
<script>

var width = 400,
    height = 400,
    outerRadius = Math.min(width, height) / 2,
    innerRadius = outerRadius * .6,
    n = 10,
    q = 0,
    data0 = d3.range(n).map(Math.random),
    data1 = d3.range(n).map(Math.random),
    data,
    color = d3.scale.category20(),
    arc = d3.svg.arc(),
    donut = d3.layout.pie().sort(null);

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

svg.selectAll(".arc")
    .data(arcs(data0, data1))
  .enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
  .append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

d3.select(window).on("keypress", swap);

function arcs(data0, data1) {
  var arcs0 = donut(data0),
      arcs1 = donut(data1),
      i = -1,
      arc;
  while (++i < n) {
    arc = arcs0[i];
    arc.innerRadius = innerRadius;
    arc.outerRadius = outerRadius;
    arc.next = arcs1[i];
  }
  return arcs0;
}

function swap() {
  d3.selectAll(".arc > path")
      .data(++q & 1 ? arcs(data0, data1) : arcs(data1, data0))
      .each(transitionSplit);
}

// 1. Wedges split into two rings.
function transitionSplit(d, i) {
  d3.select(this)
    .transition().duration(1000)
      .attrTween("d", tweenArc({
        innerRadius: i & 1 ? innerRadius : (innerRadius + outerRadius) / 2,
        outerRadius: i & 1 ? (innerRadius + outerRadius) / 2 : outerRadius
      }))
      .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().duration(1000)
      .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().duration(1000)
      .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().duration(1000)
      .attrTween("d", tweenArc({
        innerRadius: innerRadius,
        outerRadius: 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));
    };
  };
}

</script>
Add doctype to all examples for consistency. 2011-05-02 03:15:09 +04:00			`<!DOCTYPE html>`
Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`<meta charset="utf-8">`
			`<title>Donut Chart</title>`
			`<style>`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
			`body {`
			`font: 10px sans-serif;`
			`}`

Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`</style>`
			`<body>`
			`<script src="../../d3.js"></script>`
			`<script>`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Bring donut example up-to-date 2012-04-06 14:47:11 +04:00			`var width = 400,`
			`height = 400,`
			`outerRadius = Math.min(width, height) / 2,`
			`innerRadius = outerRadius * .6,`
Add categorial color palettes. 2010-10-25 03:15:43 +04:00			`n = 10,`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`q = 0,`
			`data0 = d3.range(n).map(Math.random),`
			`data1 = d3.range(n).map(Math.random),`
			`data,`
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(),`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`arc = d3.svg.arc(),`
Disable sorting in donut transition example. 2011-11-05 00:48:56 +04:00			`donut = d3.layout.pie().sort(null);`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`var svg = d3.select("body").append("svg")`
Bring donut example up-to-date 2012-04-06 14:47:11 +04:00			`.attr("width", width)`
			`.attr("height", height);`
Checkpoint examples. 2010-09-28 22:34:52 +04:00
Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`svg.selectAll(".arc")`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`.data(arcs(data0, data1))`
Examples: namespaces are optional as of v2.6.0. 2011-11-24 02:46:37 +04:00			`.enter().append("g")`
Checkpoint examples. 2010-09-28 22:34:52 +04:00			`.attr("class", "arc")`
Bring donut example up-to-date 2012-04-06 14:47:11 +04:00			`.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")`
Examples: namespaces are optional as of v2.6.0. 2011-11-24 02:46:37 +04:00			`.append("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);`

Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`d3.select(window).on("keypress", swap);`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`function arcs(data0, data1) {`
			`var arcs0 = donut(data0),`
			`arcs1 = donut(data1),`
			`i = -1,`
			`arc;`
			`while (++i < n) {`
			`arc = arcs0[i];`
Bring donut example up-to-date 2012-04-06 14:47:11 +04:00			`arc.innerRadius = innerRadius;`
			`arc.outerRadius = outerRadius;`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`arc.next = arcs1[i];`
			`}`
			`return arcs0;`
			`}`

			`function swap() {`
Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`d3.selectAll(".arc > path")`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`.data(++q & 1 ? arcs(data0, data1) : arcs(data1, data0))`
Allow custom interpolators. 2010-10-24 21:39:34 +04:00			`.each(transitionSplit);`
			`}`

			`// 1. Wedges split into two rings.`
			`function transitionSplit(d, i) {`
			`d3.select(this)`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`.transition().duration(1000)`
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({`
Bring donut example up-to-date 2012-04-06 14:47:11 +04:00			`innerRadius: i & 1 ? innerRadius : (innerRadius + outerRadius) / 2,`
			`outerRadius: i & 1 ? (innerRadius + outerRadius) / 2 : outerRadius`
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)`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`.transition().duration(1000)`
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)`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`.transition().duration(1000)`
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)`
More convenient pies. This adds d3.layout.pie, which can be used to compute the start and end angles for arcs given an arbitrary array of data. In addition, d3.svg.arc now has a `centroid` method that computes the center of the arc, useful for labeling. Together these changes greatly simplify the donut & pie examples. This commit also includes a `map` method for selections, which is similar to the `filter` method. This allows you to map the data bound to the current selection. I'm not currently using it, but it seems like a useful feature for those cases where you want to rebind the current selection to different (but related) data. 2011-02-25 01:13:05 +03:00			`.transition().duration(1000)`
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({`
Bring donut example up-to-date 2012-04-06 14:47:11 +04:00			`innerRadius: innerRadius,`
			`outerRadius: 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			`}`

Checkpoint example cleanup. 2012-10-12 03:34:17 +04:00			`</script>`