D3 Examples - pie chart w/rotated labels

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var piecolors = d3.scale.category20c();
​
var w = 600,
    h = 460,
    r = (Math.min(w, h) - 50) / 2;
​
d3.csv("makes.csv", function(error, data) {
​
    var svgPie = d3.select("#chart").append("svg")
        .attr("width", w)
        .attr("height", h)
        .append("g")
        .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
​
    var arc = d3.svg.arc()
        .outerRadius(r - 12)
        .innerRadius(2);
​
    var labelArc = d3.svg.arc()
        .outerRadius(r + 20)
        .innerRadius(r-5);
​
    var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) { return d.cars; });
​
    var pie = svgPie.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");
​
    pie.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return piecolors(d.data.make); });
​
    pie.append("text")
      .attr("transform", function(d) { 
        var midAngle = d.endAngle < Math.PI ? d.startAngle/2 + d.endAngle/2 : d.startAngle/2  + d.endAngle/2 + Math.PI ;
        return "translate(" + labelArc.centroid(d)[0] + "," + labelArc.centroid(d)[1] + ") rotate(-90) rotate(" + (midAngle * 180/Math.PI) + ")"; })
      .attr("dy", ".35em")
      .attr('text-anchor','middle')
      .text(function(d) { return (d.data.cars > 10000) ? d.data.make : null; });
});
​
</script>
​
<style>
​
body {
  font: 10px 'Open sans', sans-serif;
}
​
.line {
  fill: none;
  stroke: black;
  stroke-width: 1.2px;
}
​
div#chart {width: 100%;}
​
</style>
​
<body>
<div id="chart"></div>
</body>
    