JSFiddle - React, Tailwind, and code Playground

by navinleon

JavaScript

var w = 1000,
  h = 1000;
var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);
  
  var pack = d3.pack()
  .size([w, h])
  .padding(2);

var color = d3.scaleOrdinal(d3.schemeCategory10)

var data = {
  name: "root",
  children: [{
    label: 'RAD',
    size: 200,
    color: '#c99700',
    children: [{
      label: 'RAD1',
      size: 50,
      color: '#c99700'
    }, {
      label: 'BIL1',
      size: 50,
      color: '#008ce6'
    }]
  }, {
    label: 'BIL',
    size: 100,
    color: '#008ce6'
  }, {
    label: 'EEN',
    size: 100,
    color: '#007377'
  }, {
    label: 'INO',
    size: 100,
    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
  }))
  .stop();

for (var i = 0; i < 100; ++i) simulation.tick();

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)
  })