JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
 <svg id="content" width="600" height="400"></svg>

JavaScript

var data_set = [ 
									{name:"aaa", val:58},
                  {name:"bbb", val:88},
                  {name:"ccc", val:48},
                  {name:"ddd", val:73},
                  {name:"eee", val:81},
                  {name:"fff", val:31}  
               ] ;
                   
var width=600, height=300;

var force = d3.forceSimulation()
				.nodes(data_set)
        .on("tick", ticked)
				.force("x", d3.forceX(width/2).strength(0.05))
        .force("y", d3.forceY(height/2).strength(0.05))
        .force("collide", d3.forceCollide(50))
			;
function ticked(){
	circles
  	.attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; })
    ;
}

var circles = d3.select("#content")
						.append("g")
            .selectAll("circle")
            .data(data_set)
            .enter()
            .append( "circle" )
            .attr( "class", "text-circle" )
            .attr("r", function(d){return d.val/2})
            .attr("fill", "lightblue")
       ;