Need help with GraphGL?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

uskudnik
136 Stars 29 Forks MIT License 47 Commits 3 Opened issues

Description

A network visualization library

Services available

!
?

Need anything else?

Contributors list

# 289,176
Shell
Go
command...
C
45 commits
# 175,880
HTML
ESLint
elastic...
import
1 commit

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.