3D Force-Directed Graph

A web component to represent a graph data structure in a 3-dimensional space using a force-directed iterative layout. Uses ThreeJS/WebGL for 3D rendering and either d3-force-3d or ngraph for the underlying physics engine.

See also the 2D canvas version, VR version and AR version.

And check out the React bindings.

• Basic (source)
• Asynchronous load (source)
• Larger graph (~4k elements) (source)
• Directional arrows (source)
• Directional moving particles (source)
• Curved lines and self links (source)
• Auto-colored nodes/links (source)
• Text as nodes (source)
• Images as nodes (source)
• HTML in nodes (source)
• Custom node geometries (source)
• Gradient Links (source)
• Text in Links (source)
• Orbit controls (source)
• Fly controls (source)
• Camera automatic orbitting (source)
• Click to focus on node (source)
• Click to expand/collapse nodes (source)
• Fix nodes after dragging (source)
• Fit graph to canvas (source)
• Highlight nodes/links (source)
• Multiple Node Selection (source)
• Dynamic data changes (source)
• Node collision detection (source)
• Manipulate link force distance (source)
• Emit link particles on demand (source)
• Force-directed tree (DAG mode) (source)
• yarn.lock dependency graph (DAG mode) (source)
• Add external objects to scene (source)
• Bloom Post-Processing Effect (source)
• Pause / Resume animation (source)

import ForceGraph3D from '3d-force-graph';

or using a script tag

<script src="//unpkg.com/3d-force-graph"></script>

then

const myGraph = ForceGraph3D();
				myGraph(<myDOMElement>)
				  .graphData(<myData>);

ForceGraph3d({ configOptions })(<domElement>)

{
				    "nodes": [
				        {
				          "id": "id1",
				          "name": "name1",
				          "val": 1
				        },
				        {
				          "id": "id2",
				          "name": "name2",
				          "val": 10
				        },
				        ...
				    ],
				    "links": [
				        {
				            "source": "id1",
				            "target": "id2"
				        },
				        ...
				    ]
				}

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!