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.

326 lines
12 KiB

10 years ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Animation</title>
  5. <style type="text/css">
  6. body {
  7. font: 10pt sans;
  8. }
  9. #mynetwork {
  10. width: 600px;
  11. height: 600px;
  12. border: 1px solid lightgray;
  13. }
  14. div.left {
  15. position:relative;
  16. float:left;
  17. width:300px;
  18. border: 1px #c7c7c7 solid;
  19. height:590px;
  20. padding:5px;
  21. }
  22. div.right {
  23. padding-left:10px;
  24. float:left;
  25. width:600px;
  26. }
  27. div.bottom {
  28. position:absolute;
  29. bottom:5px;
  30. }
  31. </style>
  32. <script type="text/javascript" src="../../dist/vis.js"></script>
  33. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  34. <script type="text/javascript">
  35. var nodes = null;
  36. var edges = null;
  37. var network = null;
  38. var doButton, focusButton, showButton;
  39. var statusUpdateSpan;
  40. var finishMessage = "";
  41. function destroy() {
  42. if (network !== null) {
  43. network.destroy();
  44. network = null;
  45. }
  46. }
  47. function draw() {
  48. destroy();
  49. statusUpdateSpan = document.getElementById("statusUpdate");
  50. doButton = document.getElementById("btnDo");
  51. focusButton = document.getElementById("btnFocus");
  52. showButton = document.getElementById("btnShow");
  53. nodes = [];
  54. edges = [];
  55. var connectionCount = [];
  56. // randomly create some nodes and edges
  57. var nodeCount = 25;
  58. for (var i = 0; i < nodeCount; i++) {
  59. nodes.push({
  60. id: i,
  61. label: String(i)
  62. });
  63. connectionCount[i] = 0;
  64. // create edges in a scale-free-network way
  65. if (i == 1) {
  66. var from = i;
  67. var to = 0;
  68. edges.push({
  69. from: from,
  70. to: to
  71. });
  72. connectionCount[from]++;
  73. connectionCount[to]++;
  74. }
  75. else if (i > 1) {
  76. var conn = edges.length * 2;
  77. var rand = Math.floor(Math.random() * conn);
  78. var cum = 0;
  79. var j = 0;
  80. while (j < connectionCount.length && cum < rand) {
  81. cum += connectionCount[j];
  82. j++;
  83. }
  84. var from = i;
  85. var to = j;
  86. edges.push({
  87. from: from,
  88. to: to
  89. });
  90. connectionCount[from]++;
  91. connectionCount[to]++;
  92. }
  93. }
  94. // create a network
  95. var container = document.getElementById('mynetwork');
  96. var data = {
  97. nodes: nodes,
  98. edges: edges
  99. };
  100. var options = {stabilizationIterations:1200};
  101. network = new vis.Network(container, data, options);
  102. // add event listeners
  103. network.on('select', function(params) {
  104. document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
  105. });
  106. network.on('stabilized', function (params) {
  107. document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
  108. });
  109. network.on("animationFinished", function() {
  110. statusUpdateSpan.innerHTML = finishMessage;
  111. })
  112. }
  113. function zoomExtentAnimated() {
  114. var offsetx = parseInt(document.getElementById("offsetx").value);
  115. var offsety = parseInt(document.getElementById("offsety").value);
  116. var duration = parseInt(document.getElementById("duration").value);
  117. var easingFunction = document.getElementById("easingFunction").value;
  118. var options = {offset: {x:offsetx,y:offsety},
  119. duration: duration,
  120. easingFunction: easingFunction
  121. }
  122. statusUpdateSpan.innerHTML = "Doing ZoomExtent() Animation.";
  123. finishMessage = "Animation finished."
  124. network.zoomExtent(options);
  125. }
  126. function doDefaultAnimation() {
  127. var offsetx = parseInt(document.getElementById("offsetx").value);
  128. var offsety = parseInt(document.getElementById("offsety").value);
  129. var scale = parseFloat(document.getElementById("scale").value);
  130. var positionx = parseInt(document.getElementById("positionx").value);
  131. var positiony = parseInt(document.getElementById("positiony").value);
  132. var easingFunction = document.getElementById("easingFunction").value;
  133. var options = {
  134. position: {x:positionx,y:positiony},
  135. scale: scale,
  136. offset: {x:offsetx,y:offsety},
  137. animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad.
  138. }
  139. statusUpdateSpan.innerHTML = "Doing Animation.";
  140. finishMessage = "Animation finished."
  141. network.moveTo(options);
  142. }
  143. function doAnimation() {
  144. var offsetx = parseInt(document.getElementById("offsetx").value);
  145. var offsety = parseInt(document.getElementById("offsety").value);
  146. var duration = parseInt(document.getElementById("duration").value);
  147. var scale = parseFloat(document.getElementById("scale").value);
  148. var positionx = parseInt(document.getElementById("positionx").value);
  149. var positiony = parseInt(document.getElementById("positiony").value);
  150. var easingFunction = document.getElementById("easingFunction").value;
  151. var options = {
  152. position: {x:positionx,y:positiony},
  153. scale: scale,
  154. offset: {x:offsetx,y:offsety},
  155. animation: {
  156. duration: duration,
  157. easingFunction: easingFunction
  158. }
  159. }
  160. statusUpdateSpan.innerHTML = "Doing Animation.";
  161. finishMessage = "Animation finished."
  162. network.moveTo(options);
  163. }
  164. function focusRandom() {
  165. var nodeId = Math.floor(Math.random() * 25);
  166. var offsetx = parseInt(document.getElementById("offsetx").value);
  167. var offsety = parseInt(document.getElementById("offsety").value);
  168. var duration = parseInt(document.getElementById("duration").value);
  169. var scale = parseFloat(document.getElementById("scale").value);
  170. var easingFunction = document.getElementById("easingFunction").value;
  171. var options = {
  172. // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
  173. scale: scale,
  174. offset: {x:offsetx,y:offsety},
  175. animation: {
  176. duration: duration,
  177. easingFunction: easingFunction
  178. }
  179. }
  180. statusUpdateSpan.innerHTML = "Focusing on node: " + nodeId;
  181. finishMessage = "Node: " + nodeId + " in focus.";
  182. network.focusOnNode(nodeId, options);
  183. }
  184. var showInterval = false;
  185. var showPhase = 1;
  186. function startShow() {
  187. if (showInterval !== false) {
  188. showInterval = false;
  189. showButton.value = "Start a show!";
  190. network.zoomExtent();
  191. }
  192. else {
  193. showButton.value = "Stop the show!";
  194. var duration = parseInt(document.getElementById("duration").value);
  195. focusRandom();
  196. window.setTimeout(doTheShow, duration);
  197. showInterval = true;
  198. }
  199. }
  200. function doTheShow() {
  201. if (showInterval == true) {
  202. var duration = parseInt(document.getElementById("duration").value);
  203. if (showPhase == 0) {
  204. focusRandom();
  205. showPhase = 1;
  206. }
  207. else {
  208. zoomExtentAnimated();
  209. showPhase = 0;
  210. }
  211. window.setTimeout(doTheShow, duration);
  212. }
  213. }
  214. </script>
  215. <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>
  216. <body onload="draw();">
  217. <h2>Camera animations</h2>
  218. <div style="width:700px; font-size:14px;">
  219. You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
  220. also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs.
  221. <br /><br/>
  222. The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
  223. the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function.
  224. <br/><br/>
  225. Here you can see a full description of the options you can supply to moveTo:
  226. </div>
  227. <pre>
  228. var moveToOptions = {
  229. position: {x:x, y:x}, // position to animate to (Numbers)
  230. scale: 1.0, // scale to animate to (Number)
  231. offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
  232. animation: { // animation object, can also be Boolean
  233. duration: 1000, // animation duration in milliseconds (Number)
  234. easingFunction: "easeInOutQuad" // Animation easing function, available are:
  235. } // linear, easeInQuad, easeOutQuad, easeInOutQuad,
  236. } // easeInCubic, easeOutCubic, easeInOutCubic,
  237. // easeInQuart, easeOutQuart, easeInOutQuart,
  238. // easeInQuint, easeOutQuint, easeInOutQuint
  239. </pre>
  240. <div class="left">
  241. <table>
  242. <tr>
  243. <td>position x</td><td><input type="text" value="300" id="positionx" style="width:170px;"></td>
  244. </tr>
  245. <tr>
  246. <td>position y</td><td><input type="text" value="300" id="positiony" style="width:170px;"></td>
  247. </tr>
  248. <tr>
  249. <td>scale</td><td><input type="text" value="1.0" id="scale" style="width:170px;"></td>
  250. </tr>
  251. <tr>
  252. <td>offset x</td><td><input type="text" value="0" id="offsetx" style="width:170px;"> px</td>
  253. </tr>
  254. <tr>
  255. <td>offset y</td><td><input type="text" value="0" id="offsety" style="width:170px;"> px</td>
  256. </tr>
  257. <tr>
  258. <td>duration</td><td><input type="text" value="2500" id="duration" style="width:170px;"> ms</td>
  259. </tr>
  260. <tr>
  261. <td>easingFunction</td><td>
  262. <select id="easingFunction" style="width:174px;">
  263. <option value="linear">linear</option>
  264. <option value="easeInQuad">easeInQuad</option>
  265. <option value="easeOutQuad">easeOutQuad</option>
  266. <option value="easeInOutQuad" selected="selected">easeInOutQuad</option>
  267. <option value="easeInCubic">easeInCubic</option>
  268. <option value="easeOutCubic">easeOutCubic</option>
  269. <option value="easeInOutCubic">easeInOutCubic</option>
  270. <option value="easeInQuart">easeInQuart</option>
  271. <option value="easeOutQuart">easeOutQuart</option>
  272. <option value="easeInOutQuart">easeInOutQuart</option>
  273. <option value="easeInQuint">easeInQuint</option>
  274. <option value="easeOutQuint">easeOutQuint</option>
  275. <option value="easeInOutQuint">easeInOutQuint</option>
  276. </select>
  277. </td>
  278. </tr>
  279. </table>
  280. <div class="bottom">
  281. <span id="statusUpdate"></span><br />
  282. Examples:
  283. <input type="button" onclick="doAnimation();" value="Animate with above settings." style="width:300px;" id="btnDo"> <br/>
  284. <input type="button" onclick="doDefaultAnimation();" value="Animate with default settings." style="width:300px;" id="btnDoDefault"> <br/>
  285. <input type="button" onclick="zoomExtentAnimated();" value="Animated ZoomExtent()." style="width:300px;" id="btnZoom"> <br/>
  286. <input type="button" onclick="focusRandom();" value="Focus on random node." style="width:300px;" id="btnFocus"><br/>
  287. <input type="button" onclick="startShow();" value="Start a show!" style="width:300px;" id="btnShow"><br/>
  288. </div>
  289. </div>
  290. <div class="right">
  291. <div id="mynetwork"></div>
  292. <p id="selection"></p>
  293. <p id="stabilization"></p>
  294. </div>
  295. </body>
  296. </html>