JavaScript network visualization?

Question

I'm looking for a library to visualize a network.

I just need to add some nodes(node has text on them), add edges between them, (edges are directed and have text on them).I don't want to set the position of anything by hand.

I'd like API simple as:

var node1 = X.addNode(1, "Hello"),
    node2 = X.addNode(2, "World");
X.addEdge(node1, node2, "helloworld");

I've searched for hours, looked after arborjs, sigma.js, d3.js, JavaScript InfoVis Toolkit, none of them satisfied me.

Is there anything else I can try?

Solution 1

Check out VivaGraphJS.
Amazon Visualization sample by VivaGraphJS.

Layout configuration sample, uses WebGL as a renderer.

Solution 2

We produce mxGraph, but note this is a commercial library, not open source. I'm not sure exactly why the open source libraries you listed failed, but certainly forming the graph, setting the geometry and labels are all fairly trivial function calls.

Solution 3

Check this page of sigma.js
http://sigmajs.org/examples/a_plugin_example.html
and you will see how they do a random or a circular layout.

Solution 4

What's the problem with sigma.js? The library's website has a very simple example to draw the nodes and edges:

var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
label: 'Hello',
color: '#ff0000'
}).addNode('world',{
label: 'World !',
color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();

Solution 5

I found this javascript library to be helpful. Check out the network examples page:

visjs

View more solutions