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>
    <script src="http://d3js.org/d3.superformula.v0.min.js"></script>
	
    <div id="progress">
        <div class="progresschart"></div>
        <div class="progresslabels"></div>
    </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 = $("#progress");

		var progress = {
			init : function(el, options) {

				var that = this;

			
				var orbWidth = options["radius"] *.3;
				var orbHeight = options["radius"] *.3;

				el.find('.progresschart').css({"width" : orbWidth, "height" : orbHeight});
									
				var data = [
				    {
				        "label": options["label"],
				        "y": 10,
				        "x": options["width"]-50,
				        "cx": orbWidth-10,
						"cy": orbHeight - (orbHeight * (options["value"]/100)),
				        "value" : options["value"]
				    }
				];


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

				this.y = d3.scale.linear()
				    .range([orbHeight, 0]);

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

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


				// chart container
				var progresschart = d3.select(el[0]).selectAll(".progresschart").append("svg")
				    .attr("width", orbWidth)
				    .attr("height", orbHeight)
						.append("g")
							.attr("transform", "translate(0,5)");

				 this.chart = progresschart.append("g")
				    .attr("class", "chart")
				    .attr("transform", "translate(-15,0)");
				// chart container
				 
				 //_label containers
				 var progresslabels = d3.select(el[0]).selectAll(".progresslabels").append("svg")
				     .attr("width", options["width"])
				     .attr("height", options["height"])
				     .append("g")
				     	.attr("transform", "translate(0,6)");

				var labels = progresslabels.append("g")
				    	.attr("class", "labels")        

				var pointers = progresslabels.append("g")
				    	.attr("class", "pointers")
				//_label containers
				        
				this.y.domain([options["minlimit"], options["maxlimit"]]);



		        var barrectsholder = d3.select(el[0]).selectAll(".chart"); 
				
				//__ bars
				var bar =...