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.
752 lines
22 KiB
752 lines
22 KiB
<!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, Network, Graph2d, and Graph3d.
|
|
</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>
|
|
<p>
|
|
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.
|
|
</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">3.6.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>
|
|
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
|
|
<script src="http://visjs.org/dist/vis.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="mytimeline"></div>
|
|
|
|
<script type="text/javascript">
|
|
// DOM element where the Timeline will be attached
|
|
var container = document.getElementById('mytimeline');
|
|
|
|
// Create a DataSet with data (enables two way data binding)
|
|
var data = new vis.DataSet([
|
|
{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'}
|
|
]);
|
|
|
|
// Configuration for the Timeline
|
|
var options = {};
|
|
|
|
// Create a Timeline
|
|
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_interactive.html">
|
|
<img src="img/gallery/timeline/02_interactive.png">
|
|
<div>interactive</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/03_performance.html">
|
|
<img src="img/gallery/timeline/03_performance.png">
|
|
<div>performance</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 class="thumb">
|
|
<a href="examples/timeline/09_order_groups.html">
|
|
<img src="img/gallery/timeline/09_order_groups.png">
|
|
<div>order groups</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/10_limit_move_and_zoom.html">
|
|
<img src="img/gallery/timeline/10_limit_move_and_zoom.png">
|
|
<div>limit move and zoom</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/11_points.html">
|
|
<img src="img/gallery/timeline/11_points.png">
|
|
<div>points</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/12_custom_styling.html">
|
|
<img src="img/gallery/timeline/12_custom_styling.png">
|
|
<div>custom styling</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/13_past_and_future.html">
|
|
<img src="img/gallery/timeline/13_past_and_future.png">
|
|
<div>past and future</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/14_group_performance.html">
|
|
<img src="img/gallery/timeline/14_group_performance.png">
|
|
<div>group performance</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/15_item_class_names.html">
|
|
<img src="img/gallery/timeline/15_item_class_names.png">
|
|
<div>item class names</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/16_navigation_menu.html">
|
|
<img src="img/gallery/timeline/16_navigation_menu.png">
|
|
<div>navigation menu</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/17_data_serialization.html">
|
|
<img src="img/gallery/timeline/17_data_serialization.png">
|
|
<div>data serialization</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/18_range_overflow.html">
|
|
<img src="img/gallery/timeline/18_range_overflow.png">
|
|
<div>range overflow</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/19_localization.html">
|
|
<img src="img/gallery/timeline/19_localization.png">
|
|
<div>localization</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/20_click_to_use.html">
|
|
<img src="img/gallery/timeline/20_click_to_use.png">
|
|
<div>click to use</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/21_set_selection.html">
|
|
<img src="img/gallery/timeline/21_set_selection.png">
|
|
<div>set selection</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/22_window_adjustment.html">
|
|
<img src="img/gallery/timeline/22_window_adjustment.png">
|
|
<div>window adjustment</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/23_data_attributes.html">
|
|
<img src="img/gallery/timeline/23_data_attributes.png">
|
|
<div>data attributes</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/24_all_data_attributes.html">
|
|
<img src="img/gallery/timeline/24_all_data_attributes.png">
|
|
<div>all data attributes</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/25_background_areas.html">
|
|
<img src="img/gallery/timeline/25_background_areas.png">
|
|
<div>background areas</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/26_external_data.html">
|
|
<img src="img/gallery/timeline/26_external_data.png">
|
|
<div>external data</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/27_templates.html">
|
|
<img src="img/gallery/timeline/27_templates.png">
|
|
<div>templates</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/29_hiding_times.html">
|
|
<img src="img/gallery/timeline/29_hiding_times.png">
|
|
<div>hiding times</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/30_subgroups.html">
|
|
<img src="img/gallery/timeline/30_subgroups.png">
|
|
<div>subgroups</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/timeline/31_background_areas_with_groups.html">
|
|
<img src="img/gallery/timeline/31_background_areas_with_groups.png">
|
|
<div>31 background areas with groups</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 id="network">Network</h3>
|
|
<p>
|
|
The Network visualization visualizes graphs and networks with
|
|
customizable styles.
|
|
</p>
|
|
|
|
<div class="gallery">
|
|
<div class="thumb">
|
|
<a href="examples/network/01_basic_usage.html">
|
|
<img src="img/gallery/network/01_basic_usage.png">
|
|
<div>basic usage</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/02_random_nodes.html">
|
|
<img src="img/gallery/network/02_random_nodes.png">
|
|
<div>random nodes</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/03_images.html">
|
|
<img src="img/gallery/network/03_images.png">
|
|
<div>images</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/04_shapes.html">
|
|
<img src="img/gallery/network/04_shapes.png">
|
|
<div>shapes</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/05_social_network.html">
|
|
<img src="img/gallery/network/05_social_network.png">
|
|
<div>social network</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/06_groups.html">
|
|
<img src="img/gallery/network/06_groups.png">
|
|
<div>groups</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/07_selections.html">
|
|
<img src="img/gallery/network/07_selections.png">
|
|
<div>selections</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/08_mobile_friendly.html">
|
|
<img src="img/gallery/network/08_mobile_friendly.png">
|
|
<div>mobile friendly</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/09_sizing.html">
|
|
<img src="img/gallery/network/09_sizing.png">
|
|
<div>sizing</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/10_multiline_text.html">
|
|
<img src="img/gallery/network/10_multiline_text.png">
|
|
<div>multiline text</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/11_custom_style.html">
|
|
<img src="img/gallery/network/11_custom_style.png">
|
|
<div>custom style</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/12_scalable_images.html">
|
|
<img src="img/gallery/network/12_scalable_images.png">
|
|
<div>scalable images</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/13_dashed_lines.html">
|
|
<img src="img/gallery/network/13_dashed_lines.png">
|
|
<div>dashed lines</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/14_dot_language.html">
|
|
<img src="img/gallery/network/14_dot_language.png">
|
|
<div>dot language</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/15_dot_language_playground.html">
|
|
<img src="img/gallery/network/15_dot_language_playground.png">
|
|
<div>playground</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/16_dynamic_data.html">
|
|
<img src="img/gallery/network/16_dynamic_data.png">
|
|
<div>dynamic data</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/17_network_info.html">
|
|
<img src="img/gallery/network/17_network_info.png">
|
|
<div>network info</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/18_fully_random_nodes_clustering.html">
|
|
<img src="img/gallery/network/18_fully_random_nodes_clustering.png">
|
|
<div>fully random nodes clustering</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/19_scale_free_graph_clustering.html">
|
|
<img src="img/gallery/network/19_scale_free_graph_clustering.png">
|
|
<div>scale free graph clustering</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/20_navigation.html">
|
|
<img src="img/gallery/network/20_navigation.png">
|
|
<div>navigation</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/21_data_manipulation.html">
|
|
<img src="img/gallery/network/21_data_manipulation.png">
|
|
<div>data manipulation</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/22_les_miserables.html">
|
|
<img src="img/gallery/network/22_les_miserables.png">
|
|
<div>les miserables</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/23_hierarchical_layout.html">
|
|
<img src="img/gallery/network/23_hierarchical_layout.png">
|
|
<div>hierarchical layout</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/24_hierarchical_layout_userdefined.html">
|
|
<img src="img/gallery/network/24_hierarchical_layout_userdefined.png">
|
|
<div>hierarchical layout userdefined</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/25_physics_configuration.html">
|
|
<img src="img/gallery/network/25_physics_configuration.png">
|
|
<div>physics configuration</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/26_staticSmoothCurves.html">
|
|
<img src="img/gallery/network/26_staticSmoothCurves.png">
|
|
<div>static smooth curves</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/27_world_cup_network.html">
|
|
<img src="img/gallery/network/27_world_cup_network.png">
|
|
<div>world cup network</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/28_world_cup_network_performance.html">
|
|
<img src="img/gallery/network/28_world_cup_network_performance.png">
|
|
<div>world cup network performance</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/29_neighbourhood_highlight.html">
|
|
<img src="img/gallery/network/29_neighbourhood_highlight.png">
|
|
<div>neighborhood highlight</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/30_importing_from_gephi.html">
|
|
<img src="img/gallery/network/30_importing_from_gephi.png">
|
|
<div>importing from gephi</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/31_localization.html">
|
|
<img src="img/gallery/network/31_localization.png">
|
|
<div>localization</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/32_hierarchicaLayoutMethods.html">
|
|
<img src="img/gallery/network/32_hierarchicalLayoutMethods.png">
|
|
<div>hierarchical layout methods</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/33_animation.html">
|
|
<img src="img/gallery/network/33_animation.png">
|
|
<div>animation</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/network/graphviz/graphviz_gallery.html">
|
|
<img src="img/gallery/network/graphviz_gallery.png">
|
|
<div>graphviz gallery</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3 id="graph2d">Graph2d</h3>
|
|
<p>
|
|
The Graph2d visualizes bars and lines in time.
|
|
</p>
|
|
|
|
<div class="gallery">
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/01_basic.html">
|
|
<img src="img/gallery/graph2d/01_basic.png">
|
|
<div>basic</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/02_bars.html">
|
|
<img src="img/gallery/graph2d/02_bars.png">
|
|
<div>bars</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/03_groups.html">
|
|
<img src="img/gallery/graph2d/03_groups.png">
|
|
<div>groups</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/04_rightAxis.html">
|
|
<img src="img/gallery/graph2d/04_rightAxis.png">
|
|
<div>right axis</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/05_bothAxis.html">
|
|
<img src="img/gallery/graph2d/05_bothAxis.png">
|
|
<div>both axis</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/06_interpolation.html">
|
|
<img src="img/gallery/graph2d/06_interpolation.png">
|
|
<div>interpolation</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/07_scrollingAndSorting.html">
|
|
<img src="img/gallery/graph2d/07_scrollingAndSorting.png">
|
|
<div>scrolling and sorting</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/08_performance.html">
|
|
<img src="img/gallery/graph2d/08_performance.png">
|
|
<div>performance</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/09_external_legend.html">
|
|
<img src="img/gallery/graph2d/09_external_legend.png">
|
|
<div>external legend</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/10_barsSideBySide.html">
|
|
<img src="img/gallery/graph2d/10_barsSideBySide.png">
|
|
<div>bars side by side</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/11_barsSideBySideGroups.html">
|
|
<img src="img/gallery/graph2d/11_barsSideBySideGroups.png">
|
|
<div>bars side by side groups</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/12_customRange.html">
|
|
<img src="img/gallery/graph2d/12_customRange.html.png">
|
|
<div>custom range</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/13_localization.html">
|
|
<img src="img/gallery/graph2d/13_localization.png">
|
|
<div>localization</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/14_toggleGroups.html">
|
|
<img src="img/gallery/graph2d/14_toggleGroups.png">
|
|
<div>toggle groups</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph2d/15_streaming_data.html">
|
|
<img src="img/gallery/graph2d/15_streaming_data.png">
|
|
<div>streaming data</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3 id="graph3d">Graph3d</h3>
|
|
<p>
|
|
The Graph3d from vis.js visualizes three and four dimensional data.
|
|
</p>
|
|
|
|
<div class="gallery">
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example01_basis.html">
|
|
<img src="img/gallery/graph3d/example01_basis.png">
|
|
<div>basis</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example02_camera.html">
|
|
<img src="img/gallery/graph3d/example02_camera.png">
|
|
<div>camera</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example03_filter.html">
|
|
<img src="img/gallery/graph3d/example03_filter.png">
|
|
<div>filter</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example04_animate.html">
|
|
<img src="img/gallery/graph3d/example04_animate.png">
|
|
<div>animate</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example05_line.html">
|
|
<img src="img/gallery/graph3d/example05_line.png">
|
|
<div>line</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example06_moving_dots.html">
|
|
<img src="img/gallery/graph3d/example06_moving_dots.png">
|
|
<div>moving dots</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example07_dot_cloud_colors.html">
|
|
<img src="img/gallery/graph3d/example07_dot_cloud_colors.png">
|
|
<div>dot cloud colors</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example08_dot_cloud_size.html">
|
|
<img src="img/gallery/graph3d/example08_dot_cloud_size.png">
|
|
<div>dot cloud size</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example09_mobile.html">
|
|
<img src="img/gallery/graph3d/example09_mobile.png">
|
|
<div>mobile</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example10_styles.html">
|
|
<img src="img/gallery/graph3d/example10_styles.png">
|
|
<div>styles</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/example11_tooltips.html">
|
|
<img src="img/gallery/graph3d/example11_tooltips.png">
|
|
<div>tooltips</div>
|
|
</a>
|
|
</div>
|
|
<div class="thumb">
|
|
<a href="examples/graph3d/playground/index.html">
|
|
<img src="img/gallery/graph3d/playground.png">
|
|
<div>playground</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 2010-2014 Almende B.V.
|
|
</p>
|
|
|
|
<p>
|
|
Vis.js is dual licensed under both
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
The Apache 2.0 License<br>
|
|
<a href="http://www.apache.org/licenses/LICENSE-2.0">http://www.apache.org/licenses/LICENSE-2.0</a>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
and
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
The MIT License<br>
|
|
<a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
Vis.js may be distributed under either 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>
|