JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div class="box">
<h3>Basic usage</h3>
<div class="chart" data-value="30"></div>
</div>
<div class="box">
<h3>Text hover effects</h3>
<div class="chart" data-value="50" data-primary-label-text-hover="Test" data-secondary-label-text="Text secondary" data-secondary-label-text-hover="Text hover" data-gray-lines="0"></div>
</div>
<div class="box">
<h3>Full circle with multiple lines</h3>
<div class="chart" data-value="80" data-circle="360" data-stop-color="red" data-gray-lines="8"></div>
</div>
<div class="box">
<h3>3/4 circle with custom text</h3>
<div class="chart_custom" data-value="80" data-circle="360" data-stop-color="green" data-gray-lines="8" data-primary-label-text-hover="Left"></div>
</div>

CSS

.box {
    float: left;
    margin-right: 10px;
}
.d3SimpleGauge {
  cursor: pointer; }
  .d3SimpleGauge .background {
    fill: transparent; }
  .d3SimpleGauge .showHover {
    opacity: 0; }
  .d3SimpleGauge .primaryLabels > text {
    text-anchor: middle; }
  .d3SimpleGauge .secondaryLabels > text {
    text-anchor: middle;
    fill: #f9a535; }
  .d3SimpleGauge .showHover, .d3SimpleGauge .hideHover {
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    transition: opacity .3s ease-in-out; }
  .d3SimpleGauge:hover .hideHover {
    opacity: 0; }
  .d3SimpleGauge:hover .showHover {
    opacity: 1; }

JavaScript

/*
D3 simple gauge chart based on radialProgress on BrightPoint Consulting, Inc. example for gauge charts in d3.
 */
(function(){var t=[].slice
!function(r,e){var a
return a=function(){function t(e,a){this.$el=r(e),this.options=r.extend({},this.defaults,a,this.$el.data()),this._arc=d3.svg.arc().startAngle(0*t.DEG_TO_RAD),this._arcLines=d3.svg.arc(),this._arcRedPoint=d3.svg.arc(),this.options.circle/=2,this.draw()}return t.prototype.defaults={duration:1e3,value:50,margin:{top:0,right:0,bottom:30,left:0},showHoverClass:"showHover",hideHoverClass:"hideHover",width:170,height:140,circle:180,diameter:200,primaryLabelText:function(t){return Math.round(t)+"%"},primaryLabelTextHover:"",secondaryLabelText:"",secondaryLabelTextHover:"",grayLines:5,spaceBetweenGrayLines:7,startColor:"#f9a535",stopColor:"#f48e07",primaryFontSize:34,secondaryFontSize:10},t.MIN_VALUE=0,t.MAX_VALUE=100,t.DEG_TO_RAD=Math.PI/90,t.prototype._currentArc=0,t.prototype._currentValue=0,t.prototype._arc=null,t.prototype._arcLines=null,t.prototype._arcRedPoint=null,t.prototype._svg=null,t.prototype._myPath=null,t.prototype._rad=72,t.prototype.meassure=function(){var t,r,e
return t=this.options.margin,this.options.width=this.options.diameter-t.right-t.left-t.top-t.bottom,this.options.height=this.options.width,this.options.fontSize=.2*this.options.width,r=this.options.width/2.3,e=this.options.width/2.339,this._arc.outerRadius(r),this._arc.innerRadius(.97*r),this._arcLines.outerRadius(r),this._arcLines.innerRadius(.97*r),this._arcRedPoint.outerRadius(e),this._arcRedPoint.innerRadius(.97*e)},t.prototype.createGradient=function(){return...