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.

216 lines
5.4 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | DOT language playground</title>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  6. <script src="../../../../dist/vis.js"></script>
  7. <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
  8. <style type="text/css">
  9. body, html {
  10. font: 10pt sans;
  11. line-height: 1.5em;;
  12. width: 100%;
  13. height: 100%;
  14. padding: 0;
  15. margin: 0;
  16. color: #4d4d4d;
  17. box-sizing: border-box;
  18. overflow: hidden;
  19. }
  20. #header {
  21. margin: 0;
  22. padding: 10px;
  23. box-sizing: border-box;
  24. }
  25. #contents {
  26. height: 100%;
  27. margin: 0;
  28. padding: 0;
  29. box-sizing: border-box;
  30. position: relative;
  31. }
  32. #left, #right {
  33. position: absolute;
  34. width: 50%;
  35. height: 100%;
  36. margin: 0;
  37. padding: 10px;
  38. box-sizing: border-box;
  39. display: inline-block;
  40. }
  41. #left {
  42. top: 0;
  43. left: 0;
  44. }
  45. #right {
  46. top: 0;
  47. right: 0;
  48. }
  49. #error {
  50. color: red;
  51. }
  52. #data {
  53. width: 100%;
  54. height: 100%;
  55. border: 1px solid #d3d3d3;
  56. box-sizing: border-box;
  57. resize: none;
  58. }
  59. #draw {
  60. padding: 5px 15px;
  61. }
  62. #mynetwork {
  63. width: 100%;
  64. height: 100%;
  65. border: 1px solid #d3d3d3;
  66. box-sizing: border-box;
  67. }
  68. a:hover {
  69. color: red;
  70. }
  71. </style>
  72. <script src="../../../googleAnalytics.js"></script>
  73. </head>
  74. <body>
  75. <div id="header">
  76. <h1>DOT language playground</h1>
  77. <p>
  78. Play around with the DOT language in the textarea below, or select one of the following examples:
  79. </p>
  80. <p style="margin-left: 30px;">
  81. <a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
  82. <a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
  83. <a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
  84. <a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
  85. <a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
  86. <a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
  87. <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
  88. <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
  89. <a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
  90. <a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
  91. <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
  92. <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
  93. <a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
  94. </p>
  95. <p>
  96. The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
  97. </p>
  98. <div>
  99. <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
  100. <span id="error"></span>
  101. </div>
  102. </div>
  103. <div id="contents">
  104. <div id="left">
  105. <textarea id="data">
  106. digraph {
  107. node [shape=circle fontsize=16]
  108. edge [length=100, color=gray, fontcolor=black]
  109. A -> A[label=0.5];
  110. B -> B[label=1.2] -> C[label=0.7] -- A;
  111. B -> D;
  112. D -> {B; C}
  113. D -> E[label=0.2];
  114. F -> F;
  115. A [
  116. fontcolor=white,
  117. color=red,
  118. ]
  119. }
  120. </textarea>
  121. </div>
  122. <div id="right">
  123. <div id="mynetwork"></div>
  124. </div>
  125. </div>
  126. <script type="text/javascript">
  127. // create a network
  128. var container = document.getElementById('mynetwork');
  129. var options = {
  130. physics: {
  131. stabilization: false,
  132. barnesHut: {
  133. springLength: 200
  134. }
  135. }
  136. };
  137. var data = {};
  138. var network = new vis.Network(container, data, options);
  139. $('#draw').click(draw);
  140. $('a.example').click(function (event) {
  141. var url = $(event.target).data('url');
  142. $.get(url)
  143. .done(function(dotData) {
  144. $('#data').val(dotData);
  145. draw();
  146. })
  147. .fail(function () {
  148. $('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
  149. resize();
  150. });
  151. });
  152. $(window).resize(resize);
  153. $(window).load(draw);
  154. $('#data').keydown(function (event) {
  155. if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
  156. draw();
  157. event.stopPropagation();
  158. event.preventDefault();
  159. }
  160. });
  161. function resize() {
  162. $('#contents').height($('body').height() - $('#header').height() - 30);
  163. }
  164. function draw () {
  165. try {
  166. resize();
  167. $('#error').html('');
  168. // Provide a string with data in DOT language
  169. data = vis.network.convertDot($('#data').val());
  170. network.setData(data);
  171. }
  172. catch (err) {
  173. // set the cursor at the position where the error occurred
  174. var match = /\(char (.*)\)/.exec(err);
  175. if (match) {
  176. var pos = Number(match[1]);
  177. var textarea = $('#data')[0];
  178. if(textarea.setSelectionRange) {
  179. textarea.focus();
  180. textarea.setSelectionRange(pos, pos);
  181. }
  182. }
  183. // show an error message
  184. $('#error').html(err.toString());
  185. }
  186. }
  187. </script>
  188. </body>
  189. </html>