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:


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.


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

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

At the moment static graphs are only available from

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),

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

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


var container = document.getElementById( 'canvas' ); stats = new Stats(); = 'absolute'; = '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.