JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<div id="graph-container">

</div>

JavaScript

const data = {
  name: 'Total',
  size: 1999999,
  children: [{
      name: 'Result A',
      size: 69936,
    },
    {
      name: 'Result b',
      size: 45000,
    },
    {
      name: 'Result C',
      size: 25000,
    },
    {
      name: 'Result D',
      size: 406791,
    },
    {
      name: 'Result E',
      size: 56000,
    },
    {
      name: 'Result F',
      size: 61050,
    },
    {
      name: 'Result G',
      size: 30000,
    },
    {
      name: 'Result x',
      size: 60000,
    }
  ],
};

let node

// Fix this bubble at the top
const FIXED_BUBBLE_NAME = 'Result b';

const GREEN = '#90E0C2';
const BLUE = '#73A1FC';

const GRAPH_DIMENSIONS = {
  WIDTH: 234,
  HEIGHT: 234,
  PADDING: 10,
};

radius = GRAPH_DIMENSIONS.WIDTH / 2
hyp2 = Math.pow(radius, 2),
nodeBaseRad = 0;
strokeWidth = 1

const pythag = (r, b, coord) => {
    r += nodeBaseRad;

    // force use of b coord that exists in circle to avoid sqrt(x<0)
    b = Math.min(GRAPH_DIMENSIONS.WIDTH - r - strokeWidth, Math.max(r + strokeWidth, b));

    var b2 = Math.pow((b - radius), 2),
        a = Math.sqrt(hyp2 - b2);

    // radius - sqrt(hyp^2 - b^2) < coord < sqrt(hyp^2 - b^2) + radius
    coord = Math.max(radius - a + r + strokeWidth,
                Math.min(a + radius - r - strokeWidth, coord));

    return coord;
}

const buildDataTree = () => {
  const packLayout = d3
    .pack()
    .size([
      GRAPH_DIMENSIONS.WIDTH,
      GRAPH_DIMENSIONS.HEIGHT,
    ])
    .padding(GRAPH_DIMENSIONS.PADDING);

  const rootNode = d3
    .hierarchy(data)
    .sum((d) => d.size)
    .sort((a, b) => {
      return b.value - a.value;
    })

  return packLayout(rootNode);
};

const getSvgRoot = () => {
  return d3
    .select('#graph-container')
    .append('svg')
    .attr('id', 'graph-container-svg')
    .attr('width', GRAPH_DIMENSIONS.WIDTH + GRAPH_DIMENSIONS.PADDING)
    .attr('height', GRAPH_DIMENSIONS.HEIGHT + GRAPH_DIMENSIONS.PADDING)
    .style('overflow', 'visible');
};

const...