# Force Directed Graph
GPU supercharged attraction-graph visualizations for the web built on top of [Three.js](http://threejs.org). Importable as an ES6 module.
1. 🧮 Simulation computed on GPU via render targets
2. 🕸️ Accepts thousands of nodes and links
3. 🎨 Configurable point and link colors
4. 〰️ GPU-expanded antialiased line rendering with configurable width
5. 📦 Single library dependent (Three.js)
6. 🧩 Three.js scene compatible object
7. 📝 Simple data schema to populate compatible with d3.js JSON samples
8. 🧊 2d & 3d simulation modes
9. 🦺 WASM workers to generate textures
Visit the hosted [project page](https://jonobr1.com/force-directed-graph/) for a running demo.
## Usage
```
npm install --save three @jonobr1/force-directed-graph
```
### Import in ES6 environment
```javascript
import { ForceDirectedGraph } from '@jonobr1/force-directed-graph';
```
### Data Schema (`constructor` and `set`)
> Reference: The accepted `nodes` / `links` structure is inspired by the D3 force-directed graph data format: [@d3/force-directed-graph-component](https://observablehq.com/@d3/force-directed-graph-component).
The same data object shape is accepted by:
- `new ForceDirectedGraph(renderer, data)`
- `fdg.set(data[, callback])`
> [!TIP]
> It is recommended to use `set` and update setters in the callback or after the promise resolves. E.g: `fdg.set(data).then(() => {fdg.linewidth = 2})`
```ts
type GraphData = {
nodes: NodeData[];
links: LinkData[];
};
type NodeData = {
id: string | number; // Required, unique per node
x?: number; // Optional initial x position
y?: number; // Optional initial y position
z?: number; // Optional initial z position
isStatic?: boolean; // Optional, pins node when true
color?: string; // Optional CSS color (ex: '#ff6600', 'rgb(255,0,0)')
image?: string; // Optional image URL for sprite atlas
size?: number // Optional size for per-node sizing
};
type LinkData = {
source: string | number; // Node reference (must match a node.id)
target: string | number; // Node reference (must match a node.id)
};
```
> [!NOTE]
> - `nodes` and `links` are both required.
> - `source` / `target` are resolved by node `id`.
> - If `x`, `y`, or `z` is omitted, a random initial position is assigned.
> - `isStatic` defaults to `false`.
> - If `color` is omitted, the node defaults to white.
> - `set(data[, callback])` returns a `Promise` that resolves when geometry/textures are ready.
### Load Script in HTML file:
This example creates 512 nodes and links them randomly like big snakes.
```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](http://jono.fyi/)