GraphGL

by uskudnik

uskudnik / GraphGL

A network visualization library

128 Stars 26 Forks Last release: Not found MIT License 47 Commits 0 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:

GraphGL

A network visualization library

GraphGL is a network visualization library designed for rendering (massive) graphs in web browsers and puts dynamic graph exploration on the web another step forward.

In short - it either calculates the layout of the graph in real time or reads node positions. It is therefore suitable for static files (exported GraphML/GEXF files converted to JSON) and for dynamic files.

Usage

To retrieve the project and required libraries

  1. git clone [email protected]:uskudnik/GraphGL.git
  2. In project directory:
    git submodule update --init
  3. Wait for download of
    three.js

After you have retrieved the library, you can start playing with it.

At the moment static graphs are only available from
particlesystem
branch.

Some notes:

Library expects JSON data for input in the form of

{"nodes": {
        "nodeid": nodedata, 
        "nodeid": nodedata, ...
    },
 "edges": [
        {"source": "sourceid", "target": "targetid"},
        {"source": "sourceid", "target": "targetid"}, ...
    ]
}

In the case of static graph (that is, graph that does not need to layout calculated),

nodedata
must include size, coordinates and color of a node.

An example from demos:

{"label": "java.awt.MenuBar",
 "size": 3.57,
 "x": 339.43,
 "y": 246.62,
 "r": 175,
 "g": 182,
 "b": 75
}

As for dynamic dataset, you can provide whatever you like for

nodedata
. Again, example from demos:
{"nodes": {
    "344": "java.awt.MenuBar",
    "345": "java.awt.peer.FramePeer", ... },
 "edges": [...]
}

As for initialization:

var canvasId = "#canvas";
var width = 800, height = 600;
var dataurl = "java-dataset-color-static.json"

var options = { canvas: { canvasId: canvasId, backgroundColor: 0xffffff }, nodes: { color: 0x4193F8 }, width: width, height: height, layoutType: GraphGL.StaticLayout };

var graphgl = new GraphGL(options);

function animate() { requestAnimFrame(animate); graphgl.render(); stats.update(); }

graphgl.animate = animate;

graphgl.start(dataurl);

var container = document.getElementById( 'canvas' ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild( stats.domElement );

Questions & bugs? Issues ;)

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.