JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="legend" class="legend" style="display:table;float:left"></div>
<div id="donut" class="donut" style="display:table"></div>

JavaScript

var dataset = {
  data: [15, 20, 7, 37, 40],
  names : ['label1','label2','label3','label4','label5']
};

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2,
    labelr = radius - 30; // radius for label anchor
	
var color = d3.scale.ordinal().range(["red", "blue", "green", "pink", "grey"]);

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

var svg = d3.select(".donut").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.data))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

path.transition()
    .duration(1000)
    .attrTween('d', function(d) {
        var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
        return function(t) {
            return arc(interpolate(t));
        };
    });


var text=svg.selectAll('text')
  .data(pie(dataset.data))
  .enter()
  .append("text")
  .transition()
  .duration(1000)
.attr("transform", function (d) {
	console.log(d);
	console.log(arc.centroid(d));
	 var c = arc.centroid(d),
            x = c[0],
            y = c[1],
			h = Math.sqrt(x*x + y*y);
   return "translate(" + (x/h * labelr) +  ',' +
           (y/h * labelr) +  ")";
  })
  .attr("dy", ".4em")
  .attr("text-anchor", "middle")
  .text(function(d){
      return d.data +"%";
  })
  .style({
      fill:'#000',
      'font-size':'11px'
  });	
  
//below we append the legend.
 

var svg2 = d3.select(".legend").append("svg")
    .attr("width", 150)
    .attr("height", 150)
    .append("g")
    .attr("transform", "translate(10,0)");

var legendRectSize=15;
var legendSpacing=10;
var legendHeight=legendRectSize+legendSpacing;
 
 var legend=svg2.selectAll('.legend')
  .data(dataset.names)
  .enter()
  .append('g')
  .attr({
     ...