JSFiddle - React, Tailwind, and code Playground

by gdicerbo

HTML

<!doctype html>
<meta charset="UTF-8" />
<style>
  .node circle {
    stroke-width: 3px;
  }

  .node text {
    font: 12px sans-serif;
    fill: #000;
  }

  .link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
  }
</style>

<body>
  <!-- load the d3.js library -->
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>
    var treeData = {
      name: "Opportunity Type",
      fill: "green",
      children: [
        {
          name: "NODE NAME 2.1",
          subname: "CODE N1",
          fill: "blue",
        },
        { name: "NODE NAME 2.2", subname: "CODE N1", fill: "blue" },
        {
          name: "NODE NAME 2.3",
          subname: "CODE N1",
          fill: "blue",
          children: [
            {
              name: "NODE NAME 3.3",
              fill: "blue",
              subname: "CODE N1",
              children: [
                {
                  name: "NODE NAME 4.1",
                  subname: "CODE N1",
                  fill: "#d281d2",
                },
              ],
            },
            {
              name: "NODE NAME 3.4",
              fill: "blue",
              subname: "CODE N1",
              children: [
                {
                  name: "NODE NAME 4.2",
                  subname: "CODE N1",
                  fill: "#d281d2",
                },
              ],
            },
          ],
        },
      ],
    }

    // Set the dimensions and margins of the diagram
    var margin = { top: 20, right: 90, bottom: 30, left: 90 },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom

    // append the svg object to the body of the page
    // appends a 'group' element to 'svg'
    // moves the 'group' element to the top left margin
    var svg = d3
      .select("body")
      .append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
     ...