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.

226 lines
9.6 KiB

9 years ago
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head><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>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title>Graph3d Examples</title>
  8. <link rel="icon" HREF="favicon.ico">
  9. <!-- Bootstrap -->
  10. <link href="./css/bootstrap.css" rel="stylesheet">
  11. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  12. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  13. <!--[if lt IE 9]>
  14. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  15. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  16. <![endif]-->
  17. <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
  18. <script type="text/javascript" src="./js/prettify/prettify.js"></script>
  19. <script src="./dist/vis.js"></script>
  20. <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
  21. <link href="./css/examples.css" rel="stylesheet" type="text/css" />
  22. <style>
  23. </style>
  24. <script language="JavaScript">
  25. function loadVis() {
  26. // Create and populate a data table.
  27. var data = new vis.DataSet();
  28. // create some nice looking data with sin/cos
  29. var counter = 0;
  30. var steps = 50; // number of datapoints will be steps*steps
  31. var axisMax = 314;
  32. var axisStep = axisMax / steps;
  33. for (var x = 0; x < axisMax; x+=axisStep) {
  34. for (var y = 0; y < axisMax; y+=axisStep) {
  35. var value = (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
  36. data.add({id:counter++,x:x,y:y,z:value,style:value});
  37. }
  38. }
  39. // specify options
  40. var options = {
  41. width: '500px',
  42. height: '552px',
  43. style: 'surface',
  44. showPerspective: true,
  45. showGrid: true,
  46. showShadow: false,
  47. keepAspectRatio: true,
  48. verticalRatio: 0.5
  49. };
  50. // Instantiate our graph object.
  51. var container = document.getElementById('visualization');
  52. var graph3d = new vis.Graph3d(container, data, options);
  53. }
  54. </script>
  55. </head>
  56. <body onload="prettyPrint(); loadVis();">
  57. <div class="navbar-wrapper">
  58. <div class="container">
  59. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  60. <div class="container">
  61. <div class="navbar-header">
  62. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  63. <span class="sr-only">Toggle navigation</span>
  64. <span class="icon-bar"></span>
  65. <span class="icon-bar"></span>
  66. <span class="icon-bar"></span>
  67. </button>
  68. <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
  69. </div>
  70. <div id="navbar" class="navbar-collapse collapse">
  71. <ul class="nav navbar-nav">
  72. <li class="active"><a href="./index.html#modules">Modules</a></li>
  73. <li><a href="./blog.html">Blog</a></li>
  74. <li><a href="./index.html#download_install">Download</a></li>
  75. <li><a href="./showcase/index.html">Showcase</a></li>
  76. <li><a href="./index.html#contribute">Contribute</a></li>
  77. <li><a href="./featureRequests.html">Feature requests</a></li>
  78. <li><a href="./index.html#licenses">License</a></li>
  79. </ul>
  80. </div>
  81. </div>
  82. </nav>
  83. </div>
  84. </div>
  85. <div class="contentWrapper">
  86. <h1>Graph3d Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a> <a class="btn btn-primary" href="./docs/graph3d/" role="button">View docs »</a>
  87. <div class="textHTMLContent">This small code example shows the easiest way to get a Graph2d up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.</div>
  88. <pre class="prettyprint lang-html">
  89. &lt;div id="visualization"&gt;&lt;/div&gt;
  90. &lt;script type="text/javascript"&gt;
  91. // Create and populate a data table.
  92. var data = new vis.DataSet();
  93. // create some nice looking data with sin/cos
  94. var counter = 0;
  95. var steps = 50; // number of datapoints will be steps*steps
  96. var axisMax = 314;
  97. var axisStep = axisMax / steps;
  98. for (var x = 0; x < axisMax; x+=axisStep) {
  99. for (var y = 0; y < axisMax; y+=axisStep) {
  100. var value = (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
  101. data.add({id:counter++,x:x,y:y,z:value,style:value});
  102. }
  103. }
  104. // specify options
  105. var options = {
  106. width: '500px',
  107. height: '552px',
  108. style: 'surface',
  109. showPerspective: true,
  110. showGrid: true,
  111. showShadow: false,
  112. keepAspectRatio: true,
  113. verticalRatio: 0.5
  114. };
  115. // Instantiate our graph object.
  116. var container = document.getElementById('visualization');
  117. var graph3d = new vis.Graph3d(container, data, options);
  118. &lt;/script&gt;
  119. </pre>
  120. <div id="visualization"></div>
  121. <h2 id="allExamples">All examples</h2>
  122. <div class="container-fluid">
  123. <div class="col-lg-2 col-md-3 col-sm-6">
  124. <a href="examples/graph3d/01_basics.html">
  125. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/1.png">
  126. <div class="exampleTitle">basis</div>
  127. </a>
  128. </div>
  129. <div class="col-lg-2 col-md-3 col-sm-6">
  130. <a href="examples/graph3d/02_camera.html">
  131. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/2.png">
  132. <div class="exampleTitle">camera</div>
  133. </a>
  134. </div>
  135. <div class="col-lg-2 col-md-3 col-sm-6">
  136. <a href="examples/graph3d/03_filter_data.html">
  137. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/3.png">
  138. <div class="exampleTitle">filter</div>
  139. </a>
  140. </div>
  141. <div class="col-lg-2 col-md-3 col-sm-6">
  142. <a href="examples/graph3d/04_animation.html">
  143. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/4.png">
  144. <div class="exampleTitle">animate</div>
  145. </a>
  146. </div>
  147. <div class="col-lg-2 col-md-3 col-sm-6">
  148. <a href="examples/graph3d/05_line.html">
  149. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/5.png">
  150. <div class="exampleTitle">line</div>
  151. </a>
  152. </div>
  153. <div class="col-lg-2 col-md-3 col-sm-6">
  154. <a href="examples/graph3d/06_moving_dots.html">
  155. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/6.png">
  156. <div class="exampleTitle">moving dots</div>
  157. </a>
  158. </div>
  159. <div class="col-lg-2 col-md-3 col-sm-6">
  160. <a href="examples/graph3d/07_dot_cloud_colors.html">
  161. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/7.png">
  162. <div class="exampleTitle">dot cloud colors</div>
  163. </a>
  164. </div>
  165. <div class="col-lg-2 col-md-3 col-sm-6">
  166. <a href="examples/graph3d/08_dot_cloud_size.html">
  167. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/8.png">
  168. <div class="exampleTitle">dot cloud size</div>
  169. </a>
  170. </div>
  171. <div class="col-lg-2 col-md-3 col-sm-6">
  172. <a href="examples/graph3d/09_mobile.html">
  173. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/9.png">
  174. <div class="exampleTitle">mobile</div>
  175. </a>
  176. </div>
  177. <div class="col-lg-2 col-md-3 col-sm-6">
  178. <a href="examples/graph3d/10_styling.html">
  179. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/10.png">
  180. <div class="exampleTitle">styles</div>
  181. </a>
  182. </div>
  183. <div class="col-lg-2 col-md-3 col-sm-6">
  184. <a href="examples/graph3d/11_tooltips.html">
  185. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/11.png">
  186. <div class="exampleTitle">tooltips</div>
  187. </a>
  188. </div>
  189. <div class="col-lg-2 col-md-3 col-sm-6">
  190. <a href="examples/graph3d/12_custom_labels.html">
  191. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/12.png">
  192. <div class="exampleTitle">custom labels</div>
  193. </a>
  194. </div>
  195. <div class="col-lg-2 col-md-3 col-sm-6">
  196. <a href="examples/graph3d/playground/index.html">
  197. <img class="example img-responsive" src="./images/exampleScreenshots/graph3d/playground.png">
  198. <div class="exampleTitle">playground</div>
  199. </a>
  200. </div>
  201. </div>
  202. <br />
  203. <br />
  204. <br />
  205. <br />
  206. </div>
  207. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  208. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  209. <!-- Include all compiled plugins (below), or include individual files as needed -->
  210. <script src="js/bootstrap.min.js"></script>
  211. </body>
  212. </html>