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

davidpiegza
494 Stars 100 Forks Other 126 Commits 3 Opened issues

Description

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.

Graph-Visualization

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 http://davidpiegza.github.io/Graph-Visualization/index.html or:

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

The

examples
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.

Usage:

  // 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
  graph.addNode(node1);
  graph.addNode(node2);
  // create edge between nodes
  graph.addEdge(node1, node2);

Node:

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() {
  ...
};

}

The

init()
function is called after graph creation, the
generate()
function is called on each render-call.

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

generate()
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.

Contribution

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

Drawing
object and update the
index.html
.

Check out the open issues for a specific task.

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

npm
and
grunt
installed. To install
grunt
run
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

grunt
to check the code.

Changelog

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.