Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

3d-force-graph-vr

Package Overview
Dependencies
Maintainers
1
Versions
153
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

3d-force-graph-vr

UI component for a 3D force-directed graph in VR

  • 1.5.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.6K
increased by23.46%
Maintainers
1
Weekly downloads
 
Created
Source

3D Force-Directed Graph in VR

NPM

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

import ForceGraphVR from '3d-force-graph-vr';

or

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

or even

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

then

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

API reference

MethodDescriptionDefault
graphData([data])Getter/setter for graph data structure (see below for syntax details).{ nodes: [], links: [] }
jsonUrl([url])URL of JSON file to load graph data directly from, as an alternative to specifying graphData directly.
numDimensions([int])Getter/setter for number of dimensions to run the force simulation on (1, 2 or 3).3
nodeRelSize([num])Getter/setter for the ratio of node sphere volume (cubic px) per value unit.4
nodeResolution([num])Getter/setter for the geometric resolution of each node, expressed in how many slice segments to divide the circumference. Higher values yield smoother spheres.8
lineOpacity([num])Getter/setter for line opacity of links, between [0,1].0.2
autoColorBy([str or fn])Node object accessor function (fn(node)) or attribute (e.g. 'type') to automatically group colors by. Only affects nodes without a color attribute.
idField([str])Node object accessor attribute for unique node id (used in link objects source/target).'id'
valField([num, str or fn])Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume).'val'
nameField([str or fn])Node object accessor function or attribute for name (shown in label).'name'
colorField([str or fn])Node object accessor function or attribute for node color (affects sphere color).'color'
linkSourceField([str])Link object accessor attribute referring to id of source node.'source'
linkTargetField([str])Link object accessor attribute referring to id of target node.'target'
linkColorField([str or fn])Link object accessor function or attribute for line color.'color'
forceEngine([str])Getter/setter for which force-simulation engine to use (d3 or ngraph).'d3'
warmupTicks([int])Getter/setter for number of layout engine cycles to dry-run at ignition before starting to render.0
cooldownTicks([int])Getter/setter for how many build-in frames to render before stopping and freezing the layout engine.Infinity
cooldownTime([num])Getter/setter for how long (ms) to render for before stopping and freezing the layout engine.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"
        },
        (...)
    ]
}

Keywords

FAQs

Package last updated on 29 Oct 2017

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc