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="gaugeConsumed" style="width:450px; height: 450px;">

</div>

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

</div>

<div id="gaugeCarbon" style="width:450px; height: 450px;">

</div>

CSS

body{
  background : transparent;
}

JavaScript

gaugeConsumed();
gaugeSpent();
gaugeCarbon();

function gaugeConsumed(){
var pi = Math.PI, width=350,  height=350; var iR=120;  var oR=130;

var arc = d3.arc().innerRadius(iR).outerRadius(oR).startAngle( -Math.PI/1.3).cornerRadius(10); 

var arcValue = d3.arc().innerRadius(145).outerRadius(165).startAngle( -Math.PI/1.3).cornerRadius(10);

var svg = d3.select("#gaugeConsumed")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
     
var background1 = svg.append("path").datum({endAngle: Math.PI/1.3}).attr("class", "bg-arc").style("fill", "#ddd").attr("d", arc);

var background = svg.append("path").datum({endAngle:  0}).style("fill", "none").attr("d", arc);


var nScale = d3.scaleLinear()
    			   .range([0, 280])
    			   .domain([0,100]);
              
var currentLine = svg.append("text").attr("transform", "translate(0,"+ (oR/2) +")") 
            .attr("text-anchor", "middle").style("font-size", "14").style("font-family", "Helvetica").text("|");

var currentValue = svg.append("text").attr("transform", "translate(0,"+ (oR/2) +")") 
            .attr("text-anchor", "middle").style("font-size", "16").style("font-family", "Helvetica").text("0").style("fill", "white");

            
svg.append("text").attr("class", "arc-label-gauge1");
svg.append("text").attr("class", "arc-label-kWh-gauge1");
svg.append("text").attr("class", "arc-label-title-gauge1");
svg.append("text").attr("class", "arc-label-percent-gauge1");

var arcBox = svg.select(".bg-arc").node().getBBox();
      svg.select("text.arc-label-title-gauge1")
        //.datum({score: data[0]})
        .attr("x", (arcBox.width/2)+arcBox.x)
        .attr("y", -50)
        .style("alignment-baseline", "central")
        .style("text-anchor", "middle")
        .style("font-size", "20px")
        .style("fill", "#0771b1")
        .text("Consumed");
        
    ...