JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

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

CSS

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

JavaScript

var data = 
    {
        "name" : "worker1",
        "children" : [
            {
                "name" : "subworker1",
                "children" :  [
                    {
                        "name"  : "job1",
                        "value" : 123
                    },
                    {
                        "name"  : "job2",
                        "value" : 342
                    }
                ]
            },
            {
                "name" : "subworker2",
                "children" : [
                    {
                        "name"  : "job3",
                        "value" : 523
                    }
                ]
            }
       ]
    };
                    
                    
var data2 =
    {
        "name" : "worker1",
        children : [
            {
                "name" : "job1",
                "value" : 522
            },
            {
                "name" : "job3",
                "value" : 111
            },
            {
                "name" : "job2",
                "value" : 231
            }
            ]
    };

function bubblePack() {
    var data;
    var bPack = function(vis) {
        var pack = d3.layout.pack()
        .size([400,400]);
        console.log("DATA:");
        console.log(data);
        var node = vis.selectAll(".node")
        .data(pack.nodes(data), function(d) {return d.name})
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        
        var circles = node.append("circle")
        .attr("r", function(d) { return d.r; })
        .style("fill", function(d) { return "blue" });
        
        bPack.update = function() {
            nodes = vis.selectAll(".node")
            .data(pack.nodes(data), function(d){return d.name});
            
            nodes
            .enter()
            .append("g")
            .attr("class", "node")
           ...