Circular Chart

Donut Chart 1.1

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];
  if (cumulativeData > 100) {
    var exceedingData = cumulativeData - 100;
    console.log(exceedingData);
    data[i] = data[i] - exceedingData;
  }

  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);


  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;

}

console.log(exceedingData);

var endAngle = (exceedingData / 50) * Math.PI;

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

  var arc2= d3.svg.arc()
    .innerRadius(120)
    .outerRadius(80)
    .startAngle(0)
    .endAngle(endAngle);


  vis.append("path")
    .attr("d", arc2)
    .attr("transform", "translate(200,200)")
    .style("fill", "green");