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.

102 lines
3.3 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Graph | Fully random nodes clustering</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. // randomly create some nodes and edges
  24. var nodeCount = parseInt(document.getElementById('nodeCount').value);
  25. for (var i = 0; i < nodeCount; i++) {
  26. nodes.push({
  27. id: i,
  28. label: String(i)
  29. });
  30. }
  31. for (var i = 0; i < nodeCount; i++) {
  32. var from = i;
  33. var to = i;
  34. to = i;
  35. while (to == i) {
  36. to = Math.floor(Math.random() * (nodeCount));
  37. }
  38. edges.push({
  39. from: from,
  40. to: to
  41. });
  42. }
  43. // create a graph
  44. var clusteringOn = document.getElementById('clustering').checked;
  45. var container = document.getElementById('mygraph');
  46. var data = {
  47. nodes: nodes,
  48. edges: edges
  49. };
  50. var options = {
  51. edges: {
  52. length: 80
  53. },
  54. clustering: {
  55. enabled: clusteringOn
  56. },
  57. stabilize: false
  58. };
  59. graph = new vis.Graph(container, data, options);
  60. // add event listeners
  61. vis.events.addListener(graph, 'select', function(params) {
  62. document.getElementById('selection').innerHTML =
  63. 'Selection: ' + graph.getSelection();
  64. });
  65. }
  66. </script>
  67. </head>
  68. <body onload="draw();">
  69. <h2>Clustering - Fully random graph</h2>
  70. <div style="width:700px; font-size:14px;">
  71. This example shows a fully randomly generated set of nodes and connected edges.
  72. By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
  73. a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
  74. <br />
  75. <br />
  76. Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
  77. will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
  78. <br />
  79. <br />
  80. Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
  81. </div>
  82. <br />
  83. <form onsubmit="draw(); return false;">
  84. <label for="nodeCount">Number of nodes:</label>
  85. <input id="nodeCount" type="text" value="50" style="width: 50px;">
  86. <label for="clustering">Enable Clustering:</label>
  87. <input id="clustering" type="checkbox" onChange="draw()" checked="true">
  88. <input type="submit" value="Go">
  89. </form>
  90. <br>
  91. <div id="mygraph"></div>
  92. <p id="selection"></p>
  93. </body>
  94. </html>