JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<head>
    <script src="http://d3js.org/d3.v2.js"></script>
</head>

JavaScript

var innerRadius = 120;
var outerRadius = 30;
var width       = 800;
var height      = 500;

var pie = d3.layout.pie()
                   .sort(null);
     
var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

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([1,1,1,1,1]))
                           .enter().append("path")
                           .attr("fill", "white")
                           .attr("d", arc)
                           .each(function(d) { this._current = d; }); // store the initial values

$(svg).bind("monitor", worker);
$(svg).trigger("monitor");

function worker(event) {
    var newRadius   = getRandomRadius();
    var newOuterRad = newRadius;
    var newInnerRad = newRadius/4;

    arc.innerRadius(newInnerRad)
       .outerRadius(newOuterRad);

    var jobs_counts = getRandomCounts();
    var jobs_colors = ["green", "yellow", "red", "blue", "cyan"];    
    path = path.data(pie(jobs_counts))
               .attr("fill", function(d,i) {return jobs_colors[i]})

    path.transition().duration(500).attrTween("d", arcTween);                                            
    setTimeout(function(){$(svg).trigger("monitor")}, 1000)
}                     
                     
// 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 getRandomCounts() {
    var arr = [];
    for (var i=0;i<5;i++) {
       arr.push(Math.floor(Math.random()*10)+1);
    }
   ...