JSFiddle - React, Tailwind, and code Playground

by philippkuehn

HTML

<script src="http://dev.philipp-kuehn.com/donutchart/js/dragdealer.js"></script>
<div class="wrapper">   
    <div class="content">
        <div class="legend"></div>
        
        <div class="donutchart">
            <div class="graph"></div>
            <div class="graph-center"></div>
        </div>
    </div>
    
    <div class="dragdealer" id="year">
        <div class="slideLabel bar handle">2000</div>
    </div>
</div>

CSS

* {
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    box-sizing : border-box;
    margin: 0px;
    padding: 0px;
    }

html, body {
    width: 100%;
    height: 100%;
    font-family: Tahoma, Geneva, sans-serif;
    }
    
.wrapper {
    margin: 0px auto;
    position: relative;
    width: 600px;
    overflow: hidden;
    }

.content {
    margin: 50px 0px;
    overflow: hidden;
    }









.donutchart {
    width: 300px;
    height: 300px;
    float: right;
    position: relative;
    }
    
.graph {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    -webkit-transform: rotate(0deg) scale(0);
    -moz-transform: rotate(0deg) scale(0);
    transform: rotate(0deg) scale(0);
    }

.graph.graph-startanimation {
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    -webkit-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
    }

.graph-center {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    z-index: 101;
    }

.pie, .pie > div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s ease-out;
    -moz-transition: -moz-transform 0.5s ease-out;
    transition: transform 0.5s ease-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    }

.pie > div {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    }

.pie > div > div {
    width: 50%;
    height: 100%;
    border-right: 3px solid #fff;
    }






.legend {
    clear: left;
    float: left;
    font-size: 15px;
    width: 150px;
   ...

JavaScript

jQuery(document).ready(function($) {
    
    dataArray = {
        'value1': {    
            'label': 'Value 1',
            'value': [500,200,150,60,30,25,30,15,300,30],
            'color': '#333'
            },
        'value2': {
            'label': 'Value 2',
            'value': [10,15,20,30,35,30,300,60,60,65],
            'color': '#555'
            },
        'value3': {
            'label': 'Value 3',
            'value': [80,70,60,30,325,45,20,25,10,5],
            'color': '#777'
            },
        'value4': {
            'label': 'Value 5',
            'value': [30,500,60,300,35,45,200,25,10,50],
            'color': '#999'
            },
        'value5': {
            'label': 'Value 5',
            'value': [20,150,20,70,35,40,300,40,60,30],
            'color': '#bbb'
            }
    };
    
    for (var i in dataArray) {
        if (dataArray.hasOwnProperty(i) && typeof(i) !== 'function') {
            var first = dataArray[i],
                numYear = first.value.length;
            break;
        }
    }
    
    var sum = [];
    for (i = 0; i <= numYear - 1; i++) {
        sum[i] = 0;
        $.each(dataArray, function(key, data) {
            sum[i] += data.value[i];
        });
        $.each(dataArray, function(key, data) {
            var percent = (100 / sum[i]) * data.value[i];
            data.value[i] = percent;
        });
    }

    var startYear = 2000,
        year = startYear,
        slice = 0,
        graph =  $('.graph');
        leg = $('.legend');
    
    $('.slideLabel').text(year);
    setTimeout(function(){
        new Dragdealer('year', {
            steps: numYear,
            snap: true,
            animationCallback: function(x, y){
                slice = (x == 1) ? Math.floor((x * numYear) - 1) : Math.floor(x * numYear);
                year = startYear + slice;
                $('.slideLabel').text(year);
                updateData(slice);
            }
        });
    }, 100);
    
    function...