JSFiddle - React, Tailwind, and code Playground

by Abhishek Hingu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="widget">
    
    <div id="chart" class="chart-container">

    </div>
</div>

JavaScript

var percent = 48;

var percent1 = 60;



    var pie=d3.pie()
            .value(function(d){return d})
            .sort(null);

    var w=300,h=320;

    var outerRadius=(w/2)-10;
var plotRadius=(w/2)-10;
    var innerRadius=outerRadius-5;


    var color = ['#DDA0DD','white','#202b33'];

    var arc=d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius) 
            .startAngle(0)
            .endAngle(2*Math.PI);

    //The circle is following this
    var arcDummy=d3.arc()
            .innerRadius((outerRadius-innerRadius)/2+innerRadius)
            .outerRadius((outerRadius-innerRadius)/2+innerRadius)
            .startAngle(0);

    var arcDummy1=d3.arc()
            .innerRadius((outerRadius-innerRadius)/2+innerRadius)
            .outerRadius((outerRadius-innerRadius)/2+innerRadius)
            .startAngle(0);


    var arcLine=d3.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(2);
	console.log(arcLine());
    var svg=d3.select("#chart")
            .append("svg")
            .attr("width",w)
            .attr("height",h)
            .attr("class",'shadow')
            .append('g')
            .attr(
                "transform",'translate('+w/2+','+h/2+')'
            );


    //background
    var path=svg.append('path')
            .attr("d",arc)
            


    var pathForeground=svg.append('path')
            .datum({endAngle:0})
            .attr("d",arcLine)
            .attr("fill","#6730c0")
            

 var pathForeground1=svg.append('path')
            .datum({endAngle:0})
            .attr("d",arcLine)
                .attr("fill","none")
    //Dummy Arc for Circle
    var pathDummy=svg.append('path')
            .datum({endAngle:0})
            .attr("d",arcDummy).attr("fill","#6730c0");

var pathDummy1=svg.append('path')
            .datum({endAngle:0})
            .attr("d",arcDummy1).attr("fill","#4f4f6");




    /*var...