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.

163 lines
4.5 KiB

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