JSFiddle - React, Tailwind, and code Playground

by AleitaTrain

HTML

<div id="canvas"></div>

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

CSS

circle {
        stroke: white;
        fill: #05668D;
        opacity: 0.3;
        stroke-width: 2px;
    }

JavaScript

var w = 640,
        h = 480;

    var data = {
      name : "root",
      children : [
        { name: '1', size: 100 },
        { name: '2', size: 85 },
        { name: '3', size: 70 },
        { name: '4', size: 55 },
        { name: '5', size: 40 },
        { name: '6', size: 25 },
        { name: '7', size: 10 },
      ]
    }

    var canvas = d3.select("#canvas")
      .append("svg:svg")
      .attr('width', w)
      .attr('height', h);

    var nodes = d3.layout.pack()
      .value(function(d) { return d.size; })
      .size([w, h])
      .nodes(data);
    
    // Get rid of root node
    nodes.shift();

    canvas.selectAll('circles')
        .data(nodes)
      .enter().append('svg:circle')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', function(d) { return d.r; })
        .attr('fill', 'white')
        .attr('stroke', 'grey');