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">
<!-- <defs>
    <filter id="dropshadow" x="-40%" y="-40%" width="180%" height="180%" filterUnits="userSpaceOnUse">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> stdDeviation is how much to blur
      <feOffset dx="5" dy="5" result="offsetblur"/> 
      <feOffset dx="-5" dy="-5" result="offsetblur"/>
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs> -->
</div>

CSS

/* body{
  background : transparent;
} */


/* svg.append("defs")
.attr("id", "dropshadow")
.attr("x", "-40%")
.attr("y", "-40%").attr("width", "180%").attr("height", "180%") */

JavaScript

var pi = Math.PI, width=150,  height=150; var iR=65;  var oR=70;

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


var svg = d3.select("#dashboardBudgetDial")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")


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

var test = svg.append("defs")
var filter = test.append("filter").attr("id", "dropshadow")
.attr("x", "-40%")
.attr("y", "-40%").attr("width", "180%").attr("height", "180%")
.attr("filterUnits", "userSpaceOnUse")
filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation","3")
filter.append("feOffset").attr("dx", "5").attr("dy", "5").attr("result", "offsetblur")

filter.append("feOffset").attr("dx", "-5").attr("dy", "-5").attr("result", "offsetblur");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode");
feMerge.append("feMergeNode").attr("in", "SourceGraphic");
feMerge.append("feMergeNode").attr("in", "SourceGraphic");


var currentCircle = svg.append("circle")
						.attr("transform", "translate(0,"+ (180/2) +")")
            .attr("r", "5");
            
var centerCircle = svg.append("circle")
							.attr("class", "centerCircle")
              .attr("transform", "translate("+ 0 +","+ 0 +")")
              .attr("r", "50")
              .attr("fill","#efeff0")
              .style("filter", "url(#dropshadow)");
              
svg.append("text").attr("class","usedText");
svg.append("text").attr("class","usedPercent");
              
var circleBox = svg.select(".centerCircle").node().getBBox();

						svg.select(".usedText")
              .attr("x", (circleBox.width/2)+circleBox.x)
              .attr("y",-10)
              .style("alignment-baseline", "central")
              .style("text-anchor", "middle")
             ...