This is the first “Animal Donut Chart” example of the Blog Placing Texts on Arcs with D3.js in which the texts are placed at the start of each arc. All without writing the SVG path notations yourself.
Other examples of text along a path from the same blog
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Donut Chart - Default Labels</title>
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<!-- Month names -->
<link href='//fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Pacifico', sans-serif;
fill: #333333;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<div id="chart"></div>
<script>
////////////////////////////////////////////////////////////
//////////////////////// Set-up ////////////////////////////
////////////////////////////////////////////////////////////
var screenWidth = window.innerWidth;
var margin = {left: 20, top: 20, right: 20, bottom: 20},
width = Math.min(screenWidth, 500) - margin.left - margin.right,
height = Math.min(screenWidth, 500) - margin.top - margin.bottom;
var svg = d3.select("#chart").append("svg")
.attr("width", (width + margin.left + margin.right))
.attr("height", (height + margin.top + margin.bottom))
.append("g").attr("class", "wrapper")
.attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");
//////////////////////////////////////////////////////////////
///////////////////// Data & Scales /////////////////////////
//////////////////////////////////////////////////////////////
//Some random data
var donutData = [
{name: "Antelope", value: 15},
{name: "Bear", value: 9},
{name: "Cheetah", value: 19},
{name: "Dolphin", value: 12},
{name: "Elephant", value: 14},
{name: "Flamingo", value: 21},
{name: "Giraffe", value: 18},
{name: "Other", value: 8}
];
//Create a color scale
var colorScale = d3.scale.linear()
.domain([1,3.5,6])
.range(["#2c7bb6", "#ffffbf", "#d7191c"])
.interpolate(d3.interpolateHcl);
//Create an arc function
var arc = d3.svg.arc()
.innerRadius(width*0.75/2)
.outerRadius(width*0.75/2 + 30);
//Turn the pie chart 90 degrees counter clockwise, so it starts at the left
var pie = d3.layout.pie()
.startAngle(-90 * Math.PI/180)
.endAngle(-90 * Math.PI/180 + 2*Math.PI)
.value(function(d) { return d.value; })
.padAngle(.01)
.sort(null);
//////////////////////////////////////////////////////////////
//////////////////// Create Donut Chart //////////////////////
//////////////////////////////////////////////////////////////
//Create the donut slices
svg.selectAll(".donutArcSlices")
.data(pie(donutData))
.enter().append("path")
.attr("class", "donutArcSlices")
.attr("id", function(d,i) { return "donutArc"+i; })
.attr("d", arc)
.style("fill", function(d,i) {
if(i === 7) return "#CCCCCC"; //Other
else return colorScale(i);
});
//Append the label names on the outside
svg.selectAll(".donutText")
.data(donutData)
.enter().append("text")
.attr("class", "donutText")
.attr("dy", -13)
.append("textPath")
.attr("xlink:href",function(d,i){return "#donutArc"+i;})
.text(function(d){return d.name;});
</script>
</body>
</html>