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='http://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> |
