JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<button class="randomize">randomize</button>
<div data-role="doughpie" data-width="450" data-height="450" id="graph"></div>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 560px;
  height: 500px;
  position: relative;
  background: #333333;
}

path.slice {
  stroke-width: 2px;
}

JavaScript

//__invoke pie chart
 $('[data-role="doughpie"]').each(function(index) {
   createDoughnut(this);
 });


 function bubbledata(data) {
   //loop through data -- and MERGE children
   var childs = [];
   $.each(data, function(index, value) {
     childs.push(value.children);
   });
   var merged = [].concat.apply([], childs); //flatterns multidimensional array

   return $.extend(true, {}, {
     "children": merged
   }); // return deep clone
 }


 function createDoughnut(el) {

   var width = $(el).data("width"),
     height = $(el).data("height"),
     radius = Math.min(width, height) / 2;

   var svg = d3.select($(el)[0])
     .append("svg")
     .attr("width", width)
     .attr("height", height)



   //_create doughpie shell
   var doughpie = svg.append("g")
     .attr("class", "doughpie");

   doughpie.append("g")
     .attr("class", "slices");
   doughpie.append("g")
     .attr("class", "labels");
   doughpie.append("g")
     .attr("class", "lines");
   doughpie.append("g")
     .attr("class", "slicedots");

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

   var arc = d3.svg.arc()
     .outerRadius(radius * 0.85)
     .innerRadius(radius * 0.83);

   var outerArc = d3.svg.arc()
     .innerRadius(radius * 0.9)
     .outerRadius(radius * 0.9);

   doughpie.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

   var key = function(d) {
     return d.data.label;
   };

   var color = d3.scale.ordinal()
     .range(["#46a2de", "#7b3cce", "#31d99c", "#de5942", "#ffa618"]);
   //_create doughpie shell


   //_create bubble
   var diameter = width / 2; //take half/width

   var bubs = svg.append("g")
     .attr("class", "bubs");

   bubs.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

   var bubble = d3.layout.pack()
     .size([diameter, diameter])
     .value(function(d) {
       return d.size;
     })
     .padding(3);

   //_create bubble



   function...