3d force directed graph visualisation with ThreeJS

I needed a cool way to visualize a force directed graph with many datapoints, so I thought that webGL was the way to go as it should be able to handle the heavy load better than d3 SVG.

The library I've used for this small proof of concept is 3d-fore-graph by vasturiano github link, and it is surprisingly simple to use, so kudos to the author for that.

import ForceGraph3D from "3d-force-graph";
import data from "./test.json";

const elem = document.getElementById("3d-graph");

const Graph = ForceGraph3D()(elem)
  .graphData(data)
  .nodeAutoColorBy("group")
  .onNodeHover(node => (elem.style.cursor = node ? "pointer" : null))
  .onNodeClick(node => {
    // Aim at node from outside it
    const distance = 40;
    const distRatio = 1 + distance / Math.hypot(node.x, node.y, node.z);
    Graph.cameraPosition(
      { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
      node, // lookAt ({ x, y, z })
      3000 // ms transition duration
    );
  });

where test.json is a file compatible with the json graph format used in d3 force directed graph plugin.

{
 "nodes":[{"id": 0, "group": 0}, ...],
 "links":[{
   "source" : 0,
   "target" : 1,
   "value" : 0.1
 }, ...]
}

the following is the result , the user is able to navigate the graph using the mouse, or by clicking on the single node.