JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>

<button class="randomize">randomize</button>
<section id="graph"></section>

CSS

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

svg {
  width: 500px;
  height: 500px;
}

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

JavaScript

var svg = d3.select("#graph")
    .append("svg")
    .append("g")

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

  var width = 560,
    height = 450,
    radius = Math.min(width, height) / 2;

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

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

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

  var color = d3.scale.ordinal()
    .domain(["Lorem ipsum", "dolor sit", "amet", "consectetur", "adipisicing"])
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

  function randomData() {

    var data1 = [{
      "label": "AA",
      "value": 0.911035425558026
    }, {
      "label": "BB",
      "value": 0.08175111844879179
    }, {
      "label": "CC",
      "value": 0.25262439557273275
    }, {
      "label": "DD",
      "value": 0.8301366989535612
    }, {
      "label": "EE",
      "value": 0.0517762265780517
    }];

    var data2 = [{
      "label": "AA",
      "value": 0.243879179
    }, {
      "label": "BB",
      "value": 0.243879179
    }, {
      "label": "CC",
      "value": 0.2342439557273275
    }, {
      "label": "DD",
      "value": 0.2349535612
    }, {
      "label": "EE",
      "value": 0.2345780517
    }];

    var j = Math.floor((Math.random() * 2) + 1);

    if (j == 1) {
      return data1;
    } else {
      return data2;
    }

  }


  change(randomData());

  d3.select(".randomize")
    .on("click", function() {
      change(randomData());
    });


  function change(data) {

    /* ------- PIE SLICES -------*/
    var slice = svg.select(".slices").selectAll("path.slice")
      .data(pie(data), key);

   ...