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.8 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Network | Mobile friendly</title>
  5. <style type="text/css">
  6. html, body {
  7. font: 10pt arial;
  8. padding: 0;
  9. margin: 0;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. #mynetwork {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. </style>
  18. <!-- for mobile devices like android and iphone -->
  19. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  20. <script type="text/javascript" src="../../dist/vis.js"></script>
  21. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  22. <script type="text/javascript">
  23. var nodes = null;
  24. var edges = null;
  25. var network = null;
  26. // Called when the Visualization API is loaded.
  27. function draw() {
  28. nodes = [];
  29. edges = [];
  30. var EDGE_LENGTH = 50;
  31. var connectionCount = [];
  32. // randomly create some nodes
  33. var nodeCount = 20;
  34. var cols = parseInt(Math.sqrt(nodeCount));
  35. for (var i = 0; i < nodeCount; i++) {
  36. nodes.push({
  37. id: i,
  38. label: '' + i
  39. });
  40. connectionCount[i] = 0;
  41. // create links in a scale-free-network way
  42. if (i == 1) {
  43. var from = i;
  44. var to = 0;
  45. edges.push({
  46. from: from,
  47. to: to,
  48. length: EDGE_LENGTH
  49. });
  50. connectionCount[from]++;
  51. connectionCount[to]++;
  52. }
  53. else if (i > 1) {
  54. var conn = edges.length * 2;
  55. var rand = Math.floor(Math.random() * conn);
  56. var cum = 0;
  57. var j = 0;
  58. while (j < connectionCount.length && cum < rand) {
  59. cum += connectionCount[j];
  60. j++;
  61. }
  62. var from = i;
  63. var to = j;
  64. edges.push({
  65. from: from,
  66. to: to,
  67. length: EDGE_LENGTH
  68. });
  69. connectionCount[from]++;
  70. connectionCount[to]++;
  71. }
  72. }
  73. // Create a network
  74. var container = document.getElementById('mynetwork');
  75. var data = {
  76. nodes: nodes,
  77. edges: edges
  78. };
  79. var options = {
  80. stabilize: false,
  81. nodes: {
  82. shape: 'dot',
  83. radius: 24,
  84. fontSize: 24
  85. },
  86. edges: {
  87. width: 2
  88. }
  89. };
  90. network = new vis.Network(container, data, options);
  91. }
  92. </script>
  93. <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>
  94. <body onload="draw()" onresize="network.redraw();">
  95. <div id="mynetwork"></div>
  96. </body>
  97. </html>