JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<div id="easy-as-pie-chart"></div>

CSS

#easy-as-pie-chart {
  background-color: #ffffff;
  border: 1px solid gray;
  font: 10px sans-serif;
  height: 300px;
  text-shadow: none;
  width: 450px;
}
#easy-as-pie-chart .total{
  font-size: 18px;
  font-weight: bold;
}
#easy-as-pie-chart .units{
  fill: gray;
  font-size: 12px;
}
#easy-as-pie-chart .label{
  fill: #CCC;
  font-size: 12px;
  font-weight: bold;
}
#easy-as-pie-chart .value{
  font-size: 12px;
  font-weight: bold;
}

JavaScript

var w = 450;
var h = 300;
var r = 100;
var ir = 45;
var textOffset = 14;
var tweenDuration = 250;

//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.octetTotalCount;
});

//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;

function fillArray() {
  return {
    port: "port",
    octetTotalCount: Math.ceil(Math.random()*(arrayRange))
  };
}

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

var vis = d3.select("#easy-as-pie-chart").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 LABELS
var label_group = vis.append("svg:g")
  .attr("class", "label_group")
  .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) + ")");

//PLACEHOLDER GRAY CIRCLE
var paths = arc_group.append("svg:circle")
    .attr("fill", "#EFEFEF")
    .attr("r",...