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");


					  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,...