JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <!-- <link rel="stylesheet" type="text/css" href="./inspector.css"> -->
</head>

<body>
  <script>

		// d3.json returns a Promise, so we have to use .then()
    // also, used a web-accessible link
    var data = d3.json("https://static.observableusercontent.com/files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de?response-content-disposition=attachment%3Bfilename*%3DUTF-8%27%27flare-2.json").then(data => {
      var width = 954;
      
      var tree = data => {
        const root = d3.hierarchy(data);
        root.dx = 10;
        root.dy = width / (root.height + 1);
        return d3.tree().nodeSize([root.dx, root.dy])(root);
      };
      
      // attach chart to HTML body
      d3.select("body").append(() => chart(tree, data, width));

      function chart(tree, data, width) {
        const root = tree(data);

        let x0 = Infinity;
        let x1 = -x0;

        root.each(d => {
          if (d.x > x1) x1 = d.x;
          if (d.x < x0) x0 = d.x;
        });

        const svg = d3.create("svg")
          .attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);

        const g = svg.append("g")
          .attr("font-family", "sans-serif")
          .attr("font-size", 10)
          .attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);

        const link = g.append("g")
          .attr("fill", "none")
          .attr("stroke", "#555")
          .attr("stroke-opacity", 0.4)
          .attr("stroke-width", 1.5)
          .selectAll("path")
          .data(root.links())
          .join("path")
          .attr("d", d3.linkHorizontal()
            .x(d => d.y)
            .y(d => d.x));

        const node = g.append("g")
          .attr("stroke-linejoin", "round")
          .attr("stroke-width", 3)
          .selectAll("g")
          .data(root.descendants())
          .join("g")
         ...