by davidpiegza

davidpiegza /Graph-Visualization

3D graph visualization with WebGL / Three.js

472 Stars 98 Forks Last release: over 2 years ago (v0.6.0) Other 126 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.