<!DOCTYPE HTML>
<html>
<head>
  <title>Network | Mobile friendly</title>

  <style type="text/css">
    html, body {
      font: 10pt arial;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
    }
  </style>

  <!-- for mobile devices like android and iphone -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    // Called when the Visualization API is loaded.
    function draw() {
      nodes = [];
      edges = [];
      var EDGE_LENGTH = 50;
      var connectionCount = [];

      // randomly create some nodes
      var nodeCount = 20;
      var cols = parseInt(Math.sqrt(nodeCount));
      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: '' + i
        });

        connectionCount[i] = 0;

        // create links in a scale-free-network way
        if (i == 1) {
          var from = i;
          var to = 0;
          edges.push({
            from: from,
            to: to,
            length: EDGE_LENGTH
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
        else if (i > 1) {
          var conn = edges.length * 2;
          var rand = Math.floor(Math.random() * conn);
          var cum = 0;
          var j = 0;
          while (j < connectionCount.length && cum < rand) {
            cum += connectionCount[j];
            j++;
          }

          var from = i;
          var to = j;
          edges.push({
            from: from,
            to: to,
            length: EDGE_LENGTH
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
      }

      // Create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        stabilize: false,
        nodes: {
          shape: 'dot',
          radius: 24,
          fontSize: 24
        },
        edges: {
          width: 2
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
</head>

<body onload="draw()" onresize="network.redraw();">
<div id="mynetwork"></div>
</body>
</html>