GPU supercharged attraction-graph visualizations for the web built on top of Three.js. Importable as an ES6 module or a fully declarative ~~React Component~~.

Simulation computed on GPU via render targets
Accepts thousands of nodes and links
Configurable point and link colors
Single library dependent (Three.js)
React component is a single line declaration
Simple data schema to populate
2d & 3d simulation and rendering modes

Visit the hosted project page for a running demo.

Usage

npm install --save @jonobr1/force-directed-graph

Import in ES6 environment

import { ForceDirectedGraph } from '@jonobr1/force-directed-graph';

Load Script in HTML file:

This example creates 512 nodes and links them randomly like big snakes.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.skypack.dev/three@latest",
          "@jonobr1/force-directed-graph": "https://cdn.skypack.dev/force-directed-graph@latest"
        }
      }
    </script>
    <script type="module">

      import * as THREE from 'three';
      import { ForceDirectedGraph } from '@jonobr1/force-directed-graph';

      const renderer = new THREE.WebGLRenderer({ antialias: true });
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera();

      camera.position.z = 250;

      // Generate some fake data
      const amount = 512;
      const data = {
        nodes: [],  // Required, each element should be an object
        edges: []   // Required, each element should be an object
                    // with source and target properties that are
                    // indices of their connecting nodes
      };

      for (let i = 0; i < amount; i++) {

        const target = Math.floor(Math.random() * amount);
        const source = Math.floor(Math.random() * target);

        data.nodes.push({ id: i });
        data.edges.push({ target: Math.floor(Math.random() * i), source: i });

      }

      const fdg = new ForceDirectedGraph(renderer, data);
      scene.add(fdg);

      setup();

      function setup() {
        renderer.setClearColor('#fff');
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', resize, false);
        resize();
        renderer.setAnimationLoop(render);
      }

      function resize() {

        const width = window.innerWidth;
        const height = window.innerHeight;

        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();

      }

      function render(elapsed) {
        fdg.update(elapsed);
        renderer.render(scene, camera);
      }

    </script>
  </body>
</html>

:warning: Due to the reliance on the GPU compute rendering, this project is not built for node.js use.

A free and open source tool by Jono Brandel

Keywords

FAQs

What is @jonobr1/force-directed-graph?

Is @jonobr1/force-directed-graph popular?

Is @jonobr1/force-directed-graph well maintained?

Package last updated on 29 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install