Need help with Graph-Visualization?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

494 Stars 100 Forks Other 126 Commits 3 Opened issues


3D graph visualization with WebGL / Three.js

Services available


Need anything else?

Contributors list

Notice: This repo is not maintained anymore but PRs are still welcome.


This project is about 3D graph visualization with WebGL. The aim of this project is to evaluate the possibilities of graph drawing in WebGL.

It uses Three.js for drawing and currently supports a force directed layout.

Run the example

You can see the examples at or:

  1. Clone or download the project
  2. Open the index.html in a WebGL-compatible browser


folder contains all examples.

Project Description

The project consists of

  • a graph structure
  • a graph layout implementation
  • and a graph drawing implementation

Graph Structure

This is implemented in src/graph.js.


  // create a graph with maximum number of nodes (optional)
  var graph = new GRAPHVIS.Graph({limit: 100});
  // create nodes with an id
  var node1 = new GRAPHVIS.Node(1);
  var node2 = new GRAPHVIS.Node(2);
  // add nodes to the graph
  // create edge between nodes
  graph.addEdge(node1, node2);


A node has the properties

  • ID
  • nodesTo
    , Array with connected nodes
  • nodesFrom
    , Array with connected nodes
  • position
    , Object for x, y, z position, default is {}
  • data
    , Object with further properties, e.g. properties for a graph layout

For more details have a look at the source code.

Graph Layout

A graph layout has the basic structure:

  var Layout = Layout || {};
  Layout.ForceDirected = function(graph, options) {
    this.init = function() {

this.generate = function() {



function is called after graph creation, the
function is called on each render-call.

The graph layout gets the created graph and calculates new positions for the nodes. The

function is called repeatedly, so there must be a stop condition after finished calculation.

The graph layout may extend the nodes and edges with custom properties in the data object.

See force-directed-layout.js for example usage.


It would be great to have more examples of force-directed graphs or other 3d graph layouts. To add a new example, just copy one of the existing examples, add a new

object and update the

Check out the open issues for a specific task.

This project uses Grunt to run several tasks in development. You should have

installed. To install
npm install -g grunt-cli

And to install all dependencies run

npm install

For more info check the Grunt - Getting started guide.

If you added some changes, run

to check the code.


See releases.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.