JSFiddle - React, Tailwind, and code Playground

by thewolff

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/min/g.raphael-min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/min/g.pie-min.js"></script>
<div id="holder"></div>

JavaScript

var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
    var flag = (a2 - a1) > 180,
        clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;
    return {
        path: [
            ["M", x, y],
            ["l", r * Math.cos(a1), r * Math.sin(a1)],
            ["A", r, r, 0, + flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)],
            ["z"]
        ],
        fill: "hsb(" + clr + ", .75, .8)"
    };
};

function animate(ms, d) {
    var start = 0,
        val,
        f = 0,
        easing = (firstx)? "linear" : "bounce";
    for (i = 0; i < d.length; i++) {
        console.log(paths[i]);
        val = 360 / total * d[i];
        paths[i].animate({
            segment: [200, 200, 150, start, start += val]
        }, ms || 1500, easing );
        paths[i].angle = 90+ val / 2;
        console.debug(i);
    }
 
    if(firstx){
        firstx = false;     
        setTimeout(function(){animateInit(f)},1000);        
    }
    
}

function animateInit(f) {
    console.debug('animateInit', datax, data, f);
       //for (i = 0; i < datax.length; i++) {
           datax[f] = data[f];
           
           setTimeout(function(){animate(1000, datax)},200);
        //}
    f++;
    if(f <  datax.length){
            animateInit(f);
    }            
}
var datax = [1, 1, 1, 1, 1],
    data = [50, 20, 12, 12, 6],
    paths = r.set(),
    total,
    start,
    firstx = true,
    bg = r.circle(200, 200, 100).attr({
        stroke: "#fff",
        "stroke-width": 4
    });
data = data.sort(function (a, b) {
    return b - a;
});
total = 0;
for (var i = 0, ii = data.length; i < ii; i++) {
    total += data[i];
}
total = 100;
start = 0;
for (i = 0; i < ii; i++) {
    var val = 360 / total * data[i];
    (function (i, val) {
        paths.push(r.path().attr({
            segment: [200, 200, 1, start, start + val],
            stroke: "#fff"
        }).click(function () {
            //total +=...