vis.js graph not stabilizing even after hours

Question

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();

Glyceride

Answer 1

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.

Materiality

Thanks for the reply. I can attach or send you the JSON code that is being plotted and also the JavaScript code. I'm doing SNA using R and visualization is being done with shiny framework in a browser. The JSON is sent to client from R which is then plotted. Instead of parsing a local file, I am parsing the JSON sent from the server. I wish to send you the complete code but the JSON is too long to be posted here. Kindly guide me on sending the complete code. – Glyceride

You can use jsbin for the code example. You can host your code anywhere, preferably github. – Materiality

I couldn't access the JSON data from the url from jsbin.com due to CORS error. I have appended the OP with the JSON and JS code. Kindly take a look. – Glyceride

Are you getting any problems in your console? – Materiality

I'll add my append to my answer – Materiality

I checked it and don't find any errors. The plotting happens very smoothly but doesn't stabilize. – Glyceride

I'll append my comment again. I think I misunderstood what you ment. – Materiality

Thank you very much for the help. I really appreciate your effort. I'll work on this idea and post an update. – Glyceride

Thank you so much for the help again. setData() really helped me stabilize the graph to a great extent. If you could help me out, I have some other doubts too. As I said in the OP, I will be drawing graphs according to the user input. So the number of nodes will vary a lot. So what I am thinking is to give the user more control over the plotting by letting the user set the physics. Which function should I call to redraw the graph according to the user's setting? Is it network.redraw()? – Glyceride

Another doubt I have is about the neighbourhood highlighting. The code given in 29_neighbourhood_highlight.html does not work. I have done an example at jsbin.com/zisutu/3/edit?html,output. Please take a look and suggest edits to the code to do proper neighbourhood highlighting. – Glyceride

Hi, we're going a bit off topic here. If you have more questions please post an issue of github. In short, you can use setOptions to set the physics. The code works as you can see in the example: visjs.org/examples/network/29_neighbourhood_highlight.html That being said, you cannot just copy paste the code and expect everything to work. You'll have to understand what is happening in order to implement it yourself. The problem being that coloring in the example comes from the groups. – Materiality