D3.js donut chart

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var dataset = {
  apples: [532, 284],
};

    var degree = Math.PI/180;
    
    var width = 460,
        height = 300,
        radius = Math.min(width, height) / 2;
    
    var color = d3.scale.category20();
    
    var pie = d3.layout.pie().startAngle(-90*degree).endAngle(90*degree)
        .sort(null);
    
    var arc = d3.svg.arc()
        .innerRadius(50)
        .outerRadius(100);
    
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var path = svg.selectAll("path")
        .data(pie(dataset.apples))
      .enter().append("path")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc)
        .each(function(d) { this._current = d; }); // store the initial values;


window.setInterval(dummyData, 2000);

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

function dummyData(){
    var num = Math.floor(Math.random() * 100);
    var key = Math.floor(Math.random() * dataset.apples.length);
    
    dataset.apples[key] = num;
    
    draw();
};

function draw(){     
    svg.selectAll("path")
        .data(pie(dataset.apples))
    .transition()
    .duration(2500)
        .attrTween("d", arcTween);   
}