JavaScript library for dynamic network visualization?

Question

What is a good JavaScript library for the visualization of time-evolving/dynamic graphs/networks?

My data is in the form of source -> destination at time triples like the following

A -> B at 100
B -> C at 101
A -> D at 104
C -> D at 105
...

On the screen I would like to see an animation of points connected by edges with edges flickering on and off as time evolves.

I'm also happy to contribute to an open source library that is almost there.

Clarifications:

By graph I mean a set of nodes connected by a set of edges, not a plot
This question is related to (but distinct from) the following question: Graph visualization library in JavaScript

Take a look at [d3.js](http://d3js.org/) there are some nice [examples](http://bost.ocks.org/mike/fisheye/) of people drawing networks and graphs. — ggovan, Sep 26 '13 at 16:16

score 9 · Answer 1 · answered Jan 29 '14 at 04:56

9

Vis.js, a browser based visualization library, is another option for you. Also, their public repo is active.

answered Jan 29 '14 at 04:56

Tarek Koudsi

141
1
5

Please, try to read this http://stackoverflow.com/help/deleted-answers, to get more understanding how to **not** answer. Namely: "Answers that do not fundamentally answer the question": **barely more than a link to an external site** – Radim Köhler Jan 29 '14 at 05:20
Vis.js can do arrows and edge labels, so it's perfect for directed weighted graphs in javascript – Luke Miles Nov 03 '17 at 18:45

score 8 · Accepted Answer · answered Sep 27 '13 at 10:46

8

I've worked with Sigma.js, which is an open source library exactly for the purpose of drawing network graphs. It's Canvas based, so faster than SVG especially for large networks, but dynamic manipulation of nodes/edges is not as straightforward. One nice feature is you can render Gexf files, created with Gephi or other tools, with very little effort.

answered Sep 27 '13 at 10:46

ramiro

878
9
20

How much work would it take to make dynamic manipulation of nodes/edges more straightforward? I'm willing to contribute if it's close. – MRocklin Sep 27 '13 at 16:16
This is hard to answer, you can take a look at the [public API here](https://github.com/jacomyal/sigma.js/blob/master/src/core/sigmapublic.js), maybe it already offeers what you need. – ramiro Sep 29 '13 at 12:14
2

I was able to build fairly high-speed graph visualizations with sigmajs once I exposed the drawEdge method to the public API. – MRocklin Oct 21 '13 at 18:32

score 4 · Answer 3 · answered Sep 26 '13 at 16:20

4

Take a look at d3.js: "D3.js is a JavaScript library for manipulating documents based on data" http://d3js.org/

Here's an example of drawing a graph from a dataset: http://bl.ocks.org/mbostock/1153292

Here's an example that shows how to dynamically update data. You could stream it from a server or simulate it by stepping through the data entirely on the client side: http://mbostock.github.io/d3/tutorial/bar-2.html

answered Sep 26 '13 at 16:20

kielni

4,779
24
21

For additional reference, I built several graphs in d3js. http://vida.io/documents/SyT7DREdQmGSpsBkK (graph with distance) and http://vida.io/documents/fGzpzjP98Bs2ShMHW (static graph) – Phuoc Do Sep 27 '13 at 07:02
D3.js GEXF loader: [https://github.com/emeeks/gexfd3](https://github.com/emeeks/gexfd3). Examples: [http://bl.ocks.org/emeeks](http://bl.ocks.org/emeeks). (Search page for "gexf".) – Mars Sep 13 '14 at 02:26

jancha · Answer 4 · 2014-07-14T10:55:23.387

0

Have a look at this example by ZoomCharts:

]

Seems this is exactly what you are looking for.

Disclosure: I am co-owner and core developer in ZoomCharts.com

edited Jul 14 '14 at 10:55

answered Apr 09 '14 at 21:09

jancha

4,916
1
24
39

JavaScript library for dynamic network visualization?

4 Answers4