Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vis.js graph not stabilizing even after hours

I have a network of around 1000 nodes. I have set stabilize:true and zoomExtentOnStabilize: true. The nodes are being added from JSON using vis.network.gephiParser.parseGephi() function. When I tried to plot this graph it never stabilizes even after hours of letting it idle. But then smaller number of nodes stabilize in reasonable time. What am I missing here. Is there any way to stabilize big graphs. I even tried setting the number of iterations to stabilize to 1000 and even higher. Thanks in advance for the help.

P.S.:The coordinates of the nodes are not available from JSON. The graph is redrawn based on the user input.

EDIT 1: The JSON data being plotted is available at http://pastebin.com/raw.php?i=Mzy4ncxw. I couldn't make a reproducible example at jsbin because of CORS error.
The JavaScript code is:

message = JSON.parse(json_data); // json_data is sent from R server.
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var container = document.getElementById("div_graph");
var data = {
  nodes: nodes,
  edges: edges
};
var options = {
  tooltip: {
    delay: 50,
    fontColor: "black",
    fontSize: 14, 
    fontFace: "verdana",
    color: {
      border: "#666",
      background: "#FFFFC6"
      } 
  },
  clustering: {
    enabled: clusteringOn,
    clusterEdgeThreshold: 50  
  },
  hideEdgesOnDrag: true,
  stabilize: true,
  zoomExtentOnStabilize: true,
  navigation: true,
  keyboard: true,
  edges: {
    inheritColor: "to"
  }
};
var network = new vis.Network(container, data, options);
nodes.clear();
edges.clear();
var parsed = vis.network.gephiParser.parseGephi(message);
nodes.add(parsed.nodes);
edges.add(parsed.edges);
network.redraw();
like image 302
Suraj Avatar asked May 05 '15 05:05

Suraj


1 Answers

I'm the developer of the network module of visjs. we have used it to stabilize much larger sets than 1000 nodes. I can't really say what's going wrong here based on the information you supply. I'd like to invite you to make an issue on our github page. We try to collect all questions there. Can you share the code you use or your data (labels scrambled for anonymity ofcourse).

If I were to guess, a 1000 node system would stabilize with about 3000 iterations. If you are using dynamic smooth curves this increases greatly as support nodes are added to position the curves. I have used 15000 iterations for a 3000 node and 25000 edge system and even then it is not finished but I stop the simulation at that point regardless.

When you say redrawn on user input, is the data reloaded or redrawn in the sense that you see the dragging or zooming (similar to the redraw function)?

~ Alex

EDIT:

Based on your data I encoutered a few problems.

First, it seems you do not allow the nodes to move but also do not supply their positions, leading to an infinite recursion in the quadtree building process. I'll make the gephiParser more robust for this in the future. See here for settings of the gephi parser: http://visjs.org/docs/network.html#Gephi_import

Secondly, You use dynamic smooth curves and a lot of interconnected nodes. Each smooth curve has an invisible support node that helps the positioning. This makes your system unstable (look at it with stabilize of to see the behaviour). In the v4 version you can set your own timestep to rectify this, but alternatively you can change your physics settings. Try the configurePhysics option and see if that helps. You can still use static smooth curves for aesthetic purposes.

To wrap up, I could get your system to stabilize with static smooth curves in about 3000 iterations, taking about a minute. I disabled clustering in your options. I'd recommend you wait for the 4.0 release to use clustering as it will be much much more powerful.

EDIT 2:

Here is a JSBin showing a working stabilization with your code and data (although modified)

http://jsbin.com/tiwijixoha/5/edit?html,output

So if you ment that it does not stabilize in the sense that it does not hide itself and only shows when it is ready instead of never reaching a stabilized state, then the problem is that stabilization is only done with a setData(), not with a dataset update.

In this jsbin I have also changed your edges and altered the physics to make it stable. You can play around with it a bit more if you're unhappy with it.

like image 136
AlexDM0 Avatar answered Oct 12 '22 01:10

AlexDM0