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="checmicalbars">
</div>

CSS

body {
  background: #fef9e6;
}

path {
  stroke-width: 1.5px;
}

.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;
}

.bars {
  fill: #fde2c7;
}

JavaScript

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


    var data = [ {
      "label": "Character Design",
      "value": 95,
      "startcolor": "#e94adc",
      "endcolor": "#aae3dd"
    }, {
      "label": "Sketching",
      "value": 80,
      "startcolor": "#c3da54",
      "endcolor": "#fa5283"
    }, {
      "label": "Story Boarding",
      "value": 90,
      "startcolor": "#e94adc",
      "endcolor": "#f83b03"
    }, {
      "label": "Drawing",
      "value": 82,
      "startcolor": "#c3da54",
      "endcolor": "#f88504"
    }, {
      "label": "Painting",
      "value": 90,
      "startcolor": "#e94adc",
      "endcolor": "#f7d200"
    }];


    var h = 450;
    var w = 400;

    var barHeight = 150;
    var barWidth = 180;

    var options = {
      minlimit: 0,
      maxlimit: 100
    }


    // setup scales
    var x = d3.scale.ordinal()
      .rangeRoundBands([0, barWidth], .1);

    var y = d3.scale.linear()
      .range([barHeight, 0]);

    var xAxis = d3.svg.axis()
      .scale(this.x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(this.y)
      .orient("left");
    // setup scales


    // chart container
    var progresschart = d3.select($this[0]).append("svg")
      .attr("width", w)
      .attr("height", h)
      .append("g")
      .attr("transform", "translate(0,15)");

    var barrectsholder = progresschart.append("g")
      .attr("class", "barrectsholder")
      .attr("transform", "translate(15,0)");

    var labelsholder = progresschart.append("g")
      .attr("class", "labelsholder")
      .attr("transform", "translate(10," + (barHeight + 20) + ")");


    var valuelabelsholder = progresschart.append("g")
      .attr("class", "valuelabelsholder")
      .attr("transform", "translate(25," + (barHeight + 10) + ")");


    var valuelineholder = progresschart.append("g")
      .attr("class", "valuelineholder")
      .attr("transform", "translate(25,2)");


    var lineholder = progresschart.append("g")
      .attr("class", "lineholder")
   ...