d3 chart dataset

by Mariya Gnitetckaya

HTML

<div class="chart" data-percent="64" data-color="#9575cd"></div>
<div class="chart" data-percent="86" data-color="#f5af05"></div>

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var elements = document.querySelectorAll('.chart');

[].forEach.call(elements, function(el){
	var percent = +el.dataset.percent;
  var color = el.dataset.color;
  
  var c = d3.rgb(color);
  var rgba = 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',.15)';

  var tau = 2 * Math.PI,
      w = 120,
      h = 120;

  var arc = d3.arc()
    .outerRadius(60)
    .innerRadius(55)
    .startAngle(0);

  var svg = d3.select(el).append('svg:svg')
    .attr('width', w)
    .attr('height', h);

  var arcs = svg
    .append('svg:g')
    .attr('class','arc')
    .attr('transform', 'translate(' + w/2 + ',' + h/2 + ')');

  arcs.append('svg:path')
    .datum({endAngle: tau})
    .style("fill", rgba)
    .attr("d", arc);

  var animate = arcs.append('svg:path')
    .datum({endAngle:0})
    .style("fill", color)
    .attr("d", arc);

  animate.transition()
    .duration(750)
    .attrTween("d", arcTween(percent/100 * tau));

  function arcTween(newAngle) {
    return function(d) {
      var interpolate = d3.interpolate(d.endAngle, newAngle);
      return function(t) {
        d.endAngle = interpolate(t);
        return arc(d);
      }
    }
  }
	
	arcs.append('svg:text')
    .attr('dy', '10px')
    .attr('dx', '-30px')
    //.attr('text-ancor','middle')
    .attr('style','font-family: Arial; font-size: 32px; fill:' + color)
    .text(0)
    .transition()
    .duration(2000)
    .tween("text", function() {
      	var that = d3.select(this),
            i = d3.interpolateNumber(that.text(), percent);
      return function(t) { 
      	that.text(Math.round(i(t))); 
      };
    })
 
    arcs.append('svg:text')
    .attr('dy', '10px')
    .attr('dx', '15px')
    .attr('text-ancor','middle')
    .text('%')
    .attr('style','font-family: Arial; font-size: 20px; fill:' + color);
})