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.

140 lines
4.0 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | Random nodes</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mygraph {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script type="text/javascript" src="../../dist/vis.js"></script>
  16. <script type="text/javascript">
  17. var nodes = null;
  18. var edges = null;
  19. var graph = null;
  20. function draw() {
  21. nodes = [];
  22. edges = [];
  23. var connectionCount = [];
  24. // randomly create some nodes and edges
  25. var nodeCount = document.getElementById('nodeCount').value;
  26. for (var i = 0; i < nodeCount; i++) {
  27. nodes.push({
  28. id: i,
  29. label: String(i)
  30. });
  31. connectionCount[i] = 0;
  32. // create edges in a scale-free-graph way
  33. if (i == 1) {
  34. var from = i;
  35. var to = 0;
  36. edges.push({
  37. from: from,
  38. to: to
  39. });
  40. connectionCount[from]++;
  41. connectionCount[to]++;
  42. }
  43. else if (i > 1) {
  44. var conn = edges.length * 2;
  45. var rand = Math.floor(Math.random() * conn);
  46. var cum = 0;
  47. var j = 0;
  48. while (j < connectionCount.length && cum < rand) {
  49. cum += connectionCount[j];
  50. j++;
  51. }
  52. var from = i;
  53. var to = j;
  54. edges.push({
  55. from: from,
  56. to: to
  57. });
  58. connectionCount[from]++;
  59. connectionCount[to]++;
  60. }
  61. }
  62. // create a graph
  63. var clusteringOn = document.getElementById('clustering').checked;
  64. var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
  65. var container = document.getElementById('mygraph');
  66. var data = {
  67. nodes: nodes,
  68. edges: edges
  69. };
  70. /*
  71. var options = {
  72. nodes: {
  73. shape: 'circle'
  74. },
  75. edges: {
  76. length: 50
  77. },
  78. stabilize: false
  79. };
  80. */
  81. var options = {
  82. edges: {
  83. length: 50
  84. },
  85. clustering: {
  86. enabled: clusteringOn,
  87. clusterEdgeThreshold: clusterEdgeThreshold
  88. },
  89. stabilize: false
  90. };
  91. graph = new vis.Graph(container, data, options);
  92. // add event listeners
  93. vis.events.addListener(graph, 'select', function(params) {
  94. document.getElementById('selection').innerHTML =
  95. 'Selection: ' + graph.getSelection();
  96. });
  97. }
  98. </script>
  99. </head>
  100. <body onload="draw();">
  101. <div style="width:800px; font-size:15px;">
  102. This example shows a randomly generated <b>scale-free-graph</b> set of nodes and connected edges.
  103. By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
  104. a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
  105. <br />
  106. <br />
  107. Clustering is automatic when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
  108. will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
  109. <br />
  110. <br />
  111. Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
  112. Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked).
  113. </div>
  114. <form onsubmit="draw(); return false;">
  115. <label for="nodeCount">Number of nodes:</label>
  116. <input id="nodeCount" type="text" value="125" style="width: 50px;">
  117. <label for="clustering">Enable Clustering:</label>
  118. <input id="clustering" type="checkbox" onChange="draw()" checked="true">
  119. <label for="clusterEdgeThreshold">clusterEdgeThreshold:</label>
  120. <input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;">
  121. <input type="submit" value="Go">
  122. </form>
  123. <br>
  124. <div id="mygraph"></div>
  125. <p id="selection"></p>
  126. </body>
  127. </html>