Circular Chart 1.2

HTML

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

JavaScript

data = [20, 240, 30];

var startAngle = 0;
var previousData = 0;
var exceedingData;
var cumulativeData = 0;
var remainder = 100;
var innerRadius = 60;
var outerRadius = 40;
var filledFlag;

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

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

  filledFlag = 0;
  exceedingData = 0;

  console.log("---------- Iteration: " + (i + 1) + "---------");

	// if current data point is greater than the remaining space in current circle then
  // mark the circle as 'filled' by a flag
  // calculate how much data is exceeding
  // make current data point equal to: [current data point - exceeding data] so that it can fit the current circle.
  // insert/push exceeding data as a new (next) element in array
  if (data[i] > remainder) {
    filledFlag = 1;
    exceedingData = data[i] - remainder;
    console.log("Exceeding: " + exceedingData);
    data[i] = data[i] - exceedingData;
    data.splice(i + 1, 0, exceedingData);
  }
  
  // tracking cumulative data so that we can know when to create a new circle
  // if a circle is complete, then we reset the cumulative data
  if( filledFlag === 1) {
  	cumulativeData = 0;
  } else {
  	cumulativeData += data[i];
  }

  console.log("Previous: " + previousData);
  console.log("Data: " + data, "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 "green";
      //if (i === 2) return "blue"
      //if (i === 3) return "orange"
      //if (i === 4) return "yellow";
    });
    
  // if current...