JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

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>
		<div data-role="doughpie" data-width="750" data-height="550" 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

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

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)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + 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;
    });




  function randomData() {
    return [{
      "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
      }, {
        name: "some text pp",
        group: "DD",
        size: 100
      }]
    }, {
      "label": "EE",
      "value": 0.0517762265780517,
      "children": [{
        name: "some text ee",
        group: "EE",
        size: 389
      }, {
        name: "some text ee",
        group: "EE",
        size: 89
      }]
    }];
  }



  d3.select(".randomize")
    .on("click", function() {
      var data = randomData()
      console.log("data", data);
      change(randomData());
    });


 ...