JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<!DOCTYPE html>

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

CSS

text {
  font: 20px sans-serif;
}

JavaScript

var root = {
        "name": "Root",
        "children": [
            {
                "name": "Leaf One",
                "children": null,
                "size": 1
            },
            {
                "name": "Leaf Two",
                "children": null,
                "size": 1
            },
            {
                "name": "Leaf Three",
                "children": null,
                "size": 1
            }
        ],
        "size": 1
    };

        
    var diameter = 400,
        format = d3.format(",d"),
        color = d3.scale.category20c();

    var bubble = d3.layout.pack()
        .sort(null)
        .size([diameter, diameter])
        .padding(1.5);

    var svg = d3.select("body").append("svg")
        .attr("width", diameter)
        .attr("height", diameter)
        .attr("class", "bubble");

    // not needed in JSfiddle, data is hard-coded:
    // d3.json("data.json", function(error, root) {
    //   if (error) throw error;

var classedRoot = classes(root);

      var node = svg.selectAll(".node")
          .data(bubble.nodes(classedRoot)
          .filter(function(d) { return !d.children; }))
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

      node.append("title")
          .text(function(d) { return d.className + ": " + format(d.value); });

      node.append("circle")
          .attr("r", function(d) { return d.r; })
          .style("fill", function(d) { return color(d.packageName); });

      node.append("text")
          .attr("dy", ".3em")
          .style("text-anchor", "middle")
          .text(function(d) { return d.className.substring(0, d.r / 3); });
        
        node.on("click", function(d){
           d.value += 1;
           node.data(bubble.nodes(classedRoot), function(d) { return d.className; })
          .transition()
          .attr("transform", function(d) { return "translate(" + d.x + "," +...