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

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

JavaScript

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


    var data = [{
      "label": "Rendering",
      "value": 90,      
      "startcolor": "#c3da54",
      "endcolor": "#c1e500"
    },
    {
      "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 = 150;
    var w = 300;
    
		var options = {
      minlimit: 0,
      maxlimit: 100
    }

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

    var y = d3.scale.linear()
      .range([h, 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,5)");

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


    y.domain([options["minlimit"], options["maxlimit"]]);


    //__ bars
    var bar = barrectsholder.selectAll("rect")
      .data(data);

    //__ enter
    bar.enter()
      .append("rect")
      .attr("class", "bar")
      .attr("y", h);

    //__ update   
    bar
      .attr("y", h)
      .attr("height", 0)
      .style("fill", function(d){
      	return d.startcolor;
      })
      .transition()
     ...