|
|
- <!doctype html>
- <html>
-
- <head>
- <title>vis.js | a dynamic, browser-based visualization library</title>
-
- <meta charset='utf-8' />
- <meta name="title" content="vis.js">
- <meta name="description" content="vis.js is a dynamic, browser-based visualization library" />
- <meta name="keywords" content="vis, visualization, javascript, browser based, web based, chart, linechart, timeline, graph, network, browser" />
- <meta name="author" content="Almende B.V.">
-
- <link href="docs/css/prettify.css" type="text/css" rel="stylesheet" />
- <link href='docs/css/style.css' type='text/css' rel='stylesheet'>
- <link href="css/style.css" type="text/css" rel="stylesheet" >
-
- <script type="text/javascript" src="docs/lib/prettify/prettify.js"></script>
- </head>
-
- <body onload="prettyPrint();">
- <div id="container">
-
- <div id="menu">
- <a href="http://visjs.org/"><img src="img/logo/vis128.png" alt="logo"></a>
-
- <div class="nav">
- <ul>
- <li><a href="#install">Install</a></li>
- <li><a href="#example">Example</a></li>
- <li><a href="#gallery">Gallery</a></li>
- <li>
- <a href="docs/index.html" target="_blank">
- Docs
- <img src="img/external-link-icons/external-link-icon.png" style="vertical-align: text-top;" title="Docs will open in a new window">
- </a>
- </li>
- <li><a href="#license">License</a></li>
- </ul>
- </div>
- </div>
-
- <h1>
- vis.js<br>
- <span class="subtitle">a visual interaction system</span>
- </h1>
-
- <p>
- Vis.js is a dynamic, browser based visualization library.
- The library is designed to be easy to use, to handle large amounts
- of dynamic data, and to enable manipulation of and interaction with the data.
- The library consists of the components DataSet, Timeline, and Graph.
- </p>
- <p>
- The vis.js library is developed by <a href="http://almende.com" target="_blank">Almende B.V</a>,
- as part of <a href="http://chap.almende.com/" target="_blank">CHAP</a>.
- Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support).
- </p>
-
-
- <h2 id="install">Install</h2>
-
- <h3>npm</h3>
-
- <pre class="prettyprint">
- npm install vis
- </pre>
-
- <h3>bower</h3>
-
- <pre class="prettyprint">
- bower install vis
- </pre>
-
- <h3>download</h3>
-
- <a href="download/vis.zip">Click here to download vis.js</a>
- (version <span class="version">0.7.3</span>)
-
-
- <h2 id="example">Example</h2>
-
- <p>
- A basic example demonstrating how to use the vis.js timeline is shown below.
- See the <a href="#gallery">gallery</a> below for more examples.
- </p>
-
- <pre class="prettyprint lang-html"><!doctype html>
- <html>
- <head>
- <title>Timeline | Basic demo</title>
- <script src="http://visjs.org/dist/vis.js"></script>
- <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
-
- <style type="text/css">
- body, html {
- font-family: sans-serif;
- }
- </style>
- </head>
- <body>
- <div id="mytimeline"></div>
-
- <script type="text/javascript">
- var container = document.getElementById('mytimeline');
- var data = [
- {id: 1, content: 'item 1', start: '2013-04-20'},
- {id: 2, content: 'item 2', start: '2013-04-14'},
- {id: 3, content: 'item 3', start: '2013-04-18'},
- {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
- {id: 5, content: 'item 5', start: '2013-04-25'},
- {id: 6, content: 'item 6', start: '2013-04-27'}
- ];
- var options = {};
- var timeline = new vis.Timeline(container, data, options);
- </script>
- </body>
- </html>
- </pre>
-
-
- <h2 id="gallery">Gallery</h2>
- This gallery gives an idea of the features and possibilities of the library.
- The source code of the examples can be found in the
- <a href="https://github.com/almende/vis/tree/master/examples" target="_blank">examples directory</a>.
-
- <h3 id="timeline">Timeline</h3>
- <p>
- The timeline from vis.js displays different types of data on a timeline.
- </p>
- <div class="gallery">
- <div class="thumb">
- <a href="examples/timeline/01_basic.html">
- <img src="img/gallery/timeline/01_basic.png">
- <div>basic usage</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/02_dataset.html">
- <img src="img/gallery/timeline/02_dataset.png">
- <div>dataset</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/03_much_data.html">
- <img src="img/gallery/timeline/03_much_data.png">
- <div>much data</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/04_html_data.html">
- <img src="img/gallery/timeline/04_html_data.png">
- <div>html data</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/05_groups.html">
- <img src="img/gallery/timeline/05_groups.png">
- <div>groups</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/06_event_listeners.html">
- <img src="img/gallery/timeline/06_event_listeners.png">
- <div>event listeners</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/07_custom_time_bar.html">
- <img src="img/gallery/timeline/07_custom_time_bar.png">
- <div>custom time bar</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/timeline/08_edit_items.html">
- <img src="img/gallery/timeline/08_edit_items.png">
- <div>edit items</div>
- </a>
- </div>
- </div>
-
- <h3 id="graph">Graph</h3>
- <p>
- The graph from vis.js visualizes graphs and networks with
- customizable styles.
- </p>
-
- <div class="gallery">
- <div class="thumb">
- <a href="examples/graph/01_basic_usage.html">
- <img src="img/gallery/graph/01_basic_usage.png">
- <div>basic usage</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/02_random_nodes.html">
- <img src="img/gallery/graph/02_random_nodes.png">
- <div>random nodes</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/03_images.html">
- <img src="img/gallery/graph/03_images.png">
- <div>images</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/04_shapes.html">
- <img src="img/gallery/graph/04_shapes.png">
- <div>shapes</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/05_social_network.html">
- <img src="img/gallery/graph/05_social_network.png">
- <div>social network</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/06_groups.html">
- <img src="img/gallery/graph/06_groups.png">
- <div>groups</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/07_selections.html">
- <img src="img/gallery/graph/07_selections.png">
- <div>selections</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/08_mobile_friendly.html">
- <img src="img/gallery/graph/08_mobile_friendly.png">
- <div>mobile friendly</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/09_sizing.html">
- <img src="img/gallery/graph/09_sizing.png">
- <div>sizing</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/10_multiline_text.html">
- <img src="img/gallery/graph/10_multiline_text.png">
- <div>multiline text</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/11_custom_style.html">
- <img src="img/gallery/graph/11_custom_style.png">
- <div>custom style</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/12_scalable_images.html">
- <img src="img/gallery/graph/12_scalable_images.png">
- <div>scalable images</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/13_dashed_lines.html">
- <img src="img/gallery/graph/13_dashed_lines.png">
- <div>dashed lines</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/14_dot_language.html">
- <img src="img/gallery/graph/14_dot_language.png">
- <div>dot language</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/15_dot_language_playground.html">
- <img src="img/gallery/graph/15_dot_language_playground.png">
- <div>playground</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/16_dynamic_data.html">
- <img src="img/gallery/graph/16_dynamic_data.png">
- <div>dynamic data</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/17_network_info.html">
- <img src="img/gallery/graph/17_network_info.png">
- <div>network info</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/18_fully_random_nodes_clustering.html">
- <img src="img/gallery/graph/18_fully_random_nodes_clustering.png">
- <div>fully random nodes clustering</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/19_scale_free_graph_clustering.html">
- <img src="img/gallery/graph/19_scale_free_graph_clustering.png">
- <div>scale free graph clustering</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/20_navigation.html">
- <img src="img/gallery/graph/20_navigation.png">
- <div>navigation</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/21_data_manipulation.html">
- <img src="img/gallery/graph/21_data_manipulation.png">
- <div>data manipulation</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/22_les_miserables.html">
- <img src="img/gallery/graph/22_les_miserables.png">
- <div>les miserables</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/23_hierarchical_layout.html">
- <img src="img/gallery/graph/23_hierarchical_layout.png">
- <div>hierarchical layout</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/24_hierarchical_layout_userdefined.html">
- <img src="img/gallery/graph/24_hierarchical_layout_predefined.png">
- <div>hierarchical layout predefined</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/25_physics_configuration.html">
- <img src="img/gallery/graph/25_physics_configuration.png">
- <div>physics configuration</div>
- </a>
- </div>
- <div class="thumb">
- <a href="examples/graph/graphviz/graphviz_gallery.html">
- <img src="img/gallery/graph/graphviz_gallery.png">
- <div>graphviz gallery</div>
- </a>
- </div>
- </div>
-
- <h2 id="docs">Docs</h2>
-
- <p>
- Documentation is available here:
- <a href="docs/index.html" target="_blank">Documentation</a>
- </p>
-
-
- <h2 id="license">License</h2>
-
- <p>
- Copyright (C) 2010-2014 Almende B.V.
- </p>
-
- <p>
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- </p>
-
- <p>
- http://www.apache.org/licenses/LICENSE-2.0
- </p>
-
- <p>
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
- </p>
-
- <a id="forkme" href="https://github.com/almende/vis/" target="_blank">
- <img src="img/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" >
- </a>
-
- </div>
- </body>
- </html>
|