JavaScript network graph visualization

Question

I need a network visualization graph(not chart) in javascript for json input. I also used JIT infovis toolkit rgraph and space tree to show multi levels in the graph. But nodes getting collapsed for huge data. In rgraph, edge arroheads merged with nodes,in space tree if child has 4 parents its placing the child too wide. so its not stable for large volume of data. But i couldnt find graphs similar to infovis json input format. Please suggest me alternative or solutions to solve infovis space tree and rgraph. Thanks in advance

Answer 1

As for me - I prefer vis.js, because :

• Generated network is elastic - adapts automatically to user network re-shaping
• Some useful UI features are integrated - such as zoom-in/zoom-out
• Network is highly customizable,- edge colors, width, etc...
• When defining network nodes - no need to specify X,Y coordinates for nodes.
  (I've seen some lib's where you need to define X,Y coords for nodes, and that really sucks)
• Not to mention that it is very easy to use this libarary,- see below:

Usage:

 // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    {id: 3, label: 'Node 3'},
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'}
  ]);

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3, width: 1},
    {from: 1, to: 2, width: 6},
    {from: 2, to: 4, width: 1},
    {from: 2, to: 5, width: 3},
    {from: 2, to: 3, width: 1},
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {};
  var network = new vis.Network(container, data, options);

Demo

Answer 2

Also check out D3, a "a JavaScript library for manipulating documents based on data" and sigma.js, a "open-source lightweight JavaScript library to draw graphs, using the HTML canvas element."