JSFiddle - React, Tailwind, and code Playground

by mihaifm

HTML

<div id="holder"></div>

CSS

#holder {
    height: 600px;
}

JavaScript

function drawgrowingpie() {

    var r = Raphael("holder");
    r.customAttributes.segment = function(x, y, r, a1, a2, clr, i) {
        var flag = (a2 - a1) > 180;
        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        clr = [".0",".12",".24",".36",".48",".60",".72",".84"];
        var props = {
            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"]]
        };
        
        if (clr) {              
            props.fill = "hsb(" + clr[i % clr.length] + ", .60, .77)";
        }                
        return props;
    };

    function animate(ms) {
        var start = 0,
            val;
        for (i = 0; i < ii; i++) {
            val = 360 / total * data[i];
            paths[i].animate({
                segment: [200, 200, 150, start, start += val, undefined, i]
            }, ms || 1500, "bounce");
            paths[i].angle = start - val / 2;
        }
    }
    var data = [100, 100, 100, 100, 100, 100, 100, 100],
        paths = r.set(),
        total, start, bg = r.circle(200, 200, 0).attr({
            stroke: "#fff",
            "stroke-width": 50
        });
    data = data.sort(function(a, b) {
        return b - a;
    });
    var colors = ["#c44e4e","#c4a34e","#90c44e","#4ec461","#4ec4b6","#4e7dc4","#744ec4","#c44ebf"];
    var names = ["heading1","heading2","heading3","heading4","heading5","heading6","heading7","heading8"],
    labelbg = r.rect(50,400,300,120,10).attr({fill:"#111111",stroke:"none",opacity:0}),
    total = 0;
    for (var i = 0, ii = data.length; i < ii; i++) {
        total += data[i];
    }
    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, val, i],stroke: "#fff"} 
                 ).click(function() {
                total += data[i];
...