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."

Answer 3

As far as I know, there are a few open source js projects to work on graph visualization.

1. JIT, which you are using.
2. arborjs
3. protovis from Stanford. It seems great, but it is no longer under active development.

To be honest, I have never used them in my project. You can try them yourself.

Answer 4

Checkout netjsongraph.js, a simple javascript library based on D3 that uses the NetJSON format, which is specifically designed for networking software.

See the netjsongraph demo example.

I hope it helps.

Answer 5

You might want to check out this interactive HTMl5 charts library, provided by Data Visualization Software Lab:

http://datavisualizationsoftwarelab.com/

This SDK lets you create wide range of charts:

• Time based charts
• Network charts
• Pie charts
• Coming soon are Geo charts, facet charts and XML Charts

Graphs are pure HTML5, no dependancies on other libs, thus easy to integrate with any JS framework (such as jQuery). Uses Canvas for rendering, has full multi-touch support for navigation, interaction and exploration of data.

An example of network chart:

Charts come with extensive API and Settings, so you can control every aspect of the charts.