JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.5.0"></script>

JavaScript

var data1 = [53245, 28479, 19697, 24037, 40245],
    data2 = [200, 200, 200, 200, 200],
     data3 = [2000, 2300, 5000, 4200, 1003],
    data = data1;
var width = 400,
    height = 400,
    outerRadius = Math.min(width, height) / 2,
    innerRadius = outerRadius * .6,
    
    color = d3.scale.category20(),
    donut = d3.layout.pie(),
    arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);

var vis = d3.select("body")
  .append("svg")
    .data([data])
    .attr("width", width)
    .attr("height", height);

var arcs = vis.selectAll("g.arc")
    .data(donut)
  .enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

arcs.append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

arcs.append("text")
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .attr("display", function(d) { return d.value > .15 ? null : "none"; })
    .text(function(d, i) { return d.value.toFixed(2); });
    
    d3.select(window).on("click", function() {
    alert("hiiiii");
    data=data3;
  data = data === data1 ? data3 : data1; // swap the data
  arcs = arcs.data(donut(data)); // recompute the angles and rebind the data
  alert("hiiiii234");
  arcs.transition().duration(750).attrTween("d", arcTween); 
  alert("hiiiii321456");// redraw the arcs
});

// Store the currently-displayed angles in this._current.
// Then, interpolate from this._current to the new angles.


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