davidpiegza / graph-visualization

3D graph visualization with WebGL / Three.js

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.

graph-visualization's Issues

click to node to center it?

is it possible to re-center the graph when it is clicked?

Apply various weights of force to links

Hi,

Is it possible to apply different weights to the connections? For instance if I have two kinds of edges and I want to dedicate different weight to each kind. I guess I can add multiple connections of the same kind to increase the way, right? Or is there a better way?

Cheers

Bounding boxes for Nodes to prevent intersections

Hi!

From the current state of the code it seems that you are not checking for collisions. So in some cases a node can be drawn inside another one.

Namespace conflict

This library overwrites the "Node" object which is defined in the browser's namespace:

https://developer.mozilla.org/en-US/docs/Web/API/Node

It might make sense to rename that, or to put your entire library in a namespace.

Really cool library! :)

Source code is out-of-date

It's clear from your demo running on Heroku, that this version of the source code is slightly out-of-date. Someone could reverse engineer the new SimpleGraph, however it's been compressed/minified into the Application.js file. It would be better if this repo were updated.

Thanks!

Can't get labels to show up

i click the box "show labels" but they don't show... am i doing something wrong?

Is it possible to dynamically update such a graph?

Hi there,

Great project, I've been looking for this for years now. Thanks for writing this and making it available on github!
I was wondering if it's possible to dynamically update the graph simply by updating the graph object.

• Josh

Notice & thanks

Dear David,

Thanks for this cool code. I incorporated a version of it into an R package, see https://github.com/bwlewis/rthreejs and https://cran.r-project.org/web/packages/threejs/ for instance. You're listed as an author.

Best,

Bryan

Bad link to force-directed-layout.js in README.md

The link to force-directed-layout.js in the README.md should be fixed. Correct URL is probably https://github.com/davidpiegza/Graph-Visualization/blob/master/src/layouts/force-directed-layout.js

Add more graph drawing layouts

It would be great to have more examples of graph drawing layouts.

The CAIDA Walrus Project has some great examples of 3d graph layouts:
http://www.caida.org/tools/visualization/walrus
http://www.caida.org/tools/visualization/walrus/gallery1

FPS low

Hi, with a lot of nodes (100s) the FPS goes down (~10). With even more nodes FPS it's ~2.

Why am I having this behavior? With few nodes FPS it's ~60, shouldn't be the same with more nodes?

Thank you

PS: I'm playing with examples.

Straight edge lines clip through sphere in the spherical graph

I noticed edges that looked like they were going nowhere in the spherical graph, but at some zoom levels you can see most or all of them. It appears they are clipping through the spherical surface because they are straight lines and not curved. Do you plan on implementing some great circle arcs? Since the edges don't have any mass it wouldn't affect the simulation too much, but I understand it might be more computationally expensive - although you wouldn't have to mix spherical and euclidean coordinates if you abandoned straight lines in the spherical graph.

Nodes image

Hi, is it possible to use images for nodes?

Add more force-directed graph examples

It would be great to have more examples of force-directed graphs.

This paper describes some examples: https://cs.brown.edu/~rt/gdhandbook/chapters/force-directed.pdf