JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="donutchart">
        <div class="graph"></div>
        <div class="graph-center"></div>
    </div>
    <div class="buttons">
        <a class="button button-active" href="#" data-id="0">1</a>
        <a class="button" href="#" data-id="1">2</a>
        <a class="button" href="#" data-id="2">3</a>
    </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: Verdana, Geneva, sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #172e4c;
    overflow: hidden;
    }
    
.wrapper {
    position: relative;
    width: 400px;
    padding: 50px;
    margin: 0px auto;
    background: #fff;
    }

.buttons {
    position: relative;
    margin: 25px 0px;
    overflow: auto;
    z-index: 900;
    }

.button {
    display: block;
    width: 33.333%;
    float: left;
    padding: 5px;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background: #eee;
    -moz-box-shadow: inset 0 0 10px #ccc;
    -webkit-box-shadow: inset 0 0 10px #ccc;
    box-shadow: inset 0 0 10px #ccc;
    }

.button.button-active {
    cursor: default;
    }

.button.button-active,
.button:hover {
    border-left: 1px solid #fff;
    color: #eee;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #222;
    -webkit-transition: background 0.2s ease-out;
    -moz-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
    }

.button:first-child {
    border-left: none;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }

.button:last-child {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    }

/* DONUTCHART */

.donutchart {
    width: 300px;
    height: 300px;
    position: relative;
    }
    
.graph {
    position: absolute;
   ...

JavaScript

jQuery(document).ready(function($) {

    dataArray = {
        'value1': {
            'value': [220,150,100],
            'color': '#222'
            },
        'value2': {
            'value': [40,20,30],
            'color': '#444'
            },
        'value3': {
            'value': [80,60,20],
            'color': '#666'
            },
        'value4': {
            'value': [20,40,80],
            'color': '#888'
            },
        'value5': {
            'value': [50,0,30],
            'color': '#aaa'
            }
    };
    
    var sum = [],
        $chart = $('.donutchart'),
        $graph = $('.graph');
    
    // count values
    for (var i in dataArray) {
        if (dataArray.hasOwnProperty(i) && typeof(i) !== 'function') {
            var first = dataArray[i],
                count = first.value.length;
            break;
        }
    }
    
    // calculate values
    for (i = 0; i <= count - 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;
        });
    }
    
    function updateData(y){
        var angTot = 0,
            angCur = 0;    
        
        $.each(dataArray, function(key, data) {
            angCur = Math.round(data.value[y] * 36) / 10;
            $('.' + key + '-2').css('transform', 'rotate(' + angTot + 'deg)');
            
            // if > 50% we need a second part
            if (data.value[y] > 50){
                $('.' + key + '-2 > div').css('transform', 'rotate(' + 180 + 'deg)');
                angTot += 170;
                angCur -= 170;
            } else {
                $('.' + key + '-2 > div').css('transform', 'rotate(0deg)');
            }
            
            $('.' + key).css('transform', 'rotate(' + angTot + 'deg)');
            $('.' + key + ' > div').css('transform',...