JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
</body>

JavaScript

function makePieChart(domElement) {
        var arc, arcs, color, data, h, pie, r, vis, w;
        w = 200;
        h = 200;
        r = 100;
        color = d3.scale.category20c();
        data = [
          {
            'label': 'Potato',
            'value': 100
          }, {
            'label': 'Tomato',
            'value': 1000
          }
        ];
        vis = d3.select(domElement).append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")");
        arc = d3.svg.arc().outerRadius(r);
        pie = d3.layout.pie().value(function(d) {
          return d.value;
        });
        arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice");
        arcs.append("svg:path").attr("fill", function(d, i) {
          return color(i);
        }).attr("d", arc);
        arcs.append("svg:text").attr("transform", function(d) {
          d.innerRadius = 0;
          d.outerRadius = r;
          return "translate(" + arc.centroid(d) + ")";
        }).attr("text-anchor", "middle").text(function(d, i) {
          return data[i].label;
        });
        return $(domElement + " svg").slice(1).hide();
      }

makePieChart('body');