JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
/*     .arc{
      stroke: #fff;
    } */
    .svg{
      border:1px solid black;
    }
    .legendText{
      font-size: 12px;
      font-weight: bold;
      font-family: sans-serif;    
      }
    </style>
</head>
<body>
	<svg width="540" height="400" class="svg"> </svg>
	<script>
		var yuva = [1,2,3,4,5,6,7,8];
var datajson = [
      {value: 57.77,name:"Npower Limited"},
      {value: 19.4,name:"Engie Limited"},
      {value: 14.04,name:"Total Gas"},
      {value: 10.21,name:"Corona Energy "},
      {value: 9.53,name:"SSE"},
      {value: 1.07,name:"Yorkshire Gas"},
      {value: 1,name:"ISE"},
      {value: 1,name:"Orsted Energy"},
      {value: 0.91,name:"Haven Power"},
			{value: 0.35,name:"Contract Gas"},
      {value: 0.17,name:"Crown Energy"},
      {value: 0.05,name:"British Gas"}
    ];
		var svg = d3.select("svg"),
			width = svg.attr("width"),
			height = svg.attr("height"),
			radius = Math.min(width, height) / 2,
			g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 3 + ")");
		var color = d3.scaleOrdinal(['#ffa600','#ff7c43','#f95d6a','#d45087','#a05195','#665191','#2f4b7c','#003f5c']);
		var pie = d3.pie()
   .value(function(d) {
        return d.value;
      })
		var arc = d3.arc()
					.innerRadius(0)
					.outerRadius(radius - 100)
          .padAngle(.02)
          .padRadius(100)
          .cornerRadius(4);
		var arcs = g.selectAll("arc")
		      .data(pie(datajson))
		      .enter()
		      .append("g")
		      .attr("class", "arc")
		          
		arcs.append("path")
		  .attr("fill", function(d, i) {
		    return color(i);
		  })
			.attr("d", arc);
    var n = datajson.length/3;
    var itemWidth =120;
    var itemHeight = 25;
    var legend = svg.selectAll(".legend").attr("transform","translate(" + width + "," + height +")")
	.data(datajson)
	.enter()
	.append("g")
	.attr("transform", function(d,i) { return...