JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <button id="sortBtn">next</button>
    <span id="sortLbl">null</span>
    <div id="chart"></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;
}

JavaScript

var diameter = 200;

var dataset = {
    "collection": {
        "blocks": [
            { "size": 1 },
            { "size": 0 },
            { "size": 1 },
            { "size": 13 },
            { "size": 1 },
            { "size": 4 },
            { "size": 1 },
            { "size": 13 },
            { "size": 2 },
            { "size": 10 },
            { "size": 132 },
            { "size": 80 },
            { "size": 22 },
            { "size": 0 },
            { "size": 96 },
            { "size": 25 },
            { "size": 45 },
            { "size": 5 },
            { "size": 61 },
            { "size": 308 },
            { "size": 21 },
            { "size": 77 },
            { "size": 1 },
            { "size": 0 },
            { "size": 125 },
            { "size": 10 },
            { "size": 1 }
        ],
        "size": 1055
    }
};

var data = d3.map(dataset).values();

var pack = d3.layout.pack()
    .sort(null)
    .size([diameter - 2, diameter - 2])
    .children(function(d){return d.blocks;})
    .value(function(d){return d.size;});

// Create SVG element
var svg = d3.select("#chart")
    .append("svg")
    .attr("width",diameter)
    .attr("height",diameter);

// Create nodes
var node = svg.selectAll(".node")
    .data(pack.nodes({blocks:data}))
    .enter()
    .append("g")
    .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
    .attr("transform",function(d){return "translate("+d.x+","+d.y+")";});

// Create circles
node.append("circle").attr("r",function(d){return d.r;});

var sortOrder = 2;
var sortBubbles = function() {
    sortOrder += 1;
    
    sortItems = function(a,b) {
        var str,result;
        switch(sortOrder%3){
            case 0:
                str = 'ascending';
                result = a.size - b.size;
                break;
            case 1:
                str = 'descending';
                result = b.size - a.size;
                break;
            default:
                str =...