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.

—Read This Next—

Client side routing explained


Client side routing explained React router is the defacto standard for client side routing in React SPA application. To understand how Reac
—You Might Enjoy—

Posenet


Playing with models released for tensorflow js. Posenet is a neural network that allows the estimation of a human pose from an image. For