JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Sunburst with Distortion</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
    <style type="text/css">

    </style>
  </head>
    <body>
  </body>
</html>

CSS

path {
  stroke: #fff;
}
.tooltip, .tooltip-pending-removal {
  position: absolute;
  background-color: rgba(255,255,255,1);
  padding: 10px;
  border: 1px solid #ddd;
  z-index: 10000;
  display: inline-block;
  font-family: Arial;
  font-size: 13px;
  border-radius: 10px;

  pointer-events: none;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.tooltip {

  transition: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear;

  transition-delay: 500ms;
  -webkit-transition-delay: 500ms;

  -moz-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
  -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,.5);
  box-shadow: 4px 4px 8px rgba(0,0,0,.5);

}

JavaScript

var w = 560,
    h = 500,
    r = 230,
    color = d3.scale.category20c();

var partition = d3.layout.partition()
    .size([2 * Math.PI, r])
    .value(function(d) { return d.size; });

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return d.y; })
    .outerRadius(function(d) { return d.y + d.dy; });

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

/*
 * I changed these parts...
**/
/*path = svg.data([getData()]).selectAll("path")
      .data(partition.nodes)
    .enter().append("svg:path")
      .attr("d", arc)
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", magnify)
    .on("mouseover", function(d) {
        tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
       })
        .on('mouseout',function(){
            tooltip.cleanup()
        })          
          
      .each(stash);*/

/*
 * ...into these
**/
group = svg.data([getData()]).selectAll("path")
      .data(partition.nodes)
    .enter().append('svg:g');
    
//path variable is required by magnify function
path = group.append("svg:path")
      .attr("d", arc)
      .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
      .on("click", magnify)
    .on("mouseover", function(d) {
        tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
       })
        .on('mouseout',function(){
            tooltip.cleanup()
        })          
          
      .each(stash);

group.append("svg:text")
      .attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
      .attr("x", function(d) { return d.y; })
      .attr("dx", "6") // margin
      .attr("dy", ".35em")...