JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
<body>

</body>

CSS

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

JavaScript

var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2;

if ("d3" in window) { console.log("ok")} else  { console.log("fuck")}

function type(d) {
  d.value = +d.value;
  return d;
}

var color = d3.scaleOrdinal()
  .range(["#ee1111", "#eeee11", "#11ee11"]);

var arc = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var labelArc = d3.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);

var pie = d3.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 ondata(error, data) {
  if (error) throw error;

  var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

  g.append("path")
    .attr("d", arc)
    .style("fill", function(d) {
      return color(d.data.title);
    });

  g.append("text")
    .attr("transform", function(d) {
      return "translate(" + labelArc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .text(function(d) {
      return d.data.title;
    });
}


var x = [
  { title: "a", value: 12},
  { title: "b", value: 24},
  { title: "c", value: 64}
];

ondata(null, x);