vis.js stops responding on node count > 40

Question

Recently integrated vis.js for data visualisation , my problem is that for node count < 40 , it works fine, but increase the node count and i get the below error on mozilla , chrome just stops responding.

Overall impact is that it slows down the page-load time or even after loading the page, scroll to other portions or the web page is like tortoise (its one div of multiple divs in the page aligned vertically)

Below is my js which does the network part

try {

     // response : response from backend API  
     // Create graph on UI
     graph_nodes = response.graph_data["nodes"]
     graph_edges = response.graph_data["edges"]
     // create an array with nodes
     var nodes = new vis.DataSet(graph_nodes);
     // create an array with edges
     var edges = new vis.DataSet(graph_edges);

     // create a network
     var container = document.getElementById('network_visualisation');

     // provide the data in the vis format
     var data = {
        nodes: nodes,
        edges: edges
     };
     var options = {
                interaction:{
                    hover: true,
                    hoverConnectedEdges: true,
                    multiselect: false,
                    selectable: true,
                    selectConnectedEdges: true,
                    tooltipDelay: 300,
                    zoomView: true
                },
                nodes:{
                    color: {
                      border: 'black',
                      background: 'white',
                      highlight: {
                        border: 'black',
                        background: '#ccc'
                      },
                      hover: {
                        border: '#2B7CE9',
                        background: '#D2E5FF'
                      }
                    },
                    labelHighlightBold: true,
                    mass: 5,
                    physics: true,
                    scaling: {
                      min: 10,
                      max: 30,
                      label: {
                        enabled: true,
                        min: 14,
                        max: 30,
                        maxVisible: 30,
                        drawThreshold: 5
                      },
                    },
                    shadow:{
                      enabled: false,
                    },
                    shape: 'circle',
                    shapeProperties: {
                      borderDashes: false, // only for borders
                      borderRadius: 6,     // only for box shape
                      interpolation: false,  // only for image and circularImage shapes
                      useImageSize: false,  // only for image and circularImage shapes
                      useBorderWithImage: false  // only for image shape
                    },
                  },
                edges:{
                    arrows: {
                      to:     {enabled: true, scaleFactor:1, type:'arrow'},
                    },
                    arrowStrikethrough: false,
                    color: {
                      color:'#E7EAFF',
                      highlight:'#9EAAFC',
                      hover: '#2944FB',
                      inherit: "from",
                      opacity:1.0
                    },
                    dashes: true,
                    },
         };

     // initialize your network!
     var network = new vis.Network(container, data, options);
     network.on("stabilizationProgress", function(params) {
        var maxWidth = 496;
        var minWidth = 20;
        var widthFactor = params.iterations/params.total;
        var width = Math.max(minWidth,maxWidth * widthFactor);

        document.getElementById('bar').style.width = width + 'px';
        document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
    });
    network.once("stabilizationIterationsDone", function() {
        document.getElementById('text').innerHTML = '100%';
        document.getElementById('bar').style.width = '496px';
        document.getElementById('loadingBar').style.opacity = 0;
        // really clean the dom element
        setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
    });
     }
catch (e) {
   console.error(e); // pass exception object to error handler
}

Sample data on which it is working :

  "graph_data": {
    "nodes": [
      {
        "id": "SOMEDATADV3d92db1483600076",
        "label": "SOMEDATA..0076"
      },
      {
        "id": "SOMEDATADID49e581483290782",
        "label": "SOMEDATA..0782"
      },
      {
        "id": "SOMEDATADV3777591473346353",
        "label": "SOMEDATA..6353"
      },
      {
        "id": "SOMEDATADAD5fb491473346381",
        "label": "SOMEDATA..6381"
      },
      {
        "id": "SOMEDATADV39de121478512314",
        "label": "SOMEDATA..2314"
      },
      {
        "id": "SOMEDATADV39a60d1482924361",
        "label": "SOMEDATA..4361"
      }
    ],
    "edges": [
      {
        "to": "SOMEDATADID49e581483290782",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADV3777591473346353",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADAD5fb491473346381",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADV3d92db1483600076",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV3777591473346353",
        "from": "SOMEDATADID49e581483290782",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADV39de121478512314",
        "from": "SOMEDATADID49e581483290782",
        "label": "some_label3"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADID49e581483290782",
        "label": "some_label2"
      },
      {
        "to": "SOMEDATADAD5fb491473346381",
        "from": "SOMEDATADV3777591473346353",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADV3777591473346353",
        "label": "some_label1"
      },
      {
        "to": "SOMEDATADV39a60d1482924361",
        "from": "SOMEDATADAD5fb491473346381",
        "label": "some_label1"
      }
    ]
  },

is any one else facing the same issue?

Answer 1

Here is 100 nodes and 50 random edges with no options and no event handling on stabilizationProgress or stabilizationIterationsDone . If you get reasonable performance on this snippet I guess the issue can be isolated with the event handling or the option configuration:

 // fake up 100 nodes plus 50 randomised edges var nodes = [], edges = []; console.log('start random graph data: ' + new Date); // create nodes and edges for (var i = 0; i < 100; i++) { nodes.push({ "id": "id" + i.toString(), "label": "node" + i.toString() }); } for (var i = 0; i < 100; i += 2) { var randId = "id" + (Math.floor(Math.random() * 99) + 1).toString(); edges.push({ "to": randId, "from": "id" + i.toString(), "label": "edge" + i.toString() }) } // vis data sets console.log('start graph initialisation: ' + new Date); var visNodes = new vis.DataSet(nodes); var visEdges = new vis.DataSet(edges); // network div var container = document.getElementById('network_visualisation'); // provide the data in the vis format var data = { nodes: visNodes, edges: visEdges }; // initialize your network! console.log('instantiate graph: ' + new Date); var network = new vis.Network(container, data, {});

 #network_visualisation { height: 320px; width: 640px; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script> <div id="network_visualisation"></div>