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="gaugeConsm" style="width:350px; height: 350px;background: transparent">

</div>
<div id="gaugeSpent" style="width:450px; height: 450px;background: transparent">

</div>
<div id="gaugeCarbon" style="width:350px; height: 350px;background: transparent">

</div>

CSS

body{
  background: transparent;
}

JavaScript

/////////////////////////Gauge Consumed /////////////////////////////////////
gaugeConsumed();
function gaugeConsumed(){
var w = 350, h = 350; 
var svg = d3.select('#gaugeConsm').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(120)
    .outerRadius(130)
   // .cornerRadius(20)
    .startAngle(-Math.PI/1.3);
    
var arc2 = d3.arc()
    .innerRadius(120)
    .outerRadius(130)
    .startAngle(Math.PI/5.6); 
    
var arc3 = d3.arc()
    .innerRadius(120)
    .outerRadius(130)
    .startAngle(Math.PI/2); 
    
var arcValue = d3.arc()
    .innerRadius(155)
    .outerRadius(160)
    .startAngle(-Math.PI/1.3);
    
var arcLine = d3.arc()
    .innerRadius(125)
    .outerRadius(130)
    .startAngle(-Math.PI/1.3);
    
var g = svg.append("g").attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

var background = g.append("path")
    .datum({endAngle: Math.PI/1.3})
    .attr("class","bg-arc-consm")
    .style("fill", "#ddd")
    .attr("d", barc);
    
var insidearc1 = g.append("path")
    .datum({startAngle: -Math.PI/1.3,endAngle: Math.PI/5.6})
    .style("fill", "none")
    .attr("d", arc);
var insidearc2 = g.append("path")
    .datum({startAngle: Math.PI/5.6,endAngle: Math.PI/1.8})
    .style("fill", "none")
    .attr("d", arc2);
    
var insidearc3 = g.append("path")
    .datum({startAngle: Math.PI/1.8,endAngle: Math.PI/1.3})
    .style("fill", "none")
    .attr("d", arc3);

var currentLineConsm = g.append("text")
						.attr("transform", "translate(0,"+ (180/2) +")") 
            .attr("text-anchor", "middle").style("font-size", "14")
            .text("|");
            
var circleEnd = g.append("circle")            
								.attr("cx", 0)
                .attr('cy', 180/2)
       ...