Donut chart 3

by Rob Carroll

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<div id="donut-wrapper">
  <div id="donut-chart">
  </div>
</div>

CSS

#donut-wrapper {
  width:400px;
}

JavaScript

var data = [{
    "fullname": "Abolitionists",
        "value": 98
}, {
    "fullname": "Abolitionists for ordinary crimes",
        "value": 7
}, {
    "fullname": "Abolitionists in practice",
        "value": 35
}, {
    "fullname": "Retentionist",
        "value": 58
}];

var donutWidth = document.getElementById('donut-wrapper').offsetWidth;
var donutHeight = (donutWidth + 40)/2
var radius = Math.min(donutWidth, donutHeight) / 2;

console.log (donutWidth);

var color = d3.scale.ordinal()
    .range(["#FFFF00", "#515151", "#808080", "#000000"]);

var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius * (50 / 100));

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.value; });

var svgPie = d3.select("#donut-chart").append("svg")
    .attr("width", donutWidth)
    .data([data])
    .attr("height", donutHeight)
  .append("g")
    .attr("transform", "translate(" + donutWidth / 2 + "," + donutHeight / 2 + ")");

  var gPie = svgPie.selectAll(".arc")
      .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  gPie.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.value); });

  gPie.append("text")
      .attr("transform", function(d) { 
        return "translate(" + ( (radius - 12) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) + "," + ( -1 * (radius - 12) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) + ")"; })
      .attr("dy", ".35em")
      .style("text-anchor", function(d) {
        var rads = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
        if ( (rads > 7 * Math.PI / 4 && rads < Math.PI / 4) || (rads > 3 * Math.PI / 4 && rads < 5 * Math.PI / 4) ) {
          return "middle";
        } else if (rads >= Math.PI / 4 && rads <= 3 * Math.PI / 4) {
          return "start";
        } else if (rads >= 5 * Math.PI / 4 && rads <= 7 * Math.PI / 4) {
          return "end";
        } else {
          return "middle";
      ...