Donut Chart with Transition when update

by kalar su

HTML

<div id='sliderContainer'>
		<input id='timeslide' type='range' min='0' max='11' value='0' step='1'/><br>
		<span id='range'>JAN 2016</span>
	</div>

JavaScript

var width = 450;
		height = 350;
    radius = Math.min(width, height) / 4;

var color = d3.scale.ordinal().range(['darkblue','steelblue','blue',  'lightblue']);

var pie = d3.layout.pie()
    .value(function(d) { return d['JAN2016']; })
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 50)
	.outerRadius(radius - 20);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr('transform', 'translate(' + 100 +',' + 75 + ')');

var period = ['JAN 2016','FEB 2016','MAR 2016', 'APR 2016', 'MAY 2016', 'JUN 2016',
'JUL 2016', 'AUG 2016', 'SEP 2016', 'OCT 2016', 'NOV 2016', 'DEC 2016'];
var pie_data = {
  'JAN2016': [16,4,1,30],
  'FEB2016': [17,4,0,30],
  'MAR2016': [16,5,1,29],
  'APR2016': [17,4,1,29],
  'MAY2016': [17,4,1,29],
  'JUN2016': [17,4,2,28],
  'JUL2016': [18,3,2,28],
  'AUG2016': [18,3,2,28],
  'SEP2016': [18,3,2,28],
  'OCT2016': [18,3,3,27],
  'NOV2016': [18,3,3,27],
  'DEC2016': [18,3,3,27]
};

var path = svg.datum(formatData(pie_data)).selectAll("path")
    .data(pie)
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc)
    .each(function(d) { this._current = d; }); // store the initial angles
    
d3.select('#timeslide').on('input', function() {
  change(this.value);
});

function change(key) {
 var value =  period[key].replace(' ','');
  document.getElementById('range').innerHTML=period[key];
  pie.value(function(d) { return d[value]; }); // change the value function
  path = path.data(pie); // compute the new angles
  path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

function formatData(data){
  return data[Object.keys(data)[0]].map(function(item, index){
    let obj = {};
    Object.keys(data).forEach(function(key){
      obj[key] = data[key][index]...