3d-force-graph-vr

3D Force-Directed Graph in VR

A web component to represent a graph data structure in virtual reality using a force-directed iterative layout. Uses A-Frame for VR rendering and d3-force-3d for the layout physics engine.

See also the WebGL 3D version, and the A-Frame component version (aframe-forcegraph-component).

Live example: https://bl.ocks.org/vasturiano/972ca4f3e8e074dacf14d7071aad8ef9

Quick start

npm install
npm run build

How to instantiate

import { default as ForceGraphVR } from '3d-force-graph-vr';

or

var ForceGraphVR = require('3d-force-graph-vr');

or even

<script src="//unpkg.com/3d-force-graph-vr/dist/3d-force-graph-vr.min.js"></script>

then

var myGraph = ForceGraphVR();
myGraph(<myDOMElement>)
    .graphData(<myData>);

API reference

Method	Description	Default
jsonUrl([url])	URL of JSON file to load graph data directly from, as an alternative to specifying graphData directly
graphData([data])	Getter/setter for graph data structure (see below for syntax details)	{ nodes: [], links: [] }
numDimensions([int])	Getter/setter for number of dimensions to run the force simulation, between [1,3]	3
nodeRelSize([num])	Getter/setter for ratio of the node sphere volume (cubic px) per value unit	4
lineOpacity([num])	Getter/setter for line opacity of links, between [0,1]	0.2
autoColorBy([str])	Node object accessor attribute to automatically color group nodes by, only affects nodes without a color field
idField([str])	Node object accessor attribute for node id	id
valField([str])	Node object accessor attribute for node numeric value (translates to sphere volume)	val
nameField([str])	Node object accessor attribute for node name used in label	name
colorField([str])	Node object accessor attribute for node color	color
linkSourceField([str])	Link object accessor attribute for source node id	source
linkTargetField([str])	Link object accessor attribute for target node id	target
forceEngine([str])	Getter/setter for which force-simulation engine to use: 'd3' or 'ngraph'	d3
warmupTicks([int])	Getter/setter for the number of layout engine cycles to dry-run before start rendering	0
cooldownTicks([int])	Getter/setter for how many build-in frames to render before stopping the layout engine iteration	Infinity
cooldownTime([num])	Getter/setter for how long (ms) to render before stopping the layout engine iteration	15000
resetProps()	Reset all component properties to their default value

Input JSON syntax

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