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" 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

//http://jsfiddle.net/Ex2jr/

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;

        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"]]
        };
    };

    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];
            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,
        paths = r.set(),
        total,
        start,
        bg = r.circle(100, 100, 0);

    data = data.sort(function (a, b) { return b - a;});

    total = 0;

    for (var i = 0, ii = data.length; i < ii;...