This is the code for Chapter 5, Figure 6 from D3.js in Action demonstrating how to make a donut chart using d3.layout.pie().
forked from emeeks‘s block: Ch. 5, Fig. 6 - D3.js in Action
<html>
<head>
<title>D3 in Action Chapter 5 - Example 3</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" type="text/JavaScript"></script>
</head>
<style>
svg {
height: 500px;
width: 500px;
border: 1px solid gray;
}
</style>
<body>
<div id="viz">
<svg>
</svg>
</div>
</body>
<footer>
<script>
d3.json("tweets.json",function(error,data) {dataViz(data.tweets)});
function dataViz(incData) {
nestedTweets = d3.nest()
.key(function (el) {return el.user})
.entries(incData);
var colorScale = d3.scale.category10([0,1,2,3]);
nestedTweets.forEach(function (el) {
el.numTweets = el.values.length
el.numFavorites = d3.sum(el.values, function (d) {return d.favorites.length});
el.numRetweets = d3.sum(el.values, function (d) {return d.retweets.length});
})
pieChart = d3.layout.pie().sort(null);
pieChart.value(function(d) {return d.numRetweets});
newArc = d3.svg.arc();
newArc.outerRadius(100).innerRadius(20);
d3.select("svg")
.append("g")
.attr("transform","translate(250,250)")
.selectAll("path")
.data(pieChart(nestedTweets), function(d) {return d.data.key})
.enter()
.append("path")
.attr("d", newArc)
.style("fill", function(d, i) {return colorScale(i)})
.style("opacity", .5)
.style("stroke", "black")
.style("stroke-width", "2px")
.each(function(d) { this._current = d; });
pieChartFavs = d3.layout.pie().sort(null);
pieChartFavs.value(function(d) {return d.numFavorites});
d3.selectAll("path")
.data(pieChartFavs(nestedTweets), function(d) {return d.data.key})
.transition()
.duration(2000)
.attrTween("d", arcTween)
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return newArc(i(t));
};
}
}
</script>
</footer>
</html>