JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

<body>
	<div id="pie"></div>
</body>

CSS

#pie {
  background-color: #ffffff;
  border: 1px solid gray;
  font: 10px sans-serif;
  height: 300px;
  text-shadow: none;
  width: 450px;
}
#pie .total{
  font-size: 26px;
}
#pie .label{
  fill: #CCC;
  font-size: 20px;
}
#pie .value{
  font-size: 12px;
}

line{   
    display:block;
    stroke:grey;
}

JavaScript

start();
    
    function start(){

        var w = 450;
        var h = 300;
        var r = 100;
        var ir = 90;
        var center = w / 2;
        var textOffset = 14;

        //OBJECTS TO BE POPULATED WITH DATA LATER
        var lines, valueLabels, nameLabels;
        var pieData = [];    
        var oldPieData = [];
        var filteredPieData = [];

        //D3 helper function to populate pie slice parameters from array data
        var donut = d3.layout.pie().value(function(d){
          return d.number;
        });

        //D3 helper function to create colors from an ordinal scale
        var color = d3.scale.category20();

        //D3 helper function to draw arcs, populates parameter "d" in path object
        var arc = d3.svg.arc()
          .startAngle(function(d){ return d.startAngle; })
          .endAngle(function(d){ return d.endAngle; })
          .innerRadius(ir)
          .outerRadius(r);

        ///////////////////////////////////////////////////////////
        // GENERATE FAKE DATA /////////////////////////////////////
        ///////////////////////////////////////////////////////////

        var arrayRange = 100000; //range of potential values for each item
        var arraySize;
        var streakerDataAdded;


        ///////////////////////////////////////////////////////////
        // CREATE VIS & GROUPS ////////////////////////////////////
        ///////////////////////////////////////////////////////////

        var vis = d3.select("#pie").append("svg:svg")
          .attr("width", w)
          .attr("height", h);

        //GROUP FOR ARCS/PATHS
        var arc_group = vis.append("svg:g")
          .attr("class", "arc")
          .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");

  

        //GROUP FOR CENTER TEXT  
        var center_group = vis.append("svg:g")
          .attr("class", "center_group")
          .attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");



        var...