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.

109 lines
2.5 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Random nodes</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. border: 1px solid lightgray;
  11. }
  12. </style>
  13. <script type="text/javascript" src="../../dist/vis.js"></script>
  14. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  15. <script type="text/javascript">
  16. var nodes = null;
  17. var edges = null;
  18. var network = null;
  19. function draw() {
  20. nodes = [];
  21. edges = [];
  22. var connectionCount = [];
  23. // randomly create some nodes and edges
  24. var nodeCount = document.getElementById('nodeCount').value;
  25. for (var i = 0; i < nodeCount; i++) {
  26. nodes.push({
  27. id: i,
  28. label: String(i)
  29. });
  30. connectionCount[i] = 0;
  31. // create edges in a scale-free-network way
  32. if (i == 1) {
  33. var from = i;
  34. var to = 0;
  35. edges.push({
  36. from: from,
  37. to: to
  38. });
  39. connectionCount[from]++;
  40. connectionCount[to]++;
  41. }
  42. else if (i > 1) {
  43. var conn = edges.length * 2;
  44. var rand = Math.floor(Math.random() * conn);
  45. var cum = 0;
  46. var j = 0;
  47. while (j < connectionCount.length && cum < rand) {
  48. cum += connectionCount[j];
  49. j++;
  50. }
  51. var from = i;
  52. var to = j;
  53. edges.push({
  54. from: from,
  55. to: to
  56. });
  57. connectionCount[from]++;
  58. connectionCount[to]++;
  59. }
  60. }
  61. // create a network
  62. var container = document.getElementById('mynetwork');
  63. var data = {
  64. nodes: nodes,
  65. edges: edges
  66. };
  67. var options = {
  68. };
  69. network = new vis.Network(container, data, options);
  70. // add event listeners
  71. network.on('select', function(params) {
  72. document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
  73. });
  74. network.on('stabilized', function (params) {
  75. document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
  76. });
  77. }
  78. </script>
  79. </head>
  80. <body onload="draw();">
  81. <form onsubmit="draw(); return false;">
  82. <label for="nodeCount">Number of nodes:</label>
  83. <input id="nodeCount" type="text" value="25" style="width: 50px;">
  84. <input type="submit" value="Go">
  85. </form>
  86. <br>
  87. <div id="mynetwork"></div>
  88. <p id="selection"></p>
  89. <p id="stabilization"></p>
  90. </body>
  91. </html>