JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>

JavaScript

var w = 500,
  h = 400;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var color = d3.scaleOrdinal(d3.schemeCategory10)

var data = {
  name: "root",
  children: [{
    label: 'RAD',
    size: 50,
    color: '#c99700',
    fx:300,
    fy:300
  }, {
    label: 'BIL',
    size: 20,
    color: '#008ce6'
  }, {
    label: 'EEN',
    size: 40,
    color: '#007377'
  }, {
    label: 'INO',
    size: 10,
    color: '#b4975a'
  },{
    label: 'RAD',
    size: 50,
    color: '#c99700'
  }, {
    label: 'BIL',
    size: 20,
    color: '#008ce6'
  }, {
    label: 'EEN',
    size: 40,
    color: '#007377'
  }, {
    label: 'INO',
    size: 10,
    color: '#b4975a'
  } ]
};

var simulation = d3.forceSimulation(data.children)
  .force("x", d3.forceX(w / 2))
  .force("y", d3.forceY(h / 2))
  .force("collide", d3.forceCollide(function(d) {
    return d.size
  }))
	.force("center", d3.forceCenter(300,300))
  .stop();

for (var i = 0; i < 100; ++i) simulation.tick();
console.log(data)
var nodes = svg.selectAll(null)
  .data(data.children)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d.x
  })
  .attr("cy", function(d) {
    return d.y
  })
  .attr("r", function(d) {
    return d.size
  })
  .style("fill", function(_, i) {
    return color(i)
  })