JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="modular-chart">
  <div class="pie-chart"></div>
</div>

CSS

body {
  background: #222;
}
.modular-chart {
  width: 800px;
  height: 800px;
}

JavaScript

var dataset = {
  inside: [53245, 28479, 19697, 24037, 40245],
  outside: [40245, 25203, 65232, 53092, 12035]
};

var $container = $('.modular-chart'),
  width = $container.width(),
  height = $container.height(),
  cwidth = 80;

var color = d3.scale.category20c();

var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc();

var svg = d3.select(".pie-chart").append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr('viewBox', '0 0 ' + Math.min(width, height) + ' ' + Math.min(width, height))
  .attr('preserveAspectRatio', 'xMinYMin')
  .append("g")
  .attr("transform", "translate(" + Math.min(width, height) / 2 + "," + Math.min(width, height) / 2 + ")")

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

var path = gs.selectAll("path")
  .data(function(d) {
    return pie(d);
  })
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", function(d, i, j) {
    return arc.innerRadius(cwidth + 280).outerRadius(cwidth * (j + 2.5))(d);
  })
  .on("mouseover", function(d, i, j) {
      d3.select(this)
        .transition()
        .duration(500)
        .style("fill", "white")
        .attr("d", d3.svg.arc().innerRadius(cwidth + 300).outerRadius(cwidth * (j + 2.5)))
  })
  .on("mouseout", function(d, i, j) {
    d3.select(this)
      .transition()
      .duration(500)
      .style("fill", color(i))
      .attr("d", d3.svg.arc().innerRadius(cwidth + 280).outerRadius(cwidth * (j + 2.5)))
  });