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 maskOffset = 10;
        var center = w / 2;
        var textOffset = 14;        
        var max = 20;
        var min = 5;

        //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;
        
        //fake up some chart data
        var chartData = [];
        for(i=0; i<10; i++){
            min+=i;
            chartData[i] = {"valX":i,"valY":Math.floor(Math.random() * (max - min + 1)) + min};
        }


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

				//chart stuff start
        var xChart = d3.scale.linear()
            .range([0, ir*2]);

        var yChart = d3.scale.linear()
            .range([ir, 0]);

        var xAxis = d3.svg.axis()
           ...