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

Elazar · Accepted Answer · 2022-10-19 18:31:13Z

12

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

edited Oct 19, 2022 at 18:31

Elazar

22k4 gold badges51 silver badges68 bronze badges

answered Jan 31, 2018 at 14:54

Agnius Vasiliauskas

11.3k5 gold badges55 silver badges73 bronze badges

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

1 Comment

akostadinov Over a year ago

I see this is a very nice library. I would like to generate a family tree based on JSON. Do you think the library can allow showing more information when clicking on a node?

Vikdor · Accepted Answer · 2012-12-03 12:19:27Z

9

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

edited Dec 3, 2012 at 12:19

Vikdor

24.2k10 gold badges66 silver badges86 bronze badges

answered Dec 3, 2012 at 11:59

Ed Hagen

4414 silver badges11 bronze badges

Comments

A5C1D2H2I1M1N2O1R2T1 · Accepted Answer · 2012-06-04 04:22:36Z

3

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

JIT, which you are using.
arborjs
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.

edited Jun 4, 2012 at 4:22

A5C1D2H2I1M1N2O1R2T1

194k31 gold badges417 silver badges497 bronze badges

answered May 16, 2012 at 2:49

turtledove

312 bronze badges

1 Comment

ptikobj Over a year ago

it seems that the main dev of d3 is the former protovis dev. He seems to have moved on to d3. So that may be a reason why protovis is not maintained anymore.

nemesifier · Accepted Answer · 2015-10-18 14:37:32Z

2

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.

answered Oct 18, 2015 at 14:37

nemesifier

8,64913 gold badges65 silver badges99 bronze badges

Comments

jancha · Accepted Answer · 2014-02-20 15:21:22Z

1

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.

answered Feb 20, 2014 at 15:21

jancha

4,9851 gold badge27 silver badges40 bronze badges

Collectives™ on Stack Overflow

JavaScript network graph visualization

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related