I would like to visualize a network graph in an AngularJS application. The nodes
ID: 660387 • Letter: I
Question
I would like to visualize a network graph in an AngularJS application. The nodes and edges are stored as a JSON object, and nodes will be added and modified later on (say once every 30 seconds). I want to use Angular data binding to automatically update the graph when the JSON object changes. The graph will have 10-1000 nodes. The nodes will be rectangular text nodes containing about a sentence each. I would like the graph to be zoom- and pan-able.
I know about the following options so far:
ArborJS
It is easy to make dynamic updating work with Angular (using ParticleSystem.merge). However, Arbor does not seem to support zoomable behavior, and it does not seem to be well-supported. For example, the single-node bug is still unresolved.
D3
There is a zoomable force layout demo, and various places have information on using d3 with Angular. D3 is well-supported, but it seems lower-level than the options below. For example, creating a network graph with good-looking rectangular node labels seems nontrivial.
VisJS
VisJS supports zoomable network graphs, and there is a work-in-progress Angular library, but I don't know how reliable both VisJS and its Angular library are.
SigmaJS
SigmaJS also supports zoomable network graphs, but I don't know whether it plays nicely with Angular.
CytoscapeJS
kmap
Are there other relevant libraries? What is the best library to use for this project, and how can I implement such a zoomable dynamic network graph given the library?
Explanation / Answer
Based on a previous answer I gave on StackOverflow I would add to your list the following:
VivaGraph it's a free and open source tool for graph visualization tool - but it has a smaller community compared to SigmaJS. It has the zoom feature. Don't know anything about Angular integration though.
Keylines it's a commercial graph visualization tool, with advanced stylings, analytics and layouts, and they provide copy/paste demos if you are using Neo4J or Titan. It is not free, but it does support even older browsers - IE7 onwards... It has the "zoom" feature and there's a simple (beta) Angular wrapper.