| <!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> | |
| 
 | |
| 
 | |
| <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.2</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>
 |