vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

160 lines
4.0 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | Groups</title>
  5. <style>
  6. body {
  7. font: 10pt arial;
  8. }
  9. #mygraph {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16. <script type="text/javascript" src="../../vis.js"></script>
  17. <script type="text/javascript">
  18. var nodes = null;
  19. var edges = null;
  20. var graph = null;
  21. google.load('visualization', '1');
  22. // Set callback to run when API is loaded
  23. google.setOnLoadCallback(draw);
  24. // Called when the Visualization API is loaded.
  25. function draw() {
  26. var from, to;
  27. nodes = [];
  28. edges = [];
  29. var color = 'gray';
  30. var len = undefined;
  31. // randomly create some nodes
  32. var nodeCount = parseInt(document.getElementById('nodeCount').value);
  33. var nodeOffset = 0;
  34. var groupMin = 0;
  35. var groupMax = parseInt(document.getElementById('groupCount').value);
  36. var group = groupMin;
  37. var groupLeader = []; // will contain the node id with the most links of each group
  38. while (group < groupMax) {
  39. // randomly create some nodes
  40. var i = 0;
  41. var cols = parseInt(Math.sqrt(nodeCount));
  42. var connectionCount = [];
  43. while (i < nodeCount) {
  44. nodes.push({
  45. id: i + nodeOffset,
  46. label: String(i + nodeOffset),
  47. group: group
  48. });
  49. connectionCount[i] = 0;
  50. // create links in a scale-free-graph way
  51. if (i == 1) {
  52. from = i;
  53. to = 0;
  54. edges.push({
  55. from: from + nodeOffset,
  56. to: to + nodeOffset,
  57. length: len,
  58. color: color
  59. });
  60. connectionCount[from]++;
  61. connectionCount[to]++;
  62. }
  63. else if (i > 1) {
  64. var conn = (i - 1) * 2;
  65. var rand = Math.floor(Math.random() * conn);
  66. var cum = 0;
  67. var j = 0;
  68. while (j < connectionCount.length && cum < rand) {
  69. cum += connectionCount[j];
  70. j++;
  71. }
  72. from = i;
  73. to = j;
  74. edges.push({
  75. from: from + nodeOffset,
  76. to: to + nodeOffset,
  77. length: len,
  78. color: color
  79. });
  80. connectionCount[from]++;
  81. connectionCount[to]++;
  82. }
  83. i++;
  84. }
  85. // calculate the node with the most number of connections
  86. var leader = 0;
  87. for (var c in connectionCount) {
  88. if (connectionCount.hasOwnProperty(c)) {
  89. if (connectionCount[c] > connectionCount[leader]) {
  90. leader = parseInt(c);
  91. }
  92. }
  93. }
  94. if (group > groupMin) {
  95. // connect to the leader of this group to the leader of a random other group
  96. from = leader + nodeOffset;
  97. to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
  98. edges.push({
  99. from: from,
  100. to: to,
  101. length: len,
  102. color: color
  103. });
  104. }
  105. // add this leader to the list
  106. groupLeader[group] = leader + nodeOffset;
  107. nodeOffset += nodeCount;
  108. group++;
  109. }
  110. // create a graph
  111. var container = document.getElementById('mygraph');
  112. var data = {
  113. nodes: nodes,
  114. edges: edges
  115. };
  116. var options = {
  117. stabilize: false,
  118. nodes: {
  119. shape: 'dot'
  120. },
  121. edges: {
  122. length: 50
  123. }
  124. };
  125. graph = new vis.Graph(container, data, options);
  126. }
  127. </script>
  128. </head>
  129. <body onload="draw()">
  130. <form onsubmit= "javascript: draw(); return false;">
  131. Number of groups:
  132. <input type="text" value="6" id="groupCount" style="width: 50px;">
  133. Number of nodes per group:
  134. <input type="text" value="7" id="nodeCount" style="width: 50px;">
  135. <input type="submit" value="Go">
  136. </form>
  137. <br>
  138. <div id="mygraph"></div>
  139. </body>
  140. </html>