Donut-chart

by Raúl Rojas

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="graph" class="donut-chart" 
     data-amounts="3.57,3.57,3.57,3.57"
     data-fills="gray,green,blue,red"
     data-size="204"
     data-thickness="26">
 </div>

CSS

.donut-chart { 
width: 204px; 
height: 204px; 
margin: 20px; 
background:yellow;
border-radius:250px;
}

JavaScript

drawDonut("#graph");


function drawDonut(elem){
  var node = document.querySelector(elem);
  var width = height = node.getAttribute("data-size") || 204;
  var thickness = node.getAttribute("data-thickness") || 26;
  var duration = node.getAttribute('data-duration') || 850;
  var delay = node.getAttribute('data-delay') || 100;
  var amounts = node.getAttribute("data-amounts").split(",");
  var fills = node.getAttribute("data-fills").split(",");
  
  var radius = Math.min(width, height) / 2;
  var pie = d3.layout.pie().sort(null);
  
  var svg = d3.select(elem).append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	
  var arc = d3.svg.arc()
      .innerRadius(radius - thickness)
      .outerRadius(radius);
  
  svg.selectAll("path")
    .data(pie(amounts))
    .enter()
    .append("path")
    .style("fill", function(d, i) { return fills[i]; })
    .attr("d", arc)
  	.transition()
    .delay(delay)
    .duration(duration)
    .call(arcTween);
  
  function arcTween(transition) {
    transition.attrTween("d", function(d) {
      var interpolate = d3.interpolate(d.startAngle, d.endAngle);
      return function(t) {
        d.endAngle = interpolate(t);
        return arc(d);
      };
    });
  }
}