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?

related, if not a duplicate: stackoverflow.com/questions/10886705/… and stackoverflow.com/questions/8749706/… — SherlockEinstein
– SherlockEinstein, Commented Feb 21, 2018 at 12:38

Anvaka · Accepted Answer · 2012-07-09 06:20:28Z

9

Check out VivaGraphJS.
Amazon Visualization sample by VivaGraphJS.

Layout configuration sample, uses WebGL as a renderer.

edited Jul 9, 2012 at 6:20

Anvaka

15.8k2 gold badges49 silver badges57 bronze badges

answered Jun 4, 2012 at 19:03

Li0liQ

11.3k38 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frodo Baggins · Accepted Answer · 2013-03-25 20:47:09Z

3

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.

answered Mar 25, 2013 at 20:47

Frodo Baggins

8,5736 gold badges48 silver badges57 bronze badges

Comments

Aerodynamika · Accepted Answer · 2012-06-27 10:58:04Z

2

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();

answered Jun 27, 2012 at 10:58

Aerodynamika

8,61419 gold badges94 silver badges152 bronze badges

Comments

Andrei Neculau · Accepted Answer · 2012-07-10 11:44:47Z

2

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.

answered Jul 10, 2012 at 11:44

Andrei Neculau

1,0061 gold badge11 silver badges15 bronze badges

Comments

Dan Herman · Accepted Answer · 2015-08-04 14:08:25Z

2

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

visjs

answered Aug 4, 2015 at 14:08

Dan Herman

1,4951 gold badge17 silver badges27 bronze badges

Comments

WillyFogg 66 · Accepted Answer · 2014-02-26 16:24:08Z

0

Try out cne-tnetwork. It is javascript visualization library to create and draw network graphs. It is SVG-based and HTML 5 compatible. It is publicly available on github, licensed under the GNU Afferro license. You can find how to use it in the readme of the library. It has a mode to drag the nodes. The links between nodes can be unidirectional, bidirectional or even "buses" that connect several elements. With CSS you can customize all your styles (nodes, links, arrows, buses...).

answered Feb 26, 2014 at 16:24

WillyFogg 66

11 bronze badge

Collectives™ on Stack Overflow

JavaScript network visualization?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related