Circular 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 = [120, 20];

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

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

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

  //cumulativeData += data[i];
  if (data[i] > 100) {
    var exceedingData = data[i] - 100;
    console.log("Exceeding: " + exceedingData);
    data[i] = data[i] - exceedingData;
  }

  console.log("Previous: " + previousData);
  console.log("Current Data: " + data[i]);
  var endAngle = (previousData + (data[i] / 50)) * Math.PI;
  console.log("Start " + startAngle, "End " + endAngle);
  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");

  arc.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(exceedingData > 0) {
    	arc.innerRadius(40).outerRadius(20)
    }

  startAngle = endAngle;

}