Vis.JS Performance

by Abhijeet Deshmukh

HTML

<script src="//visjs.org/dist/vis.js"></script>
<script src="//visjs.org/examples/network/datasources/WorldCup2014.js"></script>
<link rel="stylesheet" href="//visjs.org/dist/vis.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//keen.github.io/dashboards/assets/css/keen-dashboards.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div class="chart-wrapper">
        <div class="chart-title"></div>
        <div class="chart-stage">
          <button id="reloadNetwork">Reload Network</button>
          <div id="mynetwork"></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#mynetwork {
  width: 100%;
  height: 800px;
}

JavaScript

var network;


function redrawAll() {
  // remove positoins
  for (var i = 0; i < nodes.length; i++) {
    delete nodes[i].x;
    delete nodes[i].y;
  }

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    autoResize: true,
    height: '100%',
    width: '100%',
    locale: 'en',
    clickToUse: false,
    nodes: {
      shape: 'dot',
      scaling: {
        min: 10,
        max: 30
      },
      font: {
        size: 12,
        face: 'Tahoma'
      }
    },
    edges: {
      width: 0.15,
      color: {
        inherit: 'from'
      },
      smooth: {
        type: 'continuous'
      }
    },
    physics: {
      enabled: false,
      stabilization: false,
      barnesHut: {
        gravitationalConstant: -80000,
        springConstant: 0.001,
        springLength: 200
      }
    },
    interaction: {
      tooltipDelay: 200,
      hideEdgesOnDrag: true
    },
    layout: {
      hierarchical: {
        enabled: true,
        levelSeparation: 150,
        nodeSpacing: 100,
        treeSpacing: 200,
        blockShifting: true,
        edgeMinimization: true,
        parentCentralization: true,
        direction: 'LR',
        sortMethod: 'directed'
      }
    }
  };

  // Note: data is coming from ./datasources/WorldCup2014.js
  network = new vis.Network(container, data, options);
}

redrawAll()
document.getElementById("reloadNetwork").onclick = redrawAll;