JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="chart"></div>

CSS

#chart {
    width: 300px;
    height: 300px;
}

JavaScript

var chart = new PieChart()
.straightenLabels(true)
.labelSize('17px')
.labelColor('#FFFFFF')
.color(['#61C270', '#439CA8', '#EC7575'])
.labelText('d.data.count');

var data = [
    {category: 'Done', count: Math.floor(Math.random()*14) },
    {category: 'Remaining Assigned', count: Math.floor(Math.random()*14)},
    {category: 'Remaining Unassigned', count: Math.floor(Math.random()*14)}
];

d3.select('#chart')
.data([data])
.call(chart);

function PieChart() {

  var margin      = {top: 20, right: 20, bottom: 20, left: 20},
      beginDate   = '',
      endDate     = '',
      color       = d3.scale.category10(),
      oneColor    = '',
      labelSize   = '',
      labelColor  = '',
      labelText   = '',
      legend      = true,
      straightenLabels = false;

  function chart(selection) {
    selection.each(function(data)
    {
      var width = $(selection[0]).width()-margin.left-margin.right;
      var height = $(selection[0]).height()-margin.top-margin.bottom;

      
      radius = (Math.min(width, height) / 2 );
      arc    = d3.svg.arc().outerRadius(radius).innerRadius(0);

      data.forEach(function(d) {
        d.count = +d.count;
      });

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

      if (oneColor) {
        var newColors = [];
        for (var i = 0; i < data.length; i++) {
          var percent = 20*i;
          newColors.push(shadeColor(oneColor, percent));
        }
        color.range(newColors);
      }

      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([pie(data)]);

      // Otherwise, create the skeletal chart.
      var gEnter = svg.enter().append("svg").append("g");
      for (var i = data.length - 1; i >= 0; i--) {
        var piece = gEnter.append("g").attr("class", "arc");
        piece.append("path").style("opacity", 0);
        piece.append("g").attr("class", "label").append("text").style("opacity", 0);
      }
     ...