JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

CSS

rect.box {
    fill:none; 
    stroke:royalblue;
    stroke-width:5; 
    shape-rendering: crispEdges;
}
g.bubbles circle {
    fill:rgba(255,0,64,0.5); 
    stroke:rgb(255,0,64);
    stroke-width:3;
}
g.bubbles text {
    fill:royalblue;
    font-family:sans-serif;
    text-anchor:middle;
    alignment-baseline:middle;
    opacity:0;
    pointer-events:all;
    transition:1s;
}
g.bubbles text:hover {
    opacity:1;
}

JavaScript

(function() {
    //D3 program to fit circles of different sizes 
    //in a rectangle of fixed aspect ratio
    //as tightly as reasonable.
    //By Amelia Bellamy-Royds, in response to 
    //http://stackoverflow.com/questions/13339615/packing-different-sized-circles-into-rectangle-d3-js
    //See also http://fiddle.jshell.net/6cW9u/8/
    //Freely released for any purpose under Creative Commons Attribution licence: http://creativecommons.org/licenses/by/3.0/
    //Author name and link to this page is sufficient attribution.
    
//parameters//
var N = 25;
var sortOrder = -1; 
   //>0 for ascending, <0 for descending, 0 for no sort 
    
//create data array//
var data = [], i = N;
var randNorm = d3.random.normal(1,0.6);
while(i--) data.push({ 
    "size": Math.max(randNorm(), 0.1) });
    //circle area will be proportional to size  
    
var dataMax = d3.max(data, function(d){return d.size;});     
var totalSize = d3.sum(data, function(d){return d.size;});
    //console.log(data.map(function(d){return d.size;}));
//________________//
    
//Set up SVG and rectangle//   
var svg = d3.select("svg");
var digits = /(\d*)/;
var margin = 50; //space in pixels from edges of SVG
var padding = 4; //space in pixels between circles

var svgStyles = window.getComputedStyle(svg.node());
var width = parseFloat(svgStyles["width"]) - 2*margin;
var height = parseFloat(svgStyles["height"]) - 2*margin;
    
var rScale = d3.scale.sqrt()  
        //make radius proportional to square root of data r
        .domain([0, totalSize]) //data range
        .range([0, Math.sqrt((width - padding)*(height - padding)*Math.PI )/4 ]);
//The rScale range will be adjusted as necessary
//during packing.
//The initial value is based on scaling such that the total
//area of the circles matches the area of the box.
/*
    console.log("area", width*height);
console.log("totalSize", totalSize);
console.log(rScale.domain(), rScale.range());
console.log("r(1)", rScale(1) );
  */  
var box =...