JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="dashboardBudgetDial" style="width:180px; height: 180px;background: transparent";>

</div>

JavaScript

var w = 150, h = 150; 
var svg = d3.select('#dashboardBudgetDial').append('svg').attr("id","radialConsm")
					.attr("preserveAspectRatio", "xMinYMin meet")
    			.attr("viewBox", "0 0 "+w+" "+h);
					//	.attr("width", w).attr("height", h);
/* var barc = d3.arc()
    .innerRadius(120)
    .outerRadius(130)
    .cornerRadius(20)
    .startAngle(-Math.PI/1.3); */
    
var arc = d3.arc()
    .innerRadius(65)
    .outerRadius(70)
   // .cornerRadius(20)
    .startAngle(-Math.PI);
    
/* var arc2 = d3.arc()
    .innerRadius(120)
    .outerRadius(130)
    .startAngle(Math.PI/2);  */
    
var arc3 = d3.arc()
    .innerRadius(65)
    .outerRadius(70)
    .startAngle(Math.PI/2); 
    
/* var arcValue = d3.arc()
    .innerRadius(155)
    .outerRadius(160)
    .startAngle(-Math.PI/1.3); */
    
var arcLine = d3.arc()
    .innerRadius(67)
    .outerRadius(70)
    .startAngle(-Math.PI);
    
var g = svg.append("g").attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");


    
var insidearc1 = g.append("path")
    .datum({startAngle: -Math.PI/1.3,endAngle: Math.PI/2})
    .style("fill", "none")
    .attr("d", arc);

    
var insidearc3 = g.append("path")
    .datum({startAngle: Math.PI/2,endAngle: Math.PI/1.1})
    .style("fill", "none")
    .attr("d", arc3);

var currentCircle = g.append("circle")
            .attr("transform", "translate(0,"+ (180/2) +")") 
            .attr("r",5);

var nScale = d3.scaleLinear()
    			   .range([0, 265])
    			   .domain([0,85]);  
             
var nScale3 = d3.scaleLinear()
    			   .range([255, 332])
    			   .domain([85,100]);
             
//Math.floor(Math.random() * 100) + 0              
let value = 1;
drawConsm(value);

setTimeout(function(){
	drawConsm(100);
}, 2000);
let colorData=[
          {offset: "0%", color: "#1e5799"},
          {offset: "50%", color: "#2989d8"},
          {offset: "100%", color: "#7db9e8"}];
          
 				svg.append("defs")
          .append("linearGradient")
          .attr("id",...