JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="pieDashboard"></div>
<button id="resetBtn">
Reset
</button>

CSS

/* body{
  background : #2c2b29
} */

JavaScript

d3.edge = {};

 var margin = {
     top: 5,
     right: 5,
     bottom: 5,
     left: 5
   };
   
	var width = 500,
	    height = 300,
	    radius = Math.min(width, height) / 2;
     var arc1 = d3.arc()										
        .innerRadius(radius - 80)
        .outerRadius(radius - 15);
     var arc2 = d3.arc()										
        .innerRadius(radius - 80)
        .outerRadius(radius - 25);
     var arc3 = d3.arc()										
        .innerRadius(radius - 80)
        .outerRadius(radius - 35);
        
		 var arc4 = d3.arc()
				.innerRadius(radius - 80)
				.outerRadius(radius - 45);   
     var arc = d3.arc()
      .innerRadius(radius - 80)
      .outerRadius(radius);
      var arcArr = [{"arc1" : arc1, "arc2": arc2, "arc3": arc3,"arc4" : arc4}];
      
d3.edge.donut = function module() {


	var color =  d3.scaleOrdinal(['#EF5350', '#E6C451', '#0B67B2', '#61C46E']);

var innerCircleColor = d3.scaleOrdinal(["#FEE1E1","#FFF4D2","#D0E5F3","#E4FBE6"]);


   var dispatch = d3.dispatch("customHover");
   function graph(_selection) {
       _selection.each(function(_data) {	
			var pie = d3.pie()
		    	.sort(null)
          .value(function (d) {
              return d.value;
          });
			        
        
        
			var arcIn = d3.arc()
				.innerRadius(0)
				.outerRadius(radius - 79)
        .startAngle(Math.PI)
        .endAngle(-Math.PI);
        
      var svg = d3.select(this).select("svg > g");
			if (svg.empty()){
				 svg = d3.select(this).append("svg")
			    	.attr("width", width)
			    	.attr("height", height)
			    	.append("g")
			    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
			}
      
      var test = svg.append("defs")
      var filter = test.append("filter").attr("id", "dropshadow")
      .attr("x", "-40%")
      .attr("y", "-40%").attr("width", "100%").attr("height", "100%")
      .attr("filterUnits", "userSpaceOnUse")
      filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation","3")
     ...