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.

156 lines
4.3 KiB

  1. <!doctype html>
  2. <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF8">
  6. <title>Network | Static smooth curves - World Cup Network</title>
  7. <script type="text/javascript" src="../../dist/vis.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../../dist/vis.css">
  9. <script src="./data/WorldCup2014.js"></script>
  10. <style type="text/css">
  11. #mynetwork {
  12. width: 800px;
  13. height: 800px;
  14. border: 1px solid lightgray;
  15. }
  16. </style>
  17. <script src="../googleAnalytics.js"></script>
  18. </head>
  19. <body>
  20. <h2>Static smooth curves - World Cup Network</h2>
  21. <div style="width:700px; font-size:14px;">
  22. The static smooth curves are based only on the positions of the connected
  23. nodes.
  24. There are multiple ways to determine the way this curve is drawn.
  25. This example shows the effect of the different types on a large network.
  26. <br/> <br/>
  27. Also shown in this example is the inheritColor option of the edges as well as
  28. the roundness factor. <br/>
  29. <br/><br/>
  30. To improve performance, the physics have been disabled with:
  31. <br/><code>{barnesHut: {gravitationalConstant: 0, centralGravity: 0,
  32. springConstant: 0}}</code><br/> and we have enabled
  33. the toggle hideEdgesOnDrag.
  34. <br/><br/>
  35. </div>
  36. Smooth curve type:
  37. <select id="dropdownID">
  38. <option value="continuous">continuous</option>
  39. <option value="discrete">discrete</option>
  40. <option value="diagonalCross">diagonalCross</option>
  41. <option value="straightCross">straightCross</option>
  42. <option value="horizontal">horizontal</option>
  43. <option value="vertical">vertical</option>
  44. <option value="curvedCW">curvedCW</option>
  45. <option value="curvedCCW">curvedCCW</option>
  46. </select><br/>
  47. inheritColor option:
  48. <select id="inheritColor">
  49. <option value="from">from / true</option>
  50. <option value="to">to</option>
  51. <option value="false">false</option>
  52. </select><br/>
  53. Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05"
  54. style="width:200px" id="roundnessSlider"> <input
  55. id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0
  56. for the others)
  57. <br/>
  58. Hide edges on drag: <input type="checkbox" checked="checked"
  59. id="hideEdgesOnDrag" /><br/>
  60. Hide nodes on drag: <input type="checkbox" id="hideNodesOnDrag" />
  61. <div id="mynetwork"></div>
  62. <script type="text/javascript">
  63. var dropdown = document.getElementById("dropdownID");
  64. dropdown.onchange = update;
  65. var roundnessSlider = document.getElementById("roundnessSlider");
  66. roundnessSlider.onchange = update;
  67. var roundnessScreen = document.getElementById("roundnessScreen");
  68. var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
  69. hideEdgesOnDrag.onchange = update;
  70. var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
  71. hideNodesOnDrag.onchange = update;
  72. var inheritColor = document.getElementById("inheritColor");
  73. inheritColor.onchange = redrawAll;
  74. var network;
  75. function redrawAll() {
  76. network = null;
  77. var inheritColorVal = inheritColor.value;
  78. var container = document.getElementById('mynetwork');
  79. var options = {
  80. nodes: {
  81. shape: 'dot',
  82. scaling: {
  83. min: 10,
  84. max: 30
  85. },
  86. font: {
  87. size: 12,
  88. face: 'Tahoma'
  89. }
  90. },
  91. edges: {
  92. width: 0.15,
  93. color: {
  94. inherit: (inheritColorVal == 'false') ? false : inheritColorVal
  95. },
  96. smooth: {
  97. dynamic: false,
  98. type: 'continuous'
  99. }
  100. },
  101. interaction: {
  102. tooltipDelay: 200
  103. },
  104. rendering: {
  105. hideEdgesOnDrag: true
  106. },
  107. physics: false
  108. };
  109. // Note: data is coming from ./data/WorldCup2014.js
  110. network = new vis.Network(container, data, options);
  111. }
  112. function update() {
  113. var type = dropdown.value;
  114. var roundness = parseFloat(roundnessSlider.value);
  115. roundnessScreen.value = roundness;
  116. var options = {
  117. edges: {
  118. smooth: {
  119. type: type,
  120. roundness: roundness
  121. }
  122. },
  123. rendering: {
  124. hideEdgesOnDrag: hideEdgesOnDrag.checked,
  125. hideNodesOnDrag: hideNodesOnDrag.checked
  126. }
  127. };
  128. network.setOptions(options);
  129. }
  130. redrawAll()
  131. </script>
  132. </body>
  133. </html>