JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<button class="randomize">randomize</button>

<body>
  <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: #292527;
}

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

.bubbletext {
  fill: #ffffff;
  font-size: 14px;
}

JavaScript

var width = 800,
  height = 600,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(["#46a2de", "#7b3cc9", "#31d89c", "#de5942", "#ffa618"]);

var arc = d3.svg.arc()
  .outerRadius(radius - 66)
  .innerRadius(radius - 70);

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

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



function randomData() {
  var data1 = [{
    "label": "AA",
    "value": 0.911035425558026,
    "children": [{
      name: "some text aa",
      group: "AA",
      size: 120
    }]
  }, {
    "label": "BB",
    "value": 0.08175111844879179,
    "children": [{
      name: "some text bb",
      group: "BB",
      size: 123
    }]
  }, {
    "label": "CC",
    "value": 0.25262439557273275,
    "children": [{
      name: "some text cc",
      group: "CC",
      size: 193
    }]
  }, {
    "label": "DD",
    "value": 0.8301366989535612,
    "children": [{
      name: "some text dd",
      group: "DD",
      size: 29
    }, {
      name: "some text dd",
      group: "DD",
      size: 289
    }]
  }, {
    "label": "EE",
    "value": 0.0517762265780517,
    "children": [{
      name: "some text ee",
      group: "EE",
      size: 389
    }, {
      name: "some text ee",
      group: "EE",
      size: 89
    }]
  }];

  var data2 = [{
    "label": "AA",
    "value": 0.243879179,
    "children": [{
      name: "some text aa",
      group: "AA",
      size: 12320
    }]
  }, {
    "label": "BB",
    "value": 0.243879179,
    "children": [{
      name: "some text bb",
      group: "BB",
      size: 1123
    }]
  }, {
    "label": "CC",
    "value": 0.2342439557273275,
    "children": [{
      name: "some text cc",
      group: "CC",
      size: 1923
    }]
  }, {
    "label": "DD",
    "value": 0.2349535612,
    "children": [{
      name: "some text dd",
  ...