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

git clone git@github.com:uskudnik/GraphGL.git
In project directory: git submodule update --init
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 ;)

License

hblanko/GraphGL

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages