d3 chart

by Mariya Gnitetckaya

HTML

<div class="chart"></div>
<div class="chart"></div>

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

JavaScript

var item1 = {
	percent: 64,
  color: "#9575cd"
}

var item2 = {
	percent: 86,
  color: "#f5af05"
}

function addChart(data, el){

  var c = d3.rgb(data.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", data.color)
    .attr("d", arc);

  animate.transition()
    .duration(750)
    .attrTween("d", arcTween(data.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:' + data.color)
    .text(0)
    .transition()
    .duration(2000)
    //.ease('linear')
    .tween("text", function() {
      	var that = d3.select(this),
            i = d3.interpolateNumber(that.text(), +data.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:' + data.color);

}

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

addChart(item1, els[0]);
addChart(item2, els[1]);