<!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>