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="800" height="400" ></svg>

CSS

body{
  background-color:white;
}

JavaScript

data_set = [			{name:"aaa", val:58, col:100},
                  {name:"bbb", val:88, col:200},
                  {name:"ccc", val:48, col:300},
                  {name:"ddd", val:73, col:400},
                  {name:"eee", val:81, col:500},
                  {name:"fff", val:31, col:600}  ]  ;
var width=600, height=300;
var circles = d3.select("#content")
	.append("g")
  .selectAll("circle")
  .data(data_set)
  .enter()
  .append("circle")
  .attr("class","test-circle")
  .attr("r", function(d){ return d.val/2; })
  .attr("fill","lightblue")
  ;
  
var line_force = d3.forceSimulation()
	.nodes(data_set)
  .on("tick", ticked)
  .force("center", d3.forceCenter(width/2, height/2))
  .force('charge', d3.forceManyBody().strength(5))
  .force("collision", d3.forceCollide(40))
  .force("x", d3.forceX().x(function(d){ return d.col; }))
  .force("y", d3.forceY().y(150))
  ;


function ticked(){
	circles
  	.attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; }) ;
}