curved.html

<svg id="network" width="600" height="380"></svg>

<script type="module">
  import { network } from "https://cdn.jsdelivr.net/npm/@gramex/network@2";
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

  // Load the data
  const data = await fetch("flare.json").then((r) => r.json());
  var root = d3.hierarchy(data);

  // Create the network
  const graph = network("#network", {
    links: root.links(),
    nodes: root.descendants(),
    linkCurvature: 0.5,
    d3
  });

  // Style the network
  const color = d3.scaleOrdinal(d3.schemeCategory10);
  graph.nodes.attr("fill", (d) => color(d.depth)).attr("r", (d) => 10 - d.depth * 2);
  graph.links.attr("stroke", "rgba(0,0,0,0.2)");
</script>