JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

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

JavaScript

var APP = APP || {};    

$(document).ready(function() {
    var r = Raphael("holder");
    var minAmount = 1;
    
    var pieColors = [
        "green",
        "yellow",
        "purple",
        "orange",
        "blue"
    ]
    
    
    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"]]
        };
    };

    APP.animate = function(ms) {
        var start = 0,
            val;
        
        $.each(data, function(index, key) {
            val = 360 / total * data[index];
            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(index, key) {
            var amount = parseInt($(this).val(), 10);
            sliderData.totalamount += (amount > minAmount ? amount : minAmount);
            sliderData.data.push(amount);
        });

        //Get percentage of each slider
        $.each(sliderData.data, function(index, key) {
            console.log("Amount for " + (index+1) + ":", key + " (" + (key/sliderData.totalamount*100).toFixed(2) + "%)");
            sliderData.data[index] = key/sliderData.totalamount*100;
        });

        return sliderData;
    }

    var data = APP.getSliderData().data,
        paths = r.set(),
        total,
        start,
        bg =...