JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"></script>
	 <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<div id="viz"></div>

<button id='saveButton'>Export my D3 visualization to PNG</button>

JavaScript

d3.edge = {};
var svg, width, height;
d3.edge.donut = function module() {

	    width = 500,
	    height = 300,
	    radius = Math.min(width, height) / 2;

	var color =  d3.scaleOrdinal([
 	  "#A3A1FB", //PURPLE
    "#81C8FF", // blue
    "#FFA778", //ORANGE
    "#FFDA78", //YELLOW
    "#FF8373", //RED
  ]);



   var dispatch = d3.dispatch("customHover");
   function graph(_selection) {
       _selection.each(function(_data) {	
			var pie = d3.pie()
		    	.sort(null);
			
			var arc = d3.arc()
				.innerRadius(radius - 80)
				.outerRadius(radius - 20);
        
			var arcIn = d3.arc()
				.innerRadius(0)
				.outerRadius(radius - 85)
        .startAngle(Math.PI/2)
        .endAngle(Math.PI * 1.5);
        
      svg = d3.select(this).select("svg > g");
			if (svg.empty()){
				 svg = d3.select(this).append("svg")
         .attr("id", "pieSVG")
			    	.attr("width", width)
			    	.attr("height", height)
			    	.append("g")
			    	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
			}
      
        /* svg.append("path")
          .attr("class", "arc-cost")
          .style("fill","none")
          .attr("d", arcIn); */
          
       svg.append("line")
       	.attr("class", "arc-cost")
        .attr("x1", -60)
        .attr("x2", 60)
        .attr("y1", 0)
        .attr("y2", 0)
        .attr("stroke", "#778E9E")
          
        svg.append("text")
       		.attr("class","totalCost");
          
        svg.append("text")
       		.attr("class","totalCostValue");  
          
        svg.append("text")
       		.attr("class","totalConsm");    
         
       svg.append("text")
       		.attr("class","totalConsmValue");  
          
      var arcCostBox = svg.select(".arc-cost").node().getBBox(); 
      //console.log(arcCostBox)
        svg.select(".totalCost")
          		.attr("x", (arcCostBox.width/2)+arcCostBox.x)
              .attr("y",40)
              .style("alignment-baseline", "central")
             ...