JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
}

JavaScript

var data1 = {
    name : "workers",
    children: [
                {
                    name : 21543,
                    analysis_id : 1,
                    time : 21
                },
                {
                    name : 22232,
                    analysis_id : 1,
                    time : 54
                },
                {
                    name : 12343,
                    analysis_id : 1,
                    time : 126
                },
      
                {
                    name : 12111,
                    analysis_id : 2,
                    time : 61
                },
                {
                    name : 12115,
                    analysis_id : 2,
                    time : 51
                },
                {
                    name : 21543,
                    analysis_id : 1,
                    time : 251
                },
                {
                    name : 22232,
                    analysis_id : 1,
                    time : 45
                },
                {
                    name : 12343,
                    analysis_id : 1,
                    time : 129
                },
                {
                    name : 12111,
                    analysis_id : 2,
                    time : 610
                },
                {
                    name : 12115,
                    analysis_id : 2,
                    time : 151
                }
            ]
};

function bubblePack() {
    
    var data = data1;
    
    var bPack = function(vis) {
        var pack = d3.layout.pack()
        .size([400,400])
        .value(function(d) {return d.time});
        
        var node = vis.data([data])
        .selectAll("g.node")
        .data(pack.nodes)
        .enter()
        .append("g")
        .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
       ...