JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="distributionPie" style="width:50%; height:300px; background: gray;">

</div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
}
path.slice{
	stroke-width:2px;
}

polyline{
	stroke: #d0d0d0;
	stroke-width: 2px;
	fill: none;
}

JavaScript

$(function(){
    var $container = $('#distributionPie'),
        width = $container.width(),
        height = $container.height();
var svgDP = d3.select("#distributionPie")
	.append("svg")
  .attr('viewBox','0 0 '+width +' '+height)
  .attr('preserveAspectRatio','xMinYMin')
	.append("g")

svgDP.append("g")
	.attr("class", "slicesDP");
svgDP.append("g")
	.attr("class", "labelsDP");
svgDP.append("g")
	.attr("class", "linesDP");

    /* width = $container.width(),
    height = $container.height(); */
let radius = Math.min(width, height) / 2;

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

var arcDP = d3.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(0);
  
var arc2DP = d3.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(radius * 0.8);
  
var outerArcDP = d3.arc()
	.innerRadius(radius * 0.8)
	.outerRadius(radius * 0.8);

svgDP.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var keyDP = function(d){ return d.data.label; };
/* 
var color = d3.scaleOrdinal()
  .domain(["Lorem ipsum", "dolor sit", "amet"])
  .range(["#805cba", "#f3a250", "#468fcb"]); */

function randomDataDP (){
	var labels = [{label : "4 Active", value : 150, color: "#805cba"},{label : "3 Pending", value : 250, color : "#f3a250"},{label : "13 Completed", value : 500, color :"#468fcb" }];
  
//	var labels = color.domain();
	return labels.map(function(item, index){
      return { label: item.label, value: item.value , color: item.color}
	});
}
changeDP(randomDataDP());
setTimeout(function(){
changeDP(randomDataDP());
},0)
/* d3.select(".randomize")
  .on("click", function(){
    change(randomData());
  }); */


function changeDP(data) {

	/* ------- PIE SLICES -------*/
	var sliceDP = svgDP.select(".slicesDP").selectAll("path.sliceDP")
		.data(pie(data), keyDP);

	sliceDP.enter()
		.insert("path")
		.style("fill", function(d) { return d.data.color; })
		.attr("class", "sliceDP")
   //...