JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<input type="range" class="areas" min="0" max="2000000" value="300000" />
<input type="range" class="areas" min="0" max="2000000" value="0" />
<input type="range" class="areas" min="0" max="2000000" value="0" />
<input type="range" class="areas" min="0" max="2000000" value="0" />
<input type="range" class="areas" min="0" max="2000000" value="0" />
<div id="holder"></div>

JavaScript

var APP = APP || {};    

$(document).ready(function() {
    var r = Raphael("holder");

    r.customAttributes.segment = function (x, y, r, a1, a2) {
        var flag = (a2 - a1) > 180;

        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        r0 = 50;

        return {
            path: [["M", x + r0 * Math.cos(a1), y + r0 * Math.sin(a1)], ["l", (r-r0) * Math.cos(a1), (r-r0) * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["l", (r0-r) * Math.cos(a2), (r0-r) * Math.sin(a2)], ["A", r0, r0, 0, +flag, 0, x + r0 * Math.cos(a1), y + r0 * Math.sin(a1)], ["z"]]
        };
    };

    var pieColors = [
        "green",
        "yellow",
        "purple",
        "black",
        "blue"
    ]

    APP.animate = function(ms) {
        var start = 0,
            val;
        
        $.each(data, function(index, key) {
            val = 360 / total * data[index];
            if (val > 1) {
                paths[index].animate({segment: [100, 100, 100, start, start += val]}, ms || 100, "bounce");
                paths[index].attr({fill: pieColors[index]});
            }
        });
    }

    APP.getSliderData = function() {
        var sliderData = {
            data: [],
            totalamount: 0
        }

        //Get amount of each slider
        $(".areas").each(function() {
            var amount = parseInt($(this).val(), 10) || 0;
            sliderData.totalamount += amount;
            sliderData.data.push(amount)
            //console.log("Amount", amount);
        });

        //Get percentage of each slider
        $.each(sliderData.data, function(index, key) {
            sliderData.data[index] = (key/sliderData.totalamount*100) || 0.000001;
            //console.log("Percentage per slider", (key/sliderData.totalamount*100) || 0.000001);
        });
        //console.log("Total amount", sliderData.totalamount);

        return sliderData;
    }

    var data = APP.getSliderData().data,
 ...