I'm building a page to visualize a network of nodes and edges. vis.js does what I want, but it is very slow with my data.

The code I'm using is copied almost verbatim from one of the examples at vis.js. The difference is that the arrays nodes and edges below contain ~4000 elements each (in the code below I've truncated them to several elements).

A page like this takes several minutes to load. Any ideas on how to make it faster?

<div id="mynetwork"></div>
<script type="text/javascript">
var color = 'gray';
var len = undefined;


var nodes = [{"group": 1, "id": 1, "label": "my first node"}, {"group": 0, "id": 2944, "label": "my nth node"}];
var edges = [{"to": 2944, "from": 1}, {"to": 2945, "from": 2}, {"to": 2946, "from": 3}];

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {
    nodes: {
        shape: 'dot',
        size: 30,
        font: {
            size: 32,
            color: '#ffffff'
        },
        borderWidth: 2
    },
    edges: {
        width: 2
    }
};
network = new vis.Network(container, data, options);

I'm building a page to visualize a network of nodes and edges. vis.js does what I want, but it is very slow with my data.

The code I'm using is copied almost verbatim from one of the examples at vis.js. The difference is that the arrays nodes and edges below contain ~4000 elements each (in the code below I've truncated them to several elements).

A page like this takes several minutes to load. Any ideas on how to make it faster?

<div id="mynetwork"></div>
<script type="text/javascript">
var color = 'gray';
var len = undefined;


var nodes = [{"group": 1, "id": 1, "label": "my first node"}, {"group": 0, "id": 2944, "label": "my nth node"}];
var edges = [{"to": 2944, "from": 1}, {"to": 2945, "from": 2}, {"to": 2946, "from": 3}];

// create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {
    nodes: {
        shape: 'dot',
        size: 30,
        font: {
            size: 32,
            color: '#ffffff'
        },
        borderWidth: 2
    },
    edges: {
        width: 2
    }
};
network = new vis.Network(container, data, options);

• javascript
• visualization
• vis.js

5 Answers 5

I used to have poor performance with many images

Adding this in options solved the problem :

nodes: {
  shapeProperties: {
    interpolation: false    // 'true' for intensive zooming
  }
}

Try to use layout: {improvedLayout:false} inside options.

You can use different algorithm which fit best in your requirement

for example same like

var options = {
  physics:{
    enabled: true,
    barnesHut: {
      gravitationalConstant: -2000,
      centralGravity: 0.3,
      springLength: 95,
      springConstant: 0.04,
      damping: 0.09,
      avoidOverlap: 0
    },
    forceAtlas2Based: {
      gravitationalConstant: -50,
      centralGravity: 0.01,
      springConstant: 0.08,
      springLength: 100,
      damping: 0.4,
      avoidOverlap: 0
    },
    repulsion: {
      centralGravity: 0.2,
      springLength: 200,
      springConstant: 0.05,
      nodeDistance: 100,
      damping: 0.09
    },
    hierarchicalRepulsion: {
      centralGravity: 0.0,
      springLength: 100,
      springConstant: 0.01,
      nodeDistance: 120,
      damping: 0.09
    },
    maxVelocity: 50,
    minVelocity: 0.1,
    solver: 'barnesHut',
    stabilization: {
      enabled: true,
      iterations: 1000,
      updateInterval: 100,
      onlyDynamicEdges: false,
      fit: true
    },
    timestep: 0.5,
    adaptiveTimestep: true
  }
}

network.setOptions(options); 

your can also use options:

 {
   physics:{
        stabilizations:false
   }
 }

if you want to load the network early

and final solution is if any of the above do not work you can store the network x and y position when it is stabilized and initializations can be done with the coordinates which was at the time of stabilization ...

see this related thread

Had similar performance issue with vis.js network. I used image nodes with svg as image source. In IE performance with about 40 nodes was acceptable, but in Chrome it was terrible slow. It pointed out two issues with the svg images:

• if svg image has big size, such as 1024X1024 then chrome has terrible rendering performance.

• in IE it is vice versa: if no size is set to the source image in svg tag, then IE is slow.

Fixed it by setting with=36, height=36 for all my svg images in svg tag. Now it works in both browsers very well. Maybe this is helpful for others too.