JSFiddle - React, Tailwind, and code Playground

by codered1988

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>

<button onClick="addBubble();">Add New Bubble</button>
<button onClick="removeBubble();">Remove Bubble</button>
<div id="bubbleWrapper" style="height: 500px; width: 100%;"></div>

JavaScript

var wrapper = {
	name: "#bubbleWrapper",
	width() { return $(wrapper.name).width(); },
	height() { return $(wrapper.name).height(); },
};
var fill = d3.scaleOrdinal(d3.schemeCategory10);
var scale = 1;
var svg = d3.select(wrapper.name)
				.append("svg")
					.style("width", "100%")
					.style("height", "100%")
					.style('background-color', '#eee')
					.call( d3.zoom()
						.scaleExtent([0.2, 10]) // Zoom in/out limit 
						//.translateExtent([[0, 0], [width, height]]) // panning limit
						//.extent([[0, 0], [width, height]])
						.on("zoom", function(event) {
							var scale = event.transform.k;
							d3.selectAll("#top-g").attr("transform", event.transform)
							//d3.selectAll('g > text').style('font-size', fontsize/scale).text(function(d){return clipText(d, d.name,fontsize/scale/3 );})
						}))
				.append("g").attr("id","top-g") // g that zoom is attached too. ;
var w = wrapper.width();
var h = wrapper.height();
var centerX = w * 0.5;
var centerY = h * 0.5;
var strength = 0.05;
var focusedNode;
var format = d3.format(',d');
let pack = d3.pack()
			.size([w,h])
			.padding(1.5);		
var x = d3.scaleOrdinal()
		  .domain([1, 2, 3])
		  .range([150, 450, 1500])	
var node;
		  
let forceXSeparate = d3.forceX( d => x(d.type) ).strength(strength);
let forceXCombine = d3.forceX( w / 2 ).strength( strength );
let forceCollide = d3.forceCollide(d => d.r + 2).iterations(16);
// use the force
let simulation = d3.forceSimulation()
	// .force('link', d3.forceLink().id(d => d.id))
	.force('charge', d3.forceManyBody())
	.force('collide', forceCollide)
	// .force('center', d3.forceCenter(centerX, centerY))
	.force('x', forceXCombine)
	.force('y', d3.forceY(centerY ).strength(strength))
	.on('tick', ticked)
function ticked() {
	node
		.attr('transform', d => `translate(${d.x},${d.y})`)
		.select('circle')
			.attr('r', d => d.r);
			
			
}	

	
var data = [{ "id": 1, "name": "ANDY", "type": 1, value: 100 }, 
						{ "id": 2, "name": "BOBBIE", "type": 2, value: 10...