JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<div id="progress"></div>

CSS

body {
  background: #eeeeee;
}

path {
  stroke-width: 1px;
  stroke: #eeeeee;
}

.small {
  fill: steelblue;
}

.big {
  stroke: #666;
  fill: #ddd;
}

.small:hover {
  stroke: steelblue;
  fill: lightsteelblue;
}

.test {
  padding: 30px
}

#progress {
  position: relative;
  margin-top: 20px
}

.progresschart {
  background: white;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid grey;
  margin-top: 5px;
}

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.progresslabels {
  position: absolute;
  top: 0px;
  left: 0;
}

.labelsvals {
  fill: #ffffff;
}

JavaScript

var $this = $("#progress");



var data = [{
    "group": "Chinese",
    "value": 22.6,
    "children": [{
        "growth": 1277.4
  }]
}, {
    "group": "Portuguese",
    "value": 4.2,
    "children": [{
        "growth": 989.6
  }]
}, {
    "group": "Spanish",
    "value": 7.8,
    "children": [{
        "growth": 743.2
  }]
}, {
    "group": "Rest",
    "value": 17.8,
    "children": [{
        "growth": 588.5
  }]
}, {
    "group": "French",
    "value": 3.0,
    "children": [{
        "growth": 398.2
  }]
}, {
    "group": "English",
    "value": 27.3,
    "children": [{
        "growth": 281.2
  }]
}, {
    "group": "German",
    "value": 3.8,
    "children": [{
        "growth": 173.1
  }]
}, {
    "group": "Japanese",
    "value": 5.0,
    "children": [{
        "growth": 110.6
  }]
}, {
    "group": "Korean",
    "value": 2.0,
    "children": [{
        "growth": 107.1
  }]
}, {
    "group": "Arabic",
    "value": 3.3,
    "children": [{
        "growth": 2501.2
  }]
}, {
    "group": "Russian",
    "value": 3.0,
    "children": [{
        "growth": 1825.8
  }]
}];


var w = 250;
var h = w;

var radius = Math.min(w, h) / 2 - 50;

var svg = d3.select($this[0])
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .append("g")


svg.append("g")
    .attr("class", "innerslices");
svg.append("g")
    .attr("class", "slices");
svg.append("g")
    .attr("class", "labels");
svg.append("g")
    .attr("class", "labelsvals");


var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) {
        return d.value;
    });

const outerRadius=0.85;
const innerRadius=0.75;
const earthRadius=0.05;

const arc = d3.svg.arc()
    .outerRadius(radius * outerRadius)
    .innerRadius(radius * innerRadius);



const outerArc = d3.svg.arc()
    .innerRadius(radius - 20)
    .outerRadius(radius - 20);

const innerArc = d3.svg.arc()
    .innerRadius(radius - 55)
    .outerRadius(radius - 55);


svg.attr("transform", "translate(" + w / 2 + "," + h / 2 +...