pie chart w/rotated labels

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js