<!doctype html>
<html>
<head>
  <title>Graph | Groups</title>

  <style>
    body {
      font: 10pt arial;
    }
    #mygraph {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
  </style>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript" src="../../vis.js"></script>

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

    google.load('visualization', '1');

    // Set callback to run when API is loaded
    google.setOnLoadCallback(draw);

    // Called when the Visualization API is loaded.
    function draw() {
      var from, to;

      nodes = [];
      edges = [];

      var color = 'gray';
      var len = undefined;

      // randomly create some nodes
      var nodeCount = parseInt(document.getElementById('nodeCount').value);
      var nodeOffset = 0;
      var groupMin = 0;
      var groupMax = parseInt(document.getElementById('groupCount').value);
      var group = groupMin;
      var groupLeader = []; // will contain the node id with the most links of each group
      while (group < groupMax) {
        // randomly create some nodes
        var i = 0;
        var cols = parseInt(Math.sqrt(nodeCount));
        var connectionCount = [];
        while (i < nodeCount) {
          nodes.push({
            id: i + nodeOffset,
            label: String(i + nodeOffset),
            group: group
          });
          connectionCount[i] = 0;

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

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

          i++;
        }

        // calculate the node with the most number of connections
        var leader = 0;
        for (var c in connectionCount) {
          if (connectionCount.hasOwnProperty(c)) {
            if (connectionCount[c] > connectionCount[leader]) {
              leader = parseInt(c);
            }
          }
        }

        if (group > groupMin) {
          // connect to the leader of this group to the leader of a random other group
          from = leader + nodeOffset;
          to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
          edges.push({
            from: from,
            to: to,
            length: len,
            color: color
          });
        }

        // add this leader to the list
        groupLeader[group] = leader + nodeOffset;

        nodeOffset += nodeCount;
        group++;
      }

      // create a graph
      var container = document.getElementById('mygraph');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        stabilize: false,
        nodes: {
          shape: 'dot'
        },
        edges: {
          length: 50
        }
      };
      graph = new vis.Graph(container, data, options);
    }
  </script>
</head>

<body onload="draw()">
<form onsubmit= "javascript: draw(); return false;">
  Number of groups:
  <input type="text" value="6" id="groupCount" style="width: 50px;">
  Number of nodes per group:
  <input type="text" value="7" id="nodeCount" style="width: 50px;">
  <input type="submit" value="Go">
</form>
<br>

<div id="mygraph"></div>

</body>
</html>