JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<div id="topSpendPie" style="width:100%; height:300px;">

</div>
<!-- <button class="randomize">randomize</button> -->

CSS

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

 #tooltipTop3Pie {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    width : auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    padding : 5px;
  }

svg {
	width: 100%;
	height: 100%;
}

path.slice{
	stroke-width:2px;
}

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

JavaScript

var svg = d3.select("#topSpendPie")
	.append("svg")
	.append("g")

svg.append("g")
	.attr("class", "slices");
svg.append("g")
	.attr("class", "labels");
svg.append("g")
	.attr("class", "lines");


var tooltipPie = d3.select('body').append('div')
     .attr('id', 'tooltipTop3Pie');
     
var width = 500,
    height = 300,
	radius = Math.min(width, height) / 2;

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

var arc = d3.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(0);
  
var arc2 = d3.arc()
	.outerRadius(radius * 0.8)
	.innerRadius(radius * 0.8);
  
var outerArc = d3.arc()
	.innerRadius(radius * 0.8)
	.outerRadius(radius * 0.8);

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

var key = function(d){ return d.data.label; };

var color = d3.scaleOrdinal()
	.domain(["Lorem ipsum", "dolor sit", "amet"])
	.range(["#61c46d", "#f3a250", "#805cba"]);

function randomData (){
	var labels = [{label : "H&B #44",labelId:"#120009822532", value : 150, color: "#b44845"},{label : "H&B #43", labelId:"#120009822543", value : 250, color : "#ff6e40"},{label : "H&B #42", labelId:"#12000982232", value : 500, color :"#fbcf65" }];
  
//	var labels = color.domain();
	return labels.map(function(item, index){
      return { label: item.label, value: item.value , color: item.color, labelId : item.labelId}
	});
}

function randomData2 (){
	var labels = [{label : "H&B #44",labelId:"#120009822532", value : 1450, color: "#b44845"},{label : "H&B #43", labelId:"#120009822543", value : 250, color : "#ff6e40"},{label : "H&B #42", labelId:"#12000982232", value : 5010, color :"#fbcf65" }];
  
//	var labels = color.domain();
	return labels.map(function(item, index){
      return { label: item.label, value: item.value , color: item.color, labelId : item.labelId}
	});
}

change(randomData());
setTimeout(function(){
change(randomData());
})

/* setTimeout(function(){
change(randomData2());
},1000) */


function change(data)...