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.3.8
  • 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/dist/3d-force-graph-vr.min.js"></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 unit4
lineOpacity([num])Getter/setter for line opacity of links, between [0,1]0.2
autoColorBy([str])Node object accessor attribute 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([str])Node object accessor attribute for node numeric value (affects sphere volume)val
nameField([str])Node object accessor attribute for name (shown in label)name
colorField([str])Node object accessor attribute for node color (affects sphere color)color
linkSourceField([str])Link object accessor attribute referring to id of source nodesource
linkTargetField([str])Link object accessor attribute referring to id of target nodetarget
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 render0
cooldownTicks([int])Getter/setter for how many build-in frames to render before stopping and freezing the layout engineInfinity
cooldownTime([num])Getter/setter for how long (ms) to render for before stopping and freezing the layout engine15000
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"
        },
        (...)
    ]
}

Local development

npm install
npm run watch

Keywords

FAQs

Package last updated on 14 Aug 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