JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.pie-graph-big-circle{ 
  fill: #4A877A
}

.pie-graph-small-circle{ 
  fill: #D6E3E3
}

JavaScript

var donutChart;
(function() {
  var w = 500,
   h = 300,
   r = 100,
   innerRadius = 80,
   transitionsDuration = 1000,
   transitionsDelay = 250,
   percentageTextSize = '2.0rem';

  // This is the scale to avoid using gradiant for the angles.
  var rScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);

  // Here we use the helper function of d3 to draw arcs easier
  var arc = d3.svg.arc()
    .outerRadius(r + 0.8)
    .innerRadius(innerRadius);

  // Another helper function of d3 to bind the data to the arcs
  var pie = d3.layout.pie()
    .value(function(d) {
      return d.value;
    });

  donutChart = {
    /**
     * A d3 function that draws a donut chart.
     */
    draw: function(container, data) {

      var svg = d3.select(container)
        .append('svg');

      createBigCircle(svg);
      var vis = createChartContainer(svg, data);
      drawChartArcs(vis, data);
      createSmallCircle(vis);
      drawPercentageText(vis, data);
      drawInformativeText(vis, data);

    }
  };

  // Here we create the big circle (the outer one)
  function createBigCircle(svg) {
    svg.append('circle')
      .attr('cx', r)
      .attr('cy', r)
      .attr('r', r)
      .attr('class', 'pie-graph-big-circle');
  }

  // Here we give dimensions to the svg and create a g container
  function createChartContainer(svg, data) {
    return svg
      .data([data])
      .attr('width', w)
      .attr('height', h)
      .append('g')
      .attr('transform', 'translate(' + r + ',' + r + ')');
  }

  // We draw the arc in here, give it an smooth transition and the correct color depending on the data.
  function drawChartArcs(visualization, data) {
    var arcs = visualization.selectAll('g')
      .data(pie)
      .enter()
      .append('g');

    arcs.append('path')
    /*.attr('transform', function(d){return 'rotate('+rotationAngle(d.value)+')' })*/
    .attr('fill', function(d, i) {
      return data[i].color;
    })
      .each(function(d) {
       ...