JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<script src="https://cdn.skypack.dev/[email protected]"></script>
<div id="root"></div>

CSS

body {
  margin: 0;
}

.d3-component svg {
  background: #ddd;
  max-height: 300px;
}

.node {
    height: 178px;
    width: 178px;
    fill: #fff;
    stroke-width: 1px;
    z-index: 2;
}

.label {
    height: 15px;
    fill: #757575;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 16px;
    text-align: center;
    text-anchor: middle;
}

.white-fill {
    fill: #fff;
}

.gender-symbol-stroke {
    stroke: #b8c3cb;
    stroke-width: 2.5;
}

Babel + JSX

import * as cola from "https://cdn.skypack.dev/[email protected]";
const size = 1000;
const defaultRadius = 20;

const level2Colors = (level) => {
  const colors = {
    1: "#A01928",
    2: "#9F62A4",
    3: "#0B7A7A",
    4: "#3F3F38",
  };
  return colors[level];
};
const level2Rad = (level) => {
  return (defaultRadius * 2.5) / level;
};

const loadData = () => {
  const nodes = [
    { id: 1, name:'0', level: 1 },
    { id: 2, name:'1', level: 2 },
    { id: 3, name:'2', level: 2 },
    { id: 4, name:'3', level: 2 },
    { id: 5, name:'4', level: 3 },
    { id: 6, name:'5', level: 3 },
    { id: 7, name:'6', level: 3 },
    { id: 8, name:'7', level: 3 },
    { id: 9, name:'8', level: 3 },
    { id: 10, name:'9', level: 3 },
    { id: 11, name:'10', level: 4 },
    { id: 12, name:'11', level: 4 },
    { id: 13, name:'12', level: 4 },
    { id: 14, name:'13', level: 4 },
    { id: 15, name:'14', level: 4 },
    { id: 16, name:'15', level: 4 },
  ];

  const links = [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 0, target: 3 },
    { source: 1, target: 4 },
    { source: 2, target: 3, type: 'partner' },
    { source: 2, target: 6 },
    { source: 2, target: 7 },
    { source: 2, target: 8 },
    { source: 3, target: 4 },
    { source: 3, target: 8 },
    { source: 3, target: 9 },
    { source: 4, target: 10 },
    { source: 4, target: 11 },
    { source: 6, target: 12 },
    { source: 7, target: 13 },
    { source: 9, target: 14 },
    { source: 9, target: 15 },
    { source: 8, target: 15 },
  ];

  return { nodes, links };
};

const { d3adaptor } = cola

class App extends React.Component {
  svg = null;

  componentDidMount() {
    const node = document.querySelector("#d3Node");

    this.initialize(node);
  }

  initialize(node) {
    const d3Cola = d3adaptor(d3).avoidOverlaps(true).size([size, size]);
    const svg = (this.svg = d3.select(node).append("svg"));
    svg
      .attr("viewBox", `0 0 ${size} ${size}`)
     ...