Circular Chart

by Rishabh Sharma

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg id="svg_donut" width="600" height="400"></svg>

JavaScript

data = [10, 20, 80];

var startAngle = 0;
var previousData = 0;
var cumulativeData = 0;

for (var i = 0; i < data.length; i++) {

  cumulativeData += data[i];

  var endAngle = (previousData + (data[i] / 50)) * Math.PI;
  previousData = previousData + data[i] / 50;

  //if(i===1) endAngle = 1.4 * Math.PI;
  //if(i===2) endAngle = 2 * Math.PI;

  var vis = d3.select("#svg_donut");

  var arc = d3.svg.arc()
    .innerRadius(80)
    .outerRadius(40)
    .startAngle(startAngle)
    .endAngle(endAngle);

  if (cumulativeData > 100) {
    var arc = d3.svg.arc()
      .innerRadius(160)
      .outerRadius(80)
      .startAngle(startAngle)
      .endAngle(endAngle);
  }

  vis.append("path")
    .attr("d", arc)
    .attr("transform", "translate(200,200)")
    .style("fill", function(d) {
      if (i === 0) return "red";
      if (i === 1) return "blue";
      if (i === 2) return "green";
    });

  startAngle = endAngle;

}