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>
<svg id="svg_donut" width="500px" height="500px"></svg>

JavaScript

var cScale = d3.scaleLinear().domain([0, 100]).range([0, 2 * Math.PI]);

var data = [[0,40,"blue", 70, 125, 0],[40,60,"red", 70, 125, 1], [60,75,"green", 70, 125, 2], [75,100,"orange", 70, 125, 3],

/* [0,40,"blue", 155, 175],[40,60,"red", 130, 150], [60,75,"green", 130, 150], [75,100,"orange", 130, 150], */

[25,75,"black", 0, 65, 4]];
  
var vis = d3.select("#svg_donut");
var width = 500,
		height = 500;
    
 
var arc = d3.arc()
.innerRadius(function(d){
return (d[3]);})
.outerRadius(function(d){
return (d[4]);})
.startAngle(function(d){
return cScale(d[0]);})
.endAngle(function(d){return cScale(d[1]);});
var pie = d3.pie()
	    .sort(null)
	    .value(function(d) {
      console.log(d[2])
	        return d[1];
	    });
      
vis.selectAll("path")
.data((data))
.enter()
.append("path")
.attr("d", arc)
.attr("class", "slice")
.attr("id", function(d){return d[5];})
.style("fill", function(d){return d[2];})
.attr("transform", "translate(300,200)");

vis.append("text")
	.attr("x", width/1.7)
  .attr("y", height/2.7)
  .attr("dy", "0.5em")
  .attr("text-anchor", "middle")  
  .attr("style", "fill: blue; font-size: 12px")
  .text("Total Usage")

vis.append("text")
	.attr("x", width/1.7)
  .attr("y", height/3.1)
  .attr("class", "tu")
  .attr("dy", "0.5em")
  .attr("text-anchor", "middle")  
  .attr("style", "fill: blue; font-size: 16px")
  .text("0.00")
  
vis.append("text")
  .attr("x", width/1.7)
  .attr("y", height/2.3)
  .attr("class", "tc")
  .attr("dy", "0.5em")
  .attr("text-anchor", "middle")  
  .attr("style", "fill: white; font-size: 16px")
  .text("0.00")

vis.append("text")
  .attr("x", width/1.7)
  .attr("y", height/2.1)
  .attr("dy", "0.5em")
  .attr("text-anchor", "middle")  
  .attr("style", "fill: white; font-size: 12px")
  .text("Total Charges")
  
let arr = [];
 setTimeout(function(){
 		$('.tu').text('1000.00');
    $('.tc').text('2000.00');
 }, 1000);

var toggleSelected = true;

  d3.select('[id="'+4+'"]').classed("slice", false);
  	
...