Skip to content

Instantly share code, notes, and snippets.

@jrob00
Forked from mbostock/.block
Created December 9, 2011 18:35
Show Gist options
  • Save jrob00/1452737 to your computer and use it in GitHub Desktop.
Save jrob00/1452737 to your computer and use it in GitHub Desktop.
How-To: Update a Pie Chart (Part 2)

Click to change datasets.

Previous: Part 1.

<!DOCTYPE html>
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.5.0"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript">
var data1 = [53245, 28479, 19697, 24037, 40245],
data2 = [200, 200, 200, 200, 200],
data = data1;
var w = 960,
h = 500,
r = Math.min(w, h) / 2,
color = d3.scale.category20(),
donut = d3.layout.pie().sort(null),
arc = d3.svg.arc().innerRadius(r - 100).outerRadius(r - 20);
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var arcs = svg.selectAll("path")
.data(donut(data))
.enter().append("svg:path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.each(function(d) { this._current = d; });
d3.select(window).on("click", function() {
data = data === data1 ? data2 : data1; // swap the data
arcs = arcs.data(donut(data)); // recompute the angles and rebind the data
arcs.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
});
// Store the currently-displayed angles in this._current.
// Then, interpolate from this._current to the new angles.
function arcTween(a) {
console.log(this);
console.log(this._current);
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment