JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "pie-chart"></div>

JavaScript

var width = 650;
var height = 400;

var animationDuration = 2500; 

var chartData = [
        {Task:"One", Volume: 25},
        {Task:"Two",Volume: 3},
        {Task:"Three",Volume: 6},
        {Task:"Four",Volume:7},
        {Task:"Five",Volume:2},
];

   

    var radius = Math.min(width, height) / 2.3;
    var legendRectSize = 12;
    var legendSpacing = 4;
    var sum = d3.sum(chartData, function (d) { return d.Volume });
    var labelRadius = radius + 13;
   

    var color = d3.scale.category20();

    var chart = d3.select("#pie-chart")
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .append('g')
      .attr('transform', 'translate(' + (width / 2) + 
        ',' + (height / 2) + ')');

    var arc = d3.svg.arc()
      .innerRadius(0)
      .outerRadius(radius);

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

            
    chartData.forEach(function(d) {
        d.Volume = +d.Volume;
        d.enabled = true;                                         
    });

    var path = chart.selectAll('path')
      .data(pie(chartData))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr("class", "arc")
      .attr('fill', function(d, i) { 
          return color(d.data.Task); 
      })                                                       
      .each(function(d) { this._current = d; });                

            
    var legend = chart.selectAll("#pie-chart")
      .data(color.domain())
      .enter()
      .append('g')
      .attr("position", "absolute")
         .attr('class', 'pieLegend')
      .attr('transform', function(d, i) {
          var height = legendRectSize + legendSpacing;
          var offset = height * color.domain().length / 2;
          var horz = -19 * legendRectSize;
          var vert = i * height - (offset)*3;
          return 'translate(' + horz + ',' + vert + ')';
      });

    legend.append('rect')
      .attr('width',...