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.

342 lines
18 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. <!DOCTYPE html>
  2. <html lang="en"><head>
  3. <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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <meta name="description" content="">
  9. <meta name="author" content="">
  10. <link rel="icon" HREF="favicon.ico">
  11. <title>vis.js - A dynamic, browser based visualization library.</title>
  12. <!-- Bootstrap core CSS -->
  13. <link href="./css/bootstrap.css" rel="stylesheet">
  14. <!-- Webpage styling -->
  15. <link href="./css/style.css" rel="stylesheet">
  16. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  17. <!--[if lt IE 9]>
  18. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  19. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20. <![endif]-->
  21. <script src="./js/smooth-scroll.min.js"></script>
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.js"></script>
  23. <script language="JavaScript">
  24. smoothScroll.init();
  25. function evalLinks() {
  26. if (typeof vis === 'undefined') {
  27. console.log(document.getElementById("linkStatus"));
  28. document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.11.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
  29. document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
  30. document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
  31. }
  32. }
  33. </script>
  34. <style>
  35. a.kickstarter {
  36. color: #fff3ca;
  37. }
  38. p.kickstarter {
  39. color:#ffffff;
  40. }
  41. </style>
  42. </head>
  43. <!-- NAVBAR
  44. ================================================== -->
  45. <body onload="evalLinks()">
  46. <div class="navbar-wrapper">
  47. <div class="container">
  48. <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  49. <div class="container">
  50. <div class="navbar-header">
  51. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  52. <span class="sr-only">Toggle navigation</span>
  53. <span class="icon-bar"></span>
  54. <span class="icon-bar"></span>
  55. <span class="icon-bar"></span>
  56. </button>
  57. <a class="navbar-brand hidden-sm" href="#">vis.js</a>
  58. </div>
  59. <div id="navbar" class="navbar-collapse collapse">
  60. <ul class="nav navbar-nav">
  61. <li class="active"><a href="#modules">Modules</a></li>
  62. <li><a href="./blog.html">Blog</a></li>
  63. <li><a data-scroll href="#download_install">Download</a></li>
  64. <li><a href="./showcase/index.html">Showcase</a></li>
  65. <li><a data-scroll href="#contribute">Contribute</a></li>
  66. <li><a href="./featureRequests.html">Feature requests</a></li>
  67. <li><a data-scroll href="#licenses">License</a></li>
  68. </ul>
  69. </div>
  70. </div>
  71. </nav>
  72. </div>
  73. </div>
  74. <a href="https://github.com/almende/vis" class="hidden-xs hidden-sm hidden-md"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
  75. <!-- Carousel
  76. ================================================== -->
  77. <div class="jumbotron wall hidden-xs">
  78. <div class="jumbotron trans">
  79. <div class="container jumbo">
  80. <h1>vis.js</h1>
  81. <!--<p class="kickstarter">Our colleagues at <a href="https://dobots.nl/" class="kickstarter">DoBots</a> are currently doing a kickstarter for <br>-->
  82. <!--the <a class="kickstarter" href="https://www.kickstarter.com/projects/dobots/crownstone"> Crownstone: the smart power outlet that recognizes you and your devices!</a>-->
  83. <!--We have helped them with their campaign preperations and code. Please take a look and support them! <br>-->
  84. <!--<a href="./blog.html" class="kickstarter">More information on why this is on vis.js here</a>-->
  85. <!--</p>-->
  86. <p>A dynamic, browser based visualization library.
  87. The library is designed to be easy to use, to handle large amounts
  88. of dynamic data, and to enable manipulation of and interaction with the data.
  89. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. <a href="#download_install" class="header">Get it over here!</a></p>
  90. </div>
  91. </div>
  92. <!--<div class="container">-->
  93. <!--<div class="carousel-caption">-->
  94. <!--<h1>vis.js</h1>-->
  95. <!--</div>-->
  96. <!--</div>-->
  97. </div>
  98. <img src="./images/wall_small.png" class="header img-responsive visible-xs">
  99. <div class="container visible-xs">
  100. <p>A dynamic, browser based visualization library.
  101. The library is designed to be easy to use, to handle large amounts
  102. of dynamic data, and to enable manipulation of and interaction with the data.
  103. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d. <a href="#download_install" class="header">Get it over here!</a></p>
  104. <br /><hr class="featurette-divider"><br />
  105. </div>
  106. <!-- Marketing messaging and featurettes
  107. ================================================== -->
  108. <!-- Wrap the rest of the page in another container to center all the content. -->
  109. <div class="container marketing" id="modules">
  110. <!-- Three columns of text below the carousel -->
  111. <div class="row">
  112. <div class="col-md-4">
  113. <div class="vis-component">
  114. <a href="./network_examples.html"><img class="img-thumbnail" src="./images/network.png"alt="network examples" style="width: 240px; height: 140px;"></a>
  115. <h2>Network</h2>
  116. <p>Display dynamic, automatically organised, customizable network views.</p>
  117. <p><a class="btn btn-default" href="./network_examples.html" role="button">View examples &raquo;</a></p>
  118. <p><a class="btn btn-primary" href="./docs/network" role="button">View docs &raquo;</a></p>
  119. </div>
  120. </div><!-- /.col-lg-4 -->
  121. <hr class="featurette-divider visible-xs">
  122. <div class="col-md-4">
  123. <div class="vis-component">
  124. <a href="./timeline_examples.html"><img class="img-thumbnail" src="./images/timeline.png" alt="timeline examples" style="width: 240px; height: 140px;"></a>
  125. <h2>Timeline</h2>
  126. <p>Create a fully customizable, interactive timeline with items and ranges.</p>
  127. <p><a class="btn btn-default" href="./timeline_examples.html" role="button">View examples &raquo;</a></p>
  128. <p><a class="btn btn-primary" href="./docs/timeline" role="button">View docs &raquo;</a></p>
  129. </div>
  130. </div><!-- /.col-lg-4 -->
  131. <hr class="featurette-divider visible-xs">
  132. <div class="col-md-4">
  133. <div class="vis-component">
  134. <a href="./graph2d_examples.html"><img class="img-thumbnail" src="./images/graph2d.png" alt="graph2d examples" style="width: 240px; height: 140px;"></a>
  135. <h2>Graph2d</h2>
  136. <p>Draw graphs and bar charts on an interactive timeline and personalize it the way you want.</p>
  137. <p><a class="btn btn-default" href="./graph2d_examples.html" role="button">View examples &raquo;</a></p>
  138. <p><a class="btn btn-primary" href="./docs/graph2d" role="button">View docs &raquo;</a></p>
  139. </div>
  140. </div><!-- /.col-lg-4 -->
  141. </div><!-- /.row -->
  142. <!-- Three columns of text below the carousel -->
  143. <div class="row">
  144. <div class="col-md-4">
  145. <div class="vis-component">
  146. <a href="./graph3d_examples.html"><img class="img-thumbnail" src="./images/graph3d.png" alt="graph3d examples" style="width: 240px; height: 140px;"></a>
  147. <h2>Graph3d</h2>
  148. <p>Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.</p>
  149. <p><a class="btn btn-default" href="./graph3d_examples.html" role="button">View examples &raquo;</a></p>
  150. <p><a class="btn btn-primary" href="./docs/graph3d" role="button">View docs &raquo;</a></p>
  151. </div>
  152. </div><!-- /.col-lg-4 -->
  153. <hr class="featurette-divider visible-xs">
  154. <div class="col-md-4">
  155. <div class="vis-component">
  156. <a href="./docs/data"><img class="img-thumbnail" src="./images/dataset.png" alt="DataSet docs" style="width: 240px;"></a>
  157. <h2>DataSet</h2>
  158. <p>Manage unstructured data using DataSet. Add, update, and remove data, and listen for changes in the data.</p>
  159. <p><a class="btn btn-primary" href="./docs/data" role="button">View docs &raquo;</a></p>
  160. </div>
  161. </div><!-- /.col-lg-4 -->
  162. </div><!-- /.row -->
  163. <!-- START THE FEATURETTES -->
  164. <br /><hr class="featurette-divider"><br />
  165. <div class="row featurette" id="download_install">
  166. <div class="col-md-5">
  167. <img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/gettingstartedSlide.png" data-holder-rendered="true">
  168. </div>
  169. <div class="col-md-7">
  170. <div class="valign_parent">
  171. <div class="valign_child">
  172. <h2 class="featurette-heading">Download; <span class="text-muted">getting started</span></h2>
  173. <p class="text-justify">
  174. The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>.
  175. Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).
  176. This site contains documentation, downloads and live examples of vis.js. The <a href="https://github.com/almende/vis/issues">sourcecode of vis.js</a> is available at Github. For questions, issues, and suggestions please use the <a href="https://github.com/almende/vis/issues">issues section</a> of the Github project.
  177. </p>
  178. <h3>install with npm (recommended)</h3>
  179. <pre class="prettyprint">npm install vis</pre>
  180. <h3>install with bower</h3>
  181. <pre class="prettyprint">bower install vis</pre>
  182. <h3>link from cdnjs.com</h3>
  183. <p>
  184. <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.js" target="_blank">vis.min.js</a> <br>
  185. <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.css" target="_blank">vis.min.css</a> <br>
  186. <span id="linkStatus"></span>
  187. </p>
  188. <h3>download</h3>
  189. <p>
  190. <a href="download/vis.zip">vis.zip (version <span class="version">4.11.0</span>)</a>
  191. </p>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <br /><hr class="featurette-divider"><br />
  197. <div class="row featurette" id="showcase">
  198. <div class="col-md-7">
  199. <div class="valign_parent">
  200. <div class="valign_child">
  201. <h2 class="featurette-heading">Showcase; <span class="text-muted">see vis in action!</span></h2>
  202. <p class="lead"><a href="./showcase/index.html">
  203. In this section you can see cool projects that vis was used in.</a> If you have made something and would like it featured,
  204. please make an <a href="https://github.com/almende/vis/issues" target="_blank">issue on github</a> with your project and how you'd like to be credited.</p>
  205. </div>
  206. </div>
  207. </div>
  208. <div class="col-md-5">
  209. <a href="./showcase/index.html"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/showcase.png" data-holder-rendered="true"></a>
  210. </div>
  211. </div>
  212. <br /><hr class="featurette-divider"><br />
  213. <div class="row featurette" id="contribute">
  214. <div class="col-md-5">
  215. <a href="https://github.com/almende/vis/" target="_blank"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/octocat.png" data-holder-rendered="true"></a>
  216. </div>
  217. <div class="col-md-7">
  218. <div class="valign_parent">
  219. <div class="valign_child">
  220. <h2 class="featurette-heading">Contribute; <span class="text-muted">join the project</span></h2>
  221. <p class="lead">Since vis.js is an open source project, everybody can contribute to it. If you want to contribute, great! Here's how:</p>
  222. <p class="text-justify">
  223. First, fork vis on Github, then add your feature, fix a bug,
  224. rephrase our writing etc. and do a <a href="https://help.github.com/articles/using-pull-requests/">pull request</a> to the develop branch on Github!
  225. Pull requests to the master branch will not be merged.
  226. <br /><br />
  227. If you fork the codebase, you'll find all modules in seperate files. This makes it a lot easier to work on than the distributed and combined vis.js file.
  228. <br /><br />
  229. If you want to contribute but don't know how, feel free to pick up <a href="./featureRequests.html">a feature request described below</a>!
  230. These come from ourselves as well as from Github issues. If you do, <a href="https://github.com/almende/vis/issues" target="_blank">please post an issue on Github letting us know</a>, so we can mark the feature
  231. under development as well as help out when needed. If we are about to implement something from <a href="./featureRequests.html">the list</a>, we'll remove it before starting.
  232. </p>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. <br /><hr class="featurette-divider"><br />
  238. <div class="row featurette" id="featureRequests">
  239. <div class="col-md-7">
  240. <div class="valign_parent">
  241. <div class="valign_child">
  242. <h2 class="featurette-heading">Feature requests</h2>
  243. <p class="lead">We get a lot of feature requests on Github. <a href="./featureRequests.html">Here's a list of them!</a></p>
  244. <p class="text-justify">
  245. The requests that come in on Github usually have a good argumentation and a lot of these ideas have made it into vis! To keep a nice overview of them, to clean up
  246. our Github issues and to supply a pool of ideas for people to contribute, we have made <a href="./featureRequests.html">this list.</a>
  247. <br /><br />
  248. This is by no means an end-of-the-line for your feature, but just something that we cannot pick up right away or cannot use in our projects at this time.
  249. We'd like to invite people who want to contribute to pick up one (or more!) of these features. <a href="./featureRequests.html">View the list here.</a>
  250. </p>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="col-md-5">
  255. <a href="./featureRequests.html"><img class="featurette-image img-responsive hidden-xs hidden-sm " data-src="holder.js/500x500/auto" alt="500x500" src="./images/feature_requests.png" data-holder-rendered="true"></a>
  256. </div>
  257. </div>
  258. <br /><hr class="featurette-divider"><br />
  259. <div class="row featurette" id="licenses">
  260. <div class="col-md-5">
  261. <img class="featurette-image img-responsive hidden-xs hidden-sm" data-src="holder.js/500x500/auto" alt="500x500" src="./images/license.png" data-holder-rendered="true">
  262. </div>
  263. <div class="col-md-7">
  264. <div class="valign_parent">
  265. <div class="valign_child">
  266. <h2 class="featurette-heading">Licenses</h2>
  267. <p class="lead">
  268. Copyright (C) 2010-2015 Almende B.V. <br /><br />
  269. Vis.js is dual licensed under both Apache 2.0 and MIT.<br /><br />
  270. Vis.js may be distributed under either license.
  271. <ul>
  272. <li>http://www.apache.org/licenses/LICENSE-2.0</li>
  273. <li>-The MIT License http://opensource.org/licenses/MIT</li>
  274. </ul>
  275. </p>
  276. </div>
  277. </div>
  278. </div>
  279. </div>
  280. <hr class="featurette-divider">
  281. <!-- /END THE FEATURETTES -->
  282. <!-- FOOTER -->
  283. <footer>
  284. <p class="pull-right"><a href="#">Back to top</a></p>
  285. <p>© 2015 Almende B.V.</p>
  286. </footer>
  287. </div><!-- /.container -->
  288. <!-- Bootstrap core JavaScript
  289. ================================================== -->
  290. <!-- Placed at the end of the document so the pages load faster -->
  291. <script src="./js/jquery.min.js"></script>
  292. <script src="./js/bootstrap.min.js"></script>
  293. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  294. <script src="./js/ie10-viewport-bug-workaround.js"></script>