|
@ -1,366 +0,0 @@ |
|
|
<!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 the <a href="http://chap.almende.com/" target="_blank">CHAP</a>. |
|
|
|
|
|
</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.4.0</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> |
|
|
|
|
|
|
|
|
|
|
|
<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>random 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 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>autmatic hierarchy</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>user-defined hierarchy</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> |
|
|
|