JSFiddle - React, Tailwind, and code Playground

by mihaifm

HTML

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

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;
    });

    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], //get variables from here
                stroke: "#fff"
            }).click(function() {
                total += data[i];
                data[i] *= 2;
                animate();
            }).hover(function() {
                var p1 = this.attrs.path[1][1];
                var p2 = this.attrs.path[1][2];
                this.circle = r.circle(p1, p2,...