Updated dist, docs, examples

9 years ago · cf3ad39c02
--- a/dist/vis.css
+++ b/dist/vis.css
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/docs/css/newdocs.css
+++ b/docs/css/newdocs.css
@ -1,85 +0,0 @@

 html {
    height:100%;
 }
 body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
    height:100%;
    font-size:16px;
    background: url('../../images/crosswordStrong.png') /* Background pattern from subtlepatterns.com */
 }

 img.icon {
    position:relative;
    top:-2px;
 }


 div.navbar-wrapper {
    background-color:#07508E;
    border-bottom: 3px solid #ffffff;
    font-size:16px;
 }

 div.blogHeader {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:910px;
    padding: 0px 30px 0px 30px;
    margin-top:-150px;
    color:#ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    margin-bottom:60px;

 }

 div.full {
    min-height:100%;
    box-shadow:0px 2px 10px rgba(0,0,0,0.4);
    padding-left:20px;
    padding-right:20px;
    background-color:#ffffff;
 }

 table.moduleTable {
    border:1px solid #eeeeee;
    font-size:14px;
    margin-left:20px;
    max-width: 900px;
 }

 table.moduleTable td{
    min-width: 80px;
    padding:2px 5px 2px 5px;
    height:35px;
 }

 table.moduleTable tr{
    border:1px solid #eeeeee;
    vertical-align: top;

 }

 tr.header {
    color: #1f3350;
    background-color: #cccccc;
    border-bottom:1px solid #999999 !important;
    font-size:16px;
    font-style:italic;
 }

 td.mid {
    background-color: #f7f7f7;
    font-style:italic;
 }

 td.properties {
    width:150px;
 }


 p {
    max-width:1000px;
 }
--- a/docs/css/style.css
+++ b/docs/css/style.css
@ -1,83 +1,191 @@
 html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;

 html {
    height:100%;
 }
 body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/
    font-size:16px;
    line-height: 1.5em;
    background: url('../img/crosswordStrong.png'); /* Background pattern from subtlepatterns.com */
    height: 100%;
 }


 h1, h2, h3, h4, h5, h6 {
    margin: 40px 0 20px 0;
 }

 ul {
    margin-top: 0.7em;
    margin-bottom: 0.7em;
 }

 p {
    margin: 20px 0;
 }

 img.icon {
    position:relative;
    top:-2px;
 }


 div.navbar-wrapper {
    background-color:#07508E;
    border-bottom: 3px solid #ffffff;
    font-size:16px;
 }

 div.blogHeader {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    width:910px;
    padding: 0px 30px 0px 30px;
    margin-top:-150px;
    color:#ffffff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    margin-bottom:60px;

 }

 div.full {
    min-height:100%;
    box-shadow:0 2px 10px rgba(0,0,0,0.4);
    padding: 20px 10px 40px 10px;
    background-color:#ffffff;
 }

 body, td, th {
  font-family: arial, sans-serif;
  font-size: 11pt;
  color: #4D4D4D;
  line-height: 1.7em;
@media (min-width: 768px) {
    div.full {
        padding: 40px 40px 80px 40px;
    }
 }

 #container {
  position: relative;
  margin: 0 auto;
  padding: 10px 10px 50px 10px;
  width: 970px;
  max-width: 100%;
  box-sizing: border-box;
@media (min-width: 992px) {
    div.full {
        padding: 80px 80px 160px 80px;
    }
 }

 h1 {
  font-size: 180%;
  font-weight: bold;
  padding: 0;
  margin: 1em 0 1em 0;
 table th,
 table td {
    padding: 5px 15px;
    border: 1px solid #dddddd;
 }

 h2 {
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  color: #064880;

 table th {
    background-color: #f5f5f5;
 }

 table td {
    vertical-align: top;
 }

 /*
 The following tables are used:
 - A table 'properties' with data properties.    Columns: Name, Type, Required, Description
 - A table 'options' with configuration options. Columns: Name, Type, Default, Description
 - A table 'methods' with methods.               Columns: Method, Return Type, Description
 - A table 'events' with events.                 Columns: Name, Properties, Description
 - A table 'styles' with styles.                 Columns: Description, Values
 - A table 'datatypes' with data types.          Columns: Name, Description, Examples
 */
 table.properties td:nth-child(2),
 table.properties td:nth-child(3),
 table.options td:nth-child(2),
 table.options td:nth-child(3),
 table.methods td:nth-child(2),
 table.methods td:nth-child(2),
 table.events td:nth-child(2) {
    background-color: #f5f5f5;
    font-style: italic;
 }

 h3 {
  font-size: 140%;
 pre {
    margin: 20px 0;
 }

 a > img {
  border: none;
 a code {
    text-decoration: underline;
 }

 a {
  color: #064880;
  text-decoration: none;
 /*pre.top {*/
    /*margin-left:20px;*/
 /*}*/

 tr.hidden {
    max-height:0;
    /*max-height: 0;*/
    overflow: hidden;
 }

 a:visited {
  color: #064880;
  text-decoration: none;
 tr.visible {
    /* Set our transitions up. */
    -webkit-animation:
    fadeIn 250ms ease-in;
 }

 a:hover {
  color: red;
  text-decoration: underline;

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
 }


 span.caret {
    opacity: 0.5;
 }

 table {
  border-collapse: collapse;
 span.right-caret {
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid #000000;
    display: inline-block;
    height: 0;
    opacity: 0.5;
    vertical-align: top;
    width: 0;
    margin-left:5px;
    margin-top:6px;
 }

 th {
  font-weight: bold;
  border: 1px solid lightgray;
  background-color: #E5E5E5;
  text-align: left;
  vertical-align: top;
  padding: 5px;
 tr.toggle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:pointer;
 }



 tr.toggle.collapsible {
    background-color: #f5f5f5;
    border-left: 3px solid #89b3ff;
 }

 td.indent {
    padding-left:25px !important;
 }


 td.indent2 {
    padding-left:50px !important;
 }

 td {
  border: 1px solid lightgray;
  padding: 5px;
  vertical-align: top;
 pre.options {
    max-width:600px;
 }

 p.important_note {
  color: #3a6baa;
  font-weight:bold;
 pre.hidden {
    display:none;
 }
--- a/docs/data/dataset.html
+++ b/docs/data/dataset.html
--- a/docs/data/dataview.html
+++ b/docs/data/dataview.html
@ -0,0 +1,392 @@
 <!DOCTYPE html>
 <html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" HREF="favicon.ico">
  <title>DataView - vis.js - A dynamic, browser based visualization library.</title>

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">


  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->


  <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  <script type="text/javascript" src="../js/prettify/prettify.js"></script>

  <script src="../js/smooth-scroll.min.js"></script>
  <script language="JavaScript">
    smoothScroll.init();
  </script>

  <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
            <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                              src="../img/external-link-icons/external-link-icon-white.png"></a>
            </li>
            <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
            <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
            <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
            <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
            <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
            <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
 </div>

 <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>
 <div class="container full">

  <h1>DataView</h1>

  <h2 id="Contents">Contents</h2>
  <ul>
    <li><a href="#Overview">Overview</a></li>
    <li><a href="#Example">Example</a></li>
    <li><a href="#Construction">Construction</a></li>
    <li><a href="#Methods">Methods</a></li>
    <li><a href="#Properties">Properties</a></li>
    <li><a href="#Getting_Data">Getting Data</a></li>
    <li><a href="#Subscriptions">Subscriptions</a></li>
  </ul>


  <h2 id="Overview">Overview</h2>

  <p>
    A DataView offers a filtered and/or formatted view on a
    <a href="dataset.html">DataSet</a>.
    One can subscribe to changes in a DataView, and easily get filtered or
    formatted data without having to specify filters and field types all
    the time.
  </p>

  <h2 id="Example">Example</h2>

  <p>
    The following example shows how to use a DataView.
  </p>

 <pre class="prettyprint lang-js">
 // create a DataSet
 var data = new vis.DataSet();
 data.add([
  {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
  {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
  {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
  {id: 4, text: 'item 4'}
 ]);

 // create a DataView
 // the view will only contain items having a property group with value 1,
 // and will only output fields id, text, and date.
 var view = new vis.DataView(data, {
  filter: function (item) {
    return (item.group == 1);
  },
  fields: ['id', 'text', 'date']
 });

 // subscribe to any change in the DataView
 view.on('*', function (event, properties, senderId) {
  console.log('event', event, properties);
 });

 // update an item in the data set
 data.update({id: 2, group: 1});

 // get all ids in the view
 var ids = view.getIds();
 console.log('ids', ids); // will output [1, 2]

 // get all items in the view
 var items = view.get();
 </pre>

  <h2 id="Construction">Construction</h2>


  <p>
    A DataView can be constructed as:
  </p>

 <pre class="prettyprint lang-js">
 var data = new vis.DataView(dataset, options)
 </pre>

  <p>
    where:
  </p>

  <ul>
    <li>
      <code>dataset</code> is a DataSet or DataView.
    </li>
    <li>
      <code>options</code> is an object which can
      contain the following properties. Note that these properties
      are exactly the same as the properties available in methods
      <code>DataSet.get</code> and <code>DataView.get</code>.

      <table class="options">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>

        <tr>
          <td>convert</td>
          <td>Object.&lt;String,&nbsp;String&gt;</td>
          <td>none</td>
          <td>
            An object containing field names as key, and data types as value.
            By default, the type of the properties of an item are left
            unchanged. When a field type is specified, this field in the
            items will be converted to the specified type. This can be used
            for example to convert ISO strings containing a date to a
            JavaScript Date object, or convert strings to numbers or vice
            versa. The available data types are listed in section
            <a href="dataset.html#Data_Types">Data Types</a>.
          </td>
        </tr>

        <tr>
          <td>fields</td>
          <td>String[&nbsp;] | Object.&lt;String,&nbsp;String&gt;</td>
          <td>none</td>
          <td>
            An array with field names, or an object with current field name and
            new field name that the field is returned as.
            By default, all properties of the items are emitted.
            When <code>fields</code> is defined, only the properties
            whose name is specified in <code>fields</code> will be included
            in the returned items.
          </td>
        </tr>

        <tr>
          <td>filter</td>
          <td>function</td>
          <td>none</td>
          <td>Items can be filtered on specific properties by providing a filter
            function. A filter function is executed for each of the items in the
            DataSet, and is called with the item as parameter. The function must
            return a boolean. All items for which the filter function returns
            true will be emitted.
            See also section <a href="dataset.html#Data_Filtering">Data Filtering</a>.</td>
        </tr>

      </table>
    </li>
  </ul>

  <h2 id="Methods">Methods</h2>

  <p>DataView contains the following methods.</p>

  <table class="methods">
    <tr>
      <th>Method</th>
      <th>Return Type</th>
      <th>Description</th>
    </tr>

    <tr>
      <td>
        get([options] [, data])<br>
        get(id [,options] [, data])<br>
        get(ids&nbsp;[,&nbsp;options]&nbsp;[,&nbsp;data])
      </td>
      <td>Object | Array</td>
      <td>
        Get a single item, multiple items, or all items from the DataView.
        Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>.
      </td>
    </tr>

    <tr>
      <td>
        getDataSet()
      </td>
      <td>DataSet</td>
      <td>
        Get the DataSet to which the DataView is connected.
      </td>
    </tr>

    <tr>
      <td>
        getIds([options])
      </td>
      <td>Number[]</td>
      <td>
        Get ids of all items or of a filtered set of items.
        Available <code>options</code> are described in section <a href="dataset.html#Data_Selection">Data Selection</a>, except that options <code>fields</code> and <code>type</code> are not applicable in case of <code>getIds</code>.
      </td>
    </tr>

    <tr>
      <td>off(event, callback)</td>
      <td>none</td>
      <td>
        Unsubscribe from an event, remove an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
      </td>
    </tr>

    <tr>
      <td>on(event, callback)</td>
      <td>none</td>
      <td>
        Subscribe to an event, add an event listener. See section <a href="#Subscriptions">Subscriptions</a>.
      </td>
    </tr>

    <tr>
      <td>refresh()</td>
      <td>none</td>
      <td>
        Refresh the filter results of a DataView. Useful when the filter function contains dynamic properties, like:

      <pre class="prettyprint lang-js">var data = new vis.DataSet(...);
 var view = new vis.DataView(data, {
  filter: function (item) {
    return item.value > threshold;
  }
 });</pre>
        In this example, <code>threshold</code> is an external parameter. When the value of <code>threshold</code> changes, the DataView must be notified that the filter results may have changed by calling <code>DataView.refresh()</code>.
      </td>
    </tr>

    <tr>
      <td>
        setDataSet(data)
      </td>
      <td>none</td>
      <td>
        Replace the DataSet of the DataView. Parameter <code>data</code> can be a DataSet or a DataView.
      </td>
    </tr>

  </table>


  <h2 id="Properties">Properties</h2>

  <p>DataView contains the following properties.</p>

  <table>
    <colgroup>
      <col width="200">
    </colgroup>

    <tr>
      <th>Property</th>
      <th>Type</th>
      <th>Description</th>
    </tr>

    <tr>
      <td>length</td>
      <td>Number</td>
      <td>The number of items in the DataView.</td>
    </tr>
  </table>

  <h2 id="Getting_Data">Getting Data</h2>

  <p>
    Data of the DataView can be retrieved using the method <code>get</code>.
  </p>

 <pre class="prettyprint lang-js">
 var items = view.get();
 </pre>

  <p>
    Data of a DataView can be filtered and formatted again, in exactly the
    same way as in a DataSet. See sections
    <a href="dataset.html#Data_Manipulation">Data Manipulation</a> and
    <a href="dataset.html#Data_Selection">Data Selection</a> for more
    information.
  </p>

 <pre class="prettyprint lang-js">
 var items = view.get({
  fields: ['id', 'score'],
  filter: function (item) {
    return (item.score > 50);
  }
 });
 </pre>



  <h2 id="Subscriptions">Subscriptions</h2>
  <p>
    One can subscribe on changes in the DataView. Subscription works exactly
    the same as for DataSets. See the documentation on
    <a href="dataset.html#Subscriptions">subscriptions in a DataSet</a>
    for more information.
  </p>

 <pre class="prettyprint lang-js">
 // create a DataSet and a view on the data set
 var data = new vis.DataSet();
 var view = new vis.DataView({
  filter: function (item) {
    return (item.group == 2);
  }
 });

 // subscribe to any change in the DataView
 view.on('*', function (event, properties, senderId) {
  console.log('event:', event, 'properties:', properties, 'senderId:', senderId);
 });

 // add, update, and remove data in the DataSet...
 </pre>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/data/index.html
+++ b/docs/data/index.html
@ -0,0 +1,117 @@
 <!DOCTYPE html>
 <html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" HREF="favicon.ico">
  <title>Data - vis.js - A dynamic, browser based visualization library.</title>

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">


  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->


  <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  <script type="text/javascript" src="../js/prettify/prettify.js"></script>

  <script src="../js/smooth-scroll.min.js"></script>
  <script language="JavaScript">
    smoothScroll.init();
  </script>

  <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
            <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                              src="../img/external-link-icons/external-link-icon-white.png"></a>
            </li>
            <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
            <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
            <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
            <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
            <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
            <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
 </div>

 <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>
 <div class="container full">

  <h1>Data</h1>

  <p>
    One of the starting points of the visualizations of vis.js is that they can deal with dynamic data, and allow manipulation of the data. To enable this, vis.js includes a flexible key/value based <code>DataSet</code> and <code>DataView</code> to handle unstructured JSON data.
  </p>

  <p>
    By providing a <code>DataSet</code> with data to the visualizations, they can subscribe on changes in the <code>DataSet</code> and automatically reflect the changes in their view. Changes in the data can be caused by a server pushing updates to a client, or by other interactive components in the web application. Vice versa, data can be manipulated in one of the visualizations. For example a REST-client can listen for changes and automatically write changes to the server. Or changes can be propagated to other parts of the web application.
  </p>

  <h2>DataSet</h2>

  <p>
    A <code>DataSet</code> can be used to store JSON objects by id. Objects can be added, updated and removed from the DatSet, and one can subscribe to changes in the <code>DataSet</code>.
    The data in the <code>DataSet</code> can be filtered and ordered, and fields (like
    dates) can be converted to a specific type. Data can be normalized when
    appending it to the <code>DataSet</code> as well.
  </p>

  <p>
    <a href="dataset.html">Go to the documentation of DataSet</a>
  </p>

  <h2>DataView</h2>

  <p>
    A <code>DataView</code> offers a filtered and/or formatted view on a DataSet.
    One can subscribe to changes in a <code>DataView</code>, and easily get filtered or
    formatted data without having to specify filters and field types all
    the time.
  </p>

  <p>
    <a href="dataview.html">Go to the documentation of DataView</a>
  </p>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/graph2d/index.html
+++ b/docs/graph2d/index.html
--- a/docs/graph3d/index.html
+++ b/docs/graph3d/index.html
@ -0,0 +1,732 @@
 <!DOCTYPE html>
 <html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" HREF="favicon.ico">
  <title>graph3d - vis.js - A dynamic, browser based visualization library.</title>

  <!-- Bootstrap core CSS -->
  <link href="../css/bootstrap.css" rel="stylesheet">
  <link href="../css/style.css" rel="stylesheet">


  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->


  <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
  <script type="text/javascript" src="../js/googleAnalytics.js"></script>
  <script type="text/javascript" src="../js/prettify/prettify.js"></script>

  <script src="../js/smooth-scroll.min.js"></script>
  <script language="JavaScript">
    smoothScroll.init();
  </script>

  <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
            <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                              src="../img/external-link-icons/external-link-icon-white.png"></a>
            </li>
            <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
            <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
            <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
            <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
            <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
            <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
 </div>

 <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>
 <div class="container full">
  <h1>Graph3d</h1>

  <h2 id="Overview">Overview</h2>
  <p>
    Graph3d is an interactive visualization chart to draw data in a three dimensional
    graph. You can freely move and zoom in the graph by dragging and scrolling in the
    window. Graph3d also supports animation of a graph.
  </p>
  <p>
    Graph3d uses <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas">HTML canvas</a>
    to render graphs, and can render up to a few thousands of data points smoothly.
  </p>

  <h2 id="Contents">Contents</h2>
  <ul>
    <li><a href="#Overview">Overview</a></li>
    <li><a href="#Loading">Loading</a></li>
    <li><a href="#Data_Format">Data Format</a></li>
    <li><a href="#Configuration_Options">Configuration Options</a></li>
    <li><a href="#Methods">Methods</a></li>
    <li><a href="#Events">Events</a></li>
    <li><a href="#Data_Policy">Data Policy</a></li>
  </ul>

  <h2 id="Example">Example</h2>
  <p>
    The following code shows how to create a Graph3d and provide it with data.
    More examples can be found in the <a href="../examples">examples</a> directory.
  </p>

 <pre class="prettyprint lang-html">
 &lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;Graph 3D demo&lt;/title&gt;

  &lt;style&gt;
    body {font: 10pt arial;}
  &lt;/style&gt;

  &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript"&gt;
  var data = null;
  var graph = null;

  function custom(x, y) {
    return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
  }

  // Called when the Visualization API is loaded.
  function drawVisualization() {
    // Create and populate a data table.
    var data = new vis.DataSet();
    // create some nice looking data with sin/cos
    var steps = 50;  // number of datapoints will be steps*steps
    var axisMax = 314;
    var axisStep = axisMax / steps;
    for (var x = 0; x &lt; axisMax; x+=axisStep) {
      for (var y = 0; y &lt; axisMax; y+=axisStep) {
        var value = custom(x, y);
        data.add({
          x: x,
          y: y,
          z: value,
          style: value
        });
      }
    }

    // specify options
    var options = {
      width:  '600px',
      height: '600px',
      style: 'surface',
      showPerspective: true,
      showGrid: true,
      showShadow: false,
      keepAspectRatio: true,
      verticalRatio: 0.5
    };

    // create a graph3d
    var container = document.getElementById('mygraph');
    graph3d = new vis.Graph3d(container, data, options);
  }
  &lt;/script&gt;
 &lt;/head&gt;

 &lt;body onload="drawVisualization();"&gt;
  &lt;div id="mygraph"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

 </pre>


  <h2 id="Loading">Loading</h2>

  <p>
    The class name of the Graph3d is <code>vis.Graph3d</code>.
    When constructing a Graph3d, an HTML DOM container must be provided to attach
    the graph to. Optionally, data an options can be provided.
    Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
    section <a href="#Data_Format">Data Format</a>.
    Options is a name-value map in the JSON format. The available options
    are described in section <a href="#Configuration_Options">Configuration Options</a>.
  </p>
  <pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>

  <p>
    Data and options can be set or changed later on using the functions
    <code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
  </p>

  <h2 id="Data_Format">Data Format</h2>
  <p>
    Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
    JSON objects are added to this DataSet by using the <code>add()</code> function.
    Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
    and can optionally have a property <code>style</code> and <code>filter</code>.

  <h3>Definition</h3>
  <p>
    The DataSet JSON objects are defined as:
  </p>

  <table class="properties">
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Required</th>
      <th>Description</th>
    </tr>
    <tr>
      <td>x</td>
      <td>number</td>
      <td>yes</td>
      <td>Location on the x-axis.</td>
    </tr>
    <tr>
      <td>y</td>
      <td>number</td>
      <td>yes</td>
      <td>Location on the y-axis.</td>
    </tr>
    <tr>
      <td>z</td>
      <td>number</td>
      <td>yes</td>
      <td>Location on the z-axis.</td>
    </tr>
    <tr>
      <td>style</td>
      <td>number</td>
      <td>no</td>
      <td>The data value, required for graph styles <code>dot-color</code> and
        <code>dot-size</code>.
      </td>
    </tr>
    <tr>
      <td>filter</td>
      <td>*</td>
      <td>no</td>
      <td>Filter values used for the animation.
        This column may have any type, such as a number, string, or Date.</td>
    </tr>
  </table>



  <h2 id="Configuration_Options">Configuration Options</h2>

  <p>
    Options can be used to customize the graph. Options are defined as a JSON object.
    All options are optional.
  </p>

 <pre class="prettyprint lang-js">
 var options = {
    width:  '100%',
    height: '400px',
    style: 'surface'
 };
 </pre>

  <p>
    The following options are available.
  </p>

  <table class="options">
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Default</th>
      <th>Description</th>
    </tr>

    <tr>
      <td>animationInterval</td>
      <td>number</td>
      <td>1000</td>
      <td>The animation interval in milliseconds. This determines how fast
        the animation runs.</td>
    </tr>
    <tr>
      <td>animationPreload</td>
      <td>boolean</td>
      <td>false</td>
      <td>If false, the animation frames are loaded as soon as they are requested.
        if <code>animationPreload</code> is true, the graph will automatically load
        all frames in the background, resulting in a smoother animation as soon as
        all frames are loaded. The load progress is shown on screen.</td>
    </tr>
    <tr>
      <td>animationAutoStart</td>
      <td>boolean</td>
      <td>false</td>
      <td>If true, the animation starts playing automatically after the graph
        is created.</td>
    </tr>

    <tr>
      <td>backgroundColor</td>
      <td>string or Object</td>
      <td>'white'</td>
      <td>The background color for the main area of the chart.
        Can be either a simple HTML color string, for example: 'red' or '#00cc00',
        or an object with the following properties.</td>
    </tr>
    <tr>
      <td>backgroundColor.stroke</td>
      <td>string</td>
      <td>'gray'</td>
      <td>The color of the chart border, as an HTML color string.</td>
    </tr>
    <tr>
      <td>backgroundColor.strokeWidth</td>
      <td>number</td>
      <td>1</td>
      <td>The border width, in pixels.</td>
    </tr>
    <tr>
      <td>backgroundColor.fill</td>
      <td>string</td>
      <td>'white'</td>
      <td>The chart fill color, as an HTML color string.</td>
    </tr>

    <tr>
      <td>cameraPosition</td>
      <td>Object</td>
      <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
      <td>Set the initial rotation and position of the camera.
        The object <code>cameraPosition</code> contains three parameters:
        <code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
        Parameter <code>horizontal</code> is a value in radians and can have any
        value (but normally in the range of 0 and 2*Pi).
        Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
        Parameter <code>distance</code> is the (normalized) distance from the
        camera to the center of the graph, in the range of 0.71 to 5.0. A
        larger distance puts the graph further away, making it smaller.
        All parameters are optional.
    </tr>

    <tr>
      <td>height</td>
      <td>string</td>
      <td>'400px'</td>
      <td>The height of the graph in pixels or as a percentage.</td>
    </tr>

    <tr>
      <td>keepAspectRatio</td>
      <td>boolean</td>
      <td>true</td>
      <td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
        keep their aspect ratio. If false, the axes are scaled such that they
        both have the same, maximum with.</td>
    </tr>

    <tr>
      <td>showAnimationControls</td>
      <td>boolean</td>
      <td>true</td>
      <td>If true, animation controls are created at the bottom of the Graph.
        The animation controls consists of buttons previous, start/stop, next,
        and a slider showing the current frame.
        Only applicable when the provided data contains an animation.</td>
    </tr>
    <tr>
      <td>showGrid</td>
      <td>boolean</td>
      <td>true</td>
      <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
        graph).</td>
    </tr>
    <tr>
      <td>showPerspective</td>
      <td>boolean</td>
      <td>true</td>
      <td>If true, the graph is drawn in perspective: points and lines which
        are further away are drawn smaller.
        Note that the graph currently does not support a gray colored bottom side
        when drawn in perspective.
      </td>
    </tr>
    <tr>
      <td>showShadow</td>
      <td>boolean</td>
      <td>false</td>
      <td>Show shadow on the graph.</td>
    </tr>
    <tr>
      <td>style</td>
      <td>string</td>
      <td>'dot'</td>
      <td>The style of the 3d graph. Available styles:
        <code>bar</code>,
        <code>bar-color</code>,
        <code>bar-size</code>,
        <code>dot</code>,
        <code>dot-line</code>,
        <code>dot-color</code>,
        <code>dot-size</code>,
        <code>line</code>,
        <code>grid</code>,
        or <code>surface</code></td>
    </tr>

    <tr>
      <td>tooltip</td>
      <td>boolean | function</td>
      <td>false</td>
      <td>Show a tooltip showing the values of the hovered data point.
        The contents of the tooltip can be customized by providing a callback
        function as <code>tooltip</code>. In this case the function is called
        with an object containing parameters <code>x</code>,
        <code>y</code>, and <code>z</code> argument,
        and must return a string which may contain HTML.
      </td>
    </tr>

    <tr>
      <td>valueMax</td>
      <td>number</td>
      <td>none</td>
      <td>The maximum value for the value-axis. Only available in combination
        with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
    </tr>
    <tr>
      <td>valueMin</td>
      <td>number</td>
      <td>none</td>
      <td>The minimum value for the value-axis. Only available in combination
        with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
    </tr>
    <tr>
      <td>verticalRatio</td>
      <td>number</td>
      <td>0.5</td>
      <td>A value between 0.1 and 1.0. This scales the vertical size of the graph
        When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
        the graph will be a cube.</td>
    </tr>

    <tr>
      <td>width</td>
      <td>string</td>
      <td>'400px'</td>
      <td>The width of the graph in pixels or as a percentage.</td>
    </tr>

    <tr>
      <td>xBarWidth</td>
      <td>number</td>
      <td>none</td>
      <td>The width of bars in x direction. By default, the width is equal to the distance
        between the data points, such that bars adjoin each other.
        Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
    </tr>

    <tr>
      <td>xCenter</td>
      <td>string</td>
      <td>'55%'</td>
      <td>The horizontal center position of the graph, as a percentage or in
        pixels.</td>
    </tr>
    <tr>
      <td>xMax</td>
      <td>number</td>
      <td>none</td>
      <td>The maximum value for the x-axis.</td>
    </tr>
    <tr>
      <td>xMin</td>
      <td>number</td>
      <td>none</td>
      <td>The minimum value for the x-axis.</td>
    </tr>
    <tr>
      <td>xStep</td>
      <td>number</td>
      <td>none</td>
      <td>Step size for the grid on the x-axis.</td>
    </tr>
    <tr>
      <td>xValueLabel</td>
      <td>function</td>
      <td>none</td>
      <td>A function for custom formatting of the labels along the x-axis,
        for example <code>function (x) {return (x * 100) + '%'}</code>.
      </td>
    </tr>

    <tr>
      <td>yBarWidth</td>
      <td>number</td>
      <td>none</td>
      <td>The width of bars in y direction. By default, the width is equal to the distance
        between the data points, such that bars adjoin each other.
        Only applicable for styles <code>'bar'</code> and <code>'bar-color'</code>.</td>
    </tr>

    <tr>
      <td>yCenter</td>
      <td>string</td>
      <td>'45%'</td>
      <td>The vertical center position of the graph, as a percentage or in
        pixels.</td>
    </tr>
    <tr>
      <td>yMax</td>
      <td>number</td>
      <td>none</td>
      <td>The maximum value for the y-axis.</td>
    </tr>
    <tr>
      <td>yMin</td>
      <td>number</td>
      <td>none</td>
      <td>The minimum value for the y-axis.</td>
    </tr>
    <tr>
      <td>yStep</td>
      <td>number</td>
      <td>none</td>
      <td>Step size for the grid on the y-axis.</td>
    </tr>
    <tr>
      <td>yValueLabel</td>
      <td>function</td>
      <td>none</td>
      <td>A function for custom formatting of the labels along the y-axis,
        for example <code>function (y) {return (y * 100) + '%'}</code>.
      </td>
    </tr>

    <tr>
      <td>zMin</td>
      <td>number</td>
      <td>none</td>
      <td>The minimum value for the z-axis.</td>
    </tr>
    <tr>
      <td>zMax</td>
      <td>number</td>
      <td>none</td>
      <td>The maximum value for the z-axis.</td>
    </tr>
    <tr>
      <td>zStep</td>
      <td>number</td>
      <td>none</td>
      <td>Step size for the grid on the z-axis.</td>
    </tr>
    <tr>
      <td>zValueLabel</td>
      <td>function</td>
      <td>none</td>
      <td>A function for custom formatting of the labels along the z-axis,
        for example <code>function (z) {return (z * 100) + '%'}</code>.
      </td>
    </tr>

    <tr>
      <td>xLabel</td>
      <td>String</td>
      <td>x</td>
      <td>Label on the X axis.</td>
    </tr>
    <tr>
      <td>yLabel</td>
      <td>String</td>
      <td>y</td>
      <td>Label on the Y axis.</td>
    </tr>
    <tr>
      <td>zLabel</td>
      <td>String</td>
      <td>z</td>
      <td>Label on the Z axis.</td>
    </tr>
    <tr>
      <td>filterLabel</td>
      <td>String</td>
      <td>time</td>
      <td>Label for the filter column.</td>
    </tr>
    <tr>
      <td>legendLabel</td>
      <td>String</td>
      <td>value</td>
      <td>Label for the style description.</td>
    </tr>
  </table>


  <h2 id="Methods">Methods</h2>
  <p>
    Graph3d supports the following methods.
  </p>

  <table class="methods">
    <tr>
      <th>Method</th>
      <th>Return Type</th>
      <th>Description</th>
    </tr>

    <tr>
      <td>animationStart()</td>
      <td>none</td>
      <td>Start playing the animation.
        Only applicable when animation data is available.</td>
    </tr>

    <tr>
      <td>animationStop()</td>
      <td>none</td>
      <td>Stop playing the animation.
        Only applicable when animation data is available.</td>
    </tr>

    <tr>
      <td>getCameraPosition()</td>
      <td>An object with parameters <code>horizontal</code>,
        <code>vertical</code> and <code>distance</code></td>
      <td>Returns an object with parameters <code>horizontal</code>,
        <code>vertical</code> and <code>distance</code>,
        which each one of them is a number, representing the rotation and position
        of the camera.</td>
    </tr>

    <tr>
      <td>redraw()</td>
      <td>none</td>
      <td>Redraw the graph. Useful after the camera position is changed externally,
        when data is changed, or when the layout of the webpage changed.</td>
    </tr>

    <tr>
      <td>setData(data)</td>
      <td>none</td>
      <td>Replace the data in the Graph3d.</td>
    </tr>

    <tr>
      <td>setOptions(options)</td>
      <td>none</td>
      <td>Update options of Graph3d.
        The provided options will be merged with current options.</td>
    </tr>

    <tr>
      <td>setSize(width, height)</td>
      <td>none</td>
      <td>Parameters <code>width</code> and <code>height</code> are strings,
        containing a new size for the graph. Size can be provided in pixels
        or in percentages.</td>
    </tr>

    <tr>
      <td>setCameraPosition (pos)</td>
      <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
      <td>Set the rotation and position of the camera. Parameter <code>pos</code>
        is an object which contains three parameters: <code>horizontal</code>,
        <code>vertical</code>, and <code>distance</code>.
        Parameter <code>horizontal</code> is a value in radians and can have any
        value (but normally in the range of 0 and 2*Pi).
        Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
        Parameter <code>distance</code> is the (normalized) distance from the
        camera to the center of the graph, in the range of 0.71 to 5.0. A
        larger distance puts the graph further away, making it smaller.
        All parameters are optional.
      </td>
    </tr>

  </table>

  <h2 id="Events">Events</h2>
  <p>
    Graph3d fires events after the camera position has been changed.
    The event can be catched by creating a listener.
    Here an example on how to catch a <code>cameraPositionChange</code> event.
  </p>

 <pre class="prettyprint lang-js">
 function onCameraPositionChange(event) {
  alert('The camera position changed to:\n' +
        'Horizontal: ' + event.horizontal + '\n' +
        'Vertical: ' + event.vertical + '\n' +
        'Distance: ' + event.distance);
 }
 // assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
 graph3d.on('cameraPositionChange', onCameraPositionChange);
 </pre>

  <p>
    The following events are available.
  </p>

  <table class="events">
    <tr>
      <th>name</th>
      <th>Properties</th>
      <th>Description</th>
    </tr>

    <tr>
      <td>cameraPositionChange</td>
      <td>
        <ul>
          <li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
          <li><code>vertical</code>: Number. The vertical angle of the camera.</li>
          <li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
        </ul>
      </td>
      <td>The camera position changed. Fired after the user modified the camera position
        by moving (dragging) the graph, or by zooming (scrolling),
        but not after a call to <code>setCameraPosition</code> method.
        The new camera position can be retrieved by calling the method
        <code>getCameraPosition</code>.</td>
    </tr>
  </table>

  <h2 id="Data_Policy">Data Policy</h2>
  <p>
    All code and data are processed and rendered in the browser. No data is sent to any server.
  </p>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/js/bootstrap.js
+++ b/docs/js/bootstrap.js
--- a/docs/js/bootstrap.min.js
+++ b/docs/js/bootstrap.min.js
--- a/docs/js/docs.min.js
+++ b/docs/js/docs.min.js
--- a/docs/js/googleAnalytics.js
+++ b/docs/js/googleAnalytics.js
@ -0,0 +1,15 @@
 /**
 * Created by Alex on 4/23/2015.
 */
 (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');
--- a/docs/js/ie-emulation-modes-warning.js
+++ b/docs/js/ie-emulation-modes-warning.js
@ -0,0 +1,51 @@
 // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
 // IT'S JUST JUNK FOR OUR DOCS!
 // ++++++++++++++++++++++++++++++++++++++++++
 /*!
 * Copyright 2014 Twitter, Inc.
 *
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */
 // Intended to prevent false-positive bug reports about Bootstrap not working properly in old versions of IE due to folks testing using IE's unreliable emulation modes.
 (function () {
  'use strict';

  function emulatedIEMajorVersion() {
    var groups = /MSIE ([0-9.]+)/.exec(window.navigator.userAgent)
    if (groups === null) {
      return null
    }
    var ieVersionNum = parseInt(groups[1], 10)
    var ieMajorVersion = Math.floor(ieVersionNum)
    return ieMajorVersion
  }

  function actualNonEmulatedIEMajorVersion() {
    // Detects the actual version of IE in use, even if it's in an older-IE emulation mode.
    // IE JavaScript conditional compilation docs: http://msdn.microsoft.com/en-us/library/ie/121hztk3(v=vs.94).aspx
    // @cc_on docs: http://msdn.microsoft.com/en-us/library/ie/8ka90k2e(v=vs.94).aspx
    var jscriptVersion = new Function('/*@cc_on return @_jscript_version; @*/')() // jshint ignore:line
    if (jscriptVersion === undefined) {
      return 11 // IE11+ not in emulation mode
    }
    if (jscriptVersion < 9) {
      return 8 // IE8 (or lower; haven't tested on IE<8)
    }
    return jscriptVersion // IE9 or IE10 in any mode, or IE11 in non-IE11 mode
  }

  var ua = window.navigator.userAgent
  if (ua.indexOf('Opera') > -1 || ua.indexOf('Presto') > -1) {
    return // Opera, which might pretend to be IE
  }
  var emulated = emulatedIEMajorVersion()
  if (emulated === null) {
    return // Not IE
  }
  var nonEmulated = actualNonEmulatedIEMajorVersion()

  if (emulated !== nonEmulated) {
    window.alert('WARNING: You appear to be using IE' + nonEmulated + ' in IE' + emulated + ' emulation mode.\nIE emulation modes can behave significantly differently from ACTUAL older versions of IE.\nPLEASE DON\'T FILE BOOTSTRAP BUGS based on testing in IE emulation modes!')
  }
 })();
--- a/docs/js/ie10-viewport-bug-workaround.js
+++ b/docs/js/ie10-viewport-bug-workaround.js
@ -0,0 +1,22 @@
 /*!
 * IE10 viewport hack for Surface/desktop Windows 8 bug
 * Copyright 2014 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */

 // See the Getting Started docs for more information:
 // http://getbootstrap.com/getting-started/#support-ie10-width

 (function () {
  'use strict';
  if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
    var msViewportStyle = document.createElement('style')
    msViewportStyle.appendChild(
      document.createTextNode(
        '@-ms-viewport{width:auto!important}'
      )
    )
    document.querySelector('head').appendChild(msViewportStyle)
  }
 })();
--- a/docs/js/jquery.min.js
+++ b/docs/js/jquery.min.js
--- a/docs/lib/prettify/lang-apollo.js
+++ b/docs/lib/prettify/lang-apollo.js
--- a/docs/lib/prettify/lang-css.js
+++ b/docs/lib/prettify/lang-css.js
--- a/docs/lib/prettify/lang-hs.js
+++ b/docs/lib/prettify/lang-hs.js
--- a/docs/lib/prettify/lang-lisp.js
+++ b/docs/lib/prettify/lang-lisp.js
--- a/docs/lib/prettify/lang-lua.js
+++ b/docs/lib/prettify/lang-lua.js
--- a/docs/lib/prettify/lang-ml.js
+++ b/docs/lib/prettify/lang-ml.js
--- a/docs/lib/prettify/lang-proto.js
+++ b/docs/lib/prettify/lang-proto.js
--- a/docs/lib/prettify/lang-scala.js
+++ b/docs/lib/prettify/lang-scala.js
--- a/docs/lib/prettify/lang-sql.js
+++ b/docs/lib/prettify/lang-sql.js
--- a/docs/lib/prettify/lang-vb.js
+++ b/docs/lib/prettify/lang-vb.js
--- a/docs/lib/prettify/lang-vhdl.js
+++ b/docs/lib/prettify/lang-vhdl.js
--- a/docs/lib/prettify/lang-wiki.js
+++ b/docs/lib/prettify/lang-wiki.js
--- a/docs/lib/prettify/lang-yaml.js
+++ b/docs/lib/prettify/lang-yaml.js
--- a/docs/lib/prettify/prettify.css
+++ b/docs/lib/prettify/prettify.css
--- a/docs/lib/prettify/prettify.js
+++ b/docs/lib/prettify/prettify.js
--- a/docs/js/smooth-scroll.min.js
+++ b/docs/js/smooth-scroll.min.js
@ -0,0 +1,2 @@
 /** smooth-scroll v5.3.3, by Chris Ferdinandi | http://github.com/cferdinandi/smooth-scroll | Licensed under MIT: http://gomakethings.com/mit/ */
 !function(e,t){"function"==typeof define&&define.amd?define("smoothScroll",t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)}(window||this,function(e){"use strict";var t,n,o,r={},a=!!document.querySelector&&!!e.addEventListener,c={speed:500,easing:"easeInOutCubic",offset:0,updateURL:!0,callbackBefore:function(){},callbackAfter:function(){}},u=function(e,t,n){if("[object Object]"===Object.prototype.toString.call(e))for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.call(n,e[o],o,e);else for(var r=0,a=e.length;a>r;r++)t.call(n,e[r],r,e)},i=function(e,t){var n={};return u(e,function(t,o){n[o]=e[o]}),u(t,function(e,o){n[o]=t[o]}),n},l=function(e,t){for(var n=t.charAt(0);e&&e!==document;e=e.parentNode)if("."===n){if(e.classList.contains(t.substr(1)))return e}else if("#"===n){if(e.id===t.substr(1))return e}else if("["===n&&e.hasAttribute(t.substr(1,t.length-2)))return e;return!1},s=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},f=function(e){for(var t,n=String(e),o=n.length,r=-1,a="",c=n.charCodeAt(0);++r<o;){if(t=n.charCodeAt(r),0===t)throw new InvalidCharacterError("Invalid character: the input contains U+0000.");a+=t>=1&&31>=t||127==t||0===r&&t>=48&&57>=t||1===r&&t>=48&&57>=t&&45===c?"\\"+t.toString(16)+" ":t>=128||45===t||95===t||t>=48&&57>=t||t>=65&&90>=t||t>=97&&122>=t?n.charAt(r):"\\"+n.charAt(r)}return a},d=function(e,t){var n;return"easeInQuad"===e&&(n=t*t),"easeOutQuad"===e&&(n=t*(2-t)),"easeInOutQuad"===e&&(n=.5>t?2*t*t:-1+(4-2*t)*t),"easeInCubic"===e&&(n=t*t*t),"easeOutCubic"===e&&(n=--t*t*t+1),"easeInOutCubic"===e&&(n=.5>t?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e&&(n=t*t*t*t),"easeOutQuart"===e&&(n=1- --t*t*t*t),"easeInOutQuart"===e&&(n=.5>t?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e&&(n=t*t*t*t*t),"easeOutQuint"===e&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e&&(n=.5>t?16*t*t*t*t*t:1+16*--t*t*t*t*t),n||t},h=function(e,t,n){var o=0;if(e.offsetParent)do o+=e.offsetTop,e=e.offsetParent;while(e);return o=o-t-n,o>=0?o:0},m=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},p=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},v=function(t,n){history.pushState&&(n||"true"===n)&&history.pushState(null,null,[e.location.protocol,"//",e.location.host,e.location.pathname,e.location.search,t].join(""))};r.animateScroll=function(t,n,r){var a=i(a||c,r||{}),u=p(t?t.getAttribute("data-options"):null);a=i(a,u),n="#"+f(n.substr(1));var l="#"===n?document.documentElement:document.querySelector(n),g=e.pageYOffset;o||(o=document.querySelector("[data-scroll-header]"));var b,O,y,S=null===o?0:s(o)+o.offsetTop,I=h(l,S,parseInt(a.offset,10)),H=I-g,E=m(),A=0;v(n,a.updateURL);var L=function(o,r,c){var u=e.pageYOffset;(o==r||u==r||e.innerHeight+u>=E)&&(clearInterval(c),l.focus(),a.callbackAfter(t,n))},Q=function(){A+=16,O=A/parseInt(a.speed,10),O=O>1?1:O,y=g+H*d(a.easing,O),e.scrollTo(0,Math.floor(y)),L(y,I,b)},C=function(){a.callbackBefore(t,n),b=setInterval(Q,16)};0===e.pageYOffset&&e.scrollTo(0,0),C()};var g=function(e){var n=l(e.target,"[data-scroll]");n&&"a"===n.tagName.toLowerCase()&&(e.preventDefault(),r.animateScroll(n,n.hash,t))},b=function(){n||(n=setTimeout(function(){n=null,headerHeight=null===o?0:s(o)+o.offsetTop},66))};return r.destroy=function(){t&&(document.removeEventListener("click",g,!1),e.removeEventListener("resize",b,!1),t=null,n=null,o=null)},r.init=function(n){a&&(r.destroy(),t=i(c,n||{}),o=document.querySelector("[data-scroll-header]"),document.addEventListener("click",g,!1),o&&e.addEventListener("resize",b,!1))},r});
--- a/docs/js/toggleTable.js
+++ b/docs/js/toggleTable.js
@ -0,0 +1,81 @@
 /**
 * Created by Alex on 4/21/2015.
 */

 /**
 * it works like this:
 *
 *   the toggle row has the onclick with the table id, the parent name and this. The function will look through all trs with matching parent and check the class
 *   if hidden, it shows them, else it hides them.
 *
 *   The caret is also flipped and the toggle class is changed.
 *
 *
 <tr class='toggle collapsible' onclick="toggleTable('physicsTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td></tr>
 <tr parent="barnesHut" class="hidden"><td>barnesHut.gravitationalConstant</td></tr>
 <tr parent="barnesHut" class="hidden"><td>barnesHut.centralGravity</td></tr>
 <tr parent="barnesHut" class="hidden"><td>barnesHut.springLength</td></tr>
 <tr parent="barnesHut" class="hidden"><td>barnesHut.springConstant</td></tr>
 <tr parent="barnesHut" class="hidden"><td>barnesHut.damping</td></tr>
 *
 *
 * @param tableId
 * @param parent
 * @param clickedRow
 */
 function toggleTable(tableId, parent, clickedRow) {
  var table = document.getElementById(tableId);
  var wasOpen = false;
  for (var i = 0, row; row = table.rows[i]; i++) {
    if (row.getAttribute('parent') === parent) {
      if (row.className.indexOf('hidden') !== -1) {
        row.className = row.className.replace(' hidden','').replace('hidden','');
        row.className += ' visible';
      }
      else {
        row.className = row.className.replace(' visible','').replace('visible','');;
        row.className += ' hidden';
        wasOpen = true;
      }
    }
  }

  var spans;
  if (wasOpen === true) {
    spans = document.getElementsByClassName('caret');
    clickedRow.className += ' collapsible';
  }
  else {
    spans = document.getElementsByClassName('right-caret')
    clickedRow.className = clickedRow.className.replace(' collapsible','').replace('collapsible','');;
  }

  for (var i = 0; i < spans.length; i++) {
    if (spans[i].getAttribute('parent') === parent) {
      spans[i].className = wasOpen === true ? 'right-caret' : 'caret';
    }
  }
 }

 function toggleTab(tabThis) {
  var parentNode = tabThis.parentNode;
  var active = tabThis.className.indexOf('active') !== -1;
  for (var i = 0; i < parentNode.children.length; i++) {
    var child = parentNode.children[i];
    var targetNodeId = child.getAttribute('targetNode');
    if (targetNodeId) {
      var targetNode = document.getElementById(child.getAttribute('targetNode'));
      targetNode.className = targetNode.className.replace(' hidden', '').replace('hidden', '') + ' hidden';
    }
    child.className = child.className.replace(' active','').replace('active','');
  }

  // activate the tab
  tabThis.className += ' active';
  var ownTargetNodeId = tabThis.getAttribute('targetNode');
  if (ownTargetNodeId) {
    var ownTargetNode = document.getElementById(ownTargetNodeId);
    ownTargetNode.className = ownTargetNode.className.replace(' hidden','').replace('hidden','');
  }

 }
--- a/docs/network/configure.html
+++ b/docs/network/configure.html
@ -0,0 +1,174 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/toggleTable.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <style>

    </style>
 </head>
 <!-- NAVBAR
 ================================================== -->
 <body onload="prettyPrint();">

 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="../index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="../blog.html">Blog</a></li>
                        <li><a href="../index.html#download_install">Download</a></li>
                        <li><a href="../showcase/index.html">Showcase</a></li>
                        <li><a href="../index.html#contribute">Contribute</a></li>
                        <li><a href="../featureRequests.html">Feature requests</a></li>
                        <li><a href="../index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
 </div>

 <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>

 <div class="container full">
    <h1>Network - configure</h1>

    <p>Handles the HTML part of the canvas.</p>

    <h3>Options</h3>
    <p>The options for the canvas have to be contained in an object titled 'configure'.</p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  configure: {
    enabled: true,
    filter: 'nodes,edges',
    container: undefined,
    showButton: true
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // only the options that have shorthand notations are shown.
 var options = {
  configure: 'nodes,edges'
 }

 network.setOptions(options);
 </pre>

    <p>As shown above, alternative to supplying an object, you can supply a <code>String</code>, <code>Array</code>, <code>Function</code> or
        <code>Boolean</code>. These will do the same as the filter option described below.</p>
    <table class="options">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>enabled</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true.
            </td>
        </tr>
        <tr>
            <td>filter</td>
            <td>String, Array, Boolean, Function</td>
            <td><code>true</code></td>
            <td>When a boolean, true gives you all options, false will not show any. If a string is supplied, any
                combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics,
                selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an
                array of strings, any of the previously mentioned fields are accepted. <br><br>
                When supplying a function, you receive two arguments. The option and the path of the option within the options object. If it returns true, the options will be shown in the configurator. Example:
                <pre class="prettyprint lang-js">
 function (option, path) {
  return path.indexOf('physics') !== -1;
 }</pre>
                This only shows the physics options.
            </td>
        </tr>
        <tr>
            <td>container</td>
            <td>DOM element</td>
            <td><code>undefined</code></td>
            <td>This allows you to put the configure list in another HTML container than below the network.</td>
        </tr>
        <tr>
            <td>showButton</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>Show the generate options button at the bottom of the configurator.</td>
        </tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/edges.html
+++ b/docs/network/edges.html
@ -0,0 +1,644 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <style>
        td.type {
            width: 90px;
        }
    </style>
    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <!-- NAVBAR
 ================================================== -->
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>

 <div class="container full">
    <h1>Network - edges</h1>

    <p>Handles the creation and deletion of edges and contains the global edge options and styles.</p>

    <h3>Options</h3>

    <p>The options for the edges have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
    in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
    <p><b><i>When you have given an edge an option, you will override the global option for that property. If you then set that option to <code>null</code>,
        it will revert back to the default value.</i></b>
    </p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  edges:{
    arrows: {
      to:     {enabled: false, scaleFactor:1},
      middle: {enabled: false, scaleFactor:1},
      from:   {enabled: false, scaleFactor:1}
    },
    color: {
      color:'#848484',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
    },
    dashes: false,
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 2, // px
      strokeColor: '#ffffff',
      align:'horizontal'
    },
    hidden: false,
    hoverWidth: 1.5,
    label: undefined,
    length: undefined,
    physics: true,
    scaling:{
      min: 1,
      max: 15,
      label: {
        enabled: true,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          var scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    selectionWidth: 1,
    selfReferenceSize:20,
    shadow:{
      enabled: false,
      size:10,
      x:5,
      y:5
    },
    smooth: {
      enabled: true,
      type: "dynamic",
      roundness: 0.5
    },
    title:undefined,
    width: 1,
    value: undefined
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // here all options that have shorthand notations are shown.
 var options = {
  edges:{
    arrows: 'to, from',
    color: 'red',
    font: '12px arial #ff0000',
    scaling:{
      label: true,
    },
    shadow: true,
    smooth: true,
  }
 }

 network.setOptions(options);
 </pre>

    <p>These options can also be set per individual edge.</p>
    <table class="options" id="optionTable">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','arrows', this);">
            <td><span parent="arrows" class="right-caret"></span> arrows</td>
            <td>Object or String</td>
            <td><code>undefined</code></td>
            <td>To draw an arrow with default settings a string can be supplied. For example: <code>arrows:'to, from,
                middle'</code> or <code>'to;from'</code>, any combination with any seperating symbol is fine. If you
                want to control the size of the arrowheads, you can supply an object.
            </td>
        </tr>
        <tr parent="arrows" class="hidden">
            <td class="indent">arrows.to</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default
                settings. To customize the size of the arrow, supply an object.
            </td>
        </tr>
        <tr parent="arrows" class="hidden">
            <td class="indent2">arrows.to.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set,
                enabled will be set to true.
            </td>
        </tr>
        <tr parent="arrows" class="hidden">
            <td class="indent2">arrows.to.scaleFactor</td>
            <td>Number</td>
            <td><code>1</code></td>
            <td>The scale factor allows you to change the size of the arrowhead.</td>
        </tr>
        <tr parent="arrows" class="hidden">
            <td class="indent">arrows.middle</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td>
        </tr>
        <tr parent="arrows" class="hidden">
            <td class="indent">arrows.from</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
            <td><span parent="color" class="right-caret"></span> color</td>
            <td>Object or String</td>
            <td><code>Object</code></td>
            <td>The color object contains the color information of the edge in every situation. When the edge only needs
                a single color, a color value like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or
                <code>'red'</code> can be supplied instead of an object.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.color</td>
            <td>String</td>
            <td><code>'#848484'</code></td>
            <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is
                enabled in the interaction module)</i>.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.highlight</td>
            <td>String</td>
            <td><code>'#848484'</code></td>
            <td>The color the edge when it is selected.</td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.hover</td>
            <td>String</td>
            <td><code>'#848484'</code></td>
            <td>The color the edge when the mouse hovers over it <i>(assuming hover is enabled in the interaction
                module)</i>.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.inherit</td>
            <td>String or Boolean</td>
            <td><code>'from'</code></td>
            <td><i>When color, highlight or hover are defined, inherit is set to false!</i>
                <br><br>Supported options are: <code>true, false, 'from','to','both'</code>.
                <br><br>The default value is 'from' which does the same as true: the edge will inherit the color from
                the border of the node on the 'from' side.
                <br><br>When set to 'to', the border color from the 'to' node will be used.
                <br><br>When set to 'both', the color will fade from the from color to the to color. <b>'both' is
                    computationally intensive</b> because the gradient is recomputed every redraw. This is required
                because the angles change when the nodes move.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.opacity</td>
            <td>Number</td>
            <td><code>1.0</code></td>
            <td>It can be useful to set the opacity of an edge without manually changing all the colors. The opacity
                option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed
                range of the opacity option is between <code>0 and 1</code>. This is only done once so the performance
                impact is not too big.
            </td>
        </tr>
        <tr>
            <td>dashes</td>
            <td>Array or Boolean</td>
            <td><code>false</code></td>
            <td>When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array.
                Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is
                repeated until the distance is filled.
                <i>When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth</i>.
            </td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);">
            <td><span parent="font" class="right-caret"></span> font</td>
            <td>Object or String</td>
            <td><code>false</code></td>
            <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face
                color'</code> for example: <code>'14px arial red'</code>.
            </td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.color</td>
            <td>String</td>
            <td><code>'#343434'</code></td>
            <td>Color of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.size</td>
            <td>Number</td>
            <td><code>14</code></td>
            <td>Size of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.face</td>
            <td>String</td>
            <td><code>'arial'</code></td>
            <td>Font face (or font family) of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.background</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind
                the label in the supplied color.
            </td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.strokeWidth</td>
            <td>Number</td>
            <td><code>2</code></td>
            <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value
                higher than 0 is supplied, the stroke will be drawn.
            </td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.strokeColor</td>
            <td>String</td>
            <td><code>'#ffffff'</code></td>
            <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.align</td>
            <td>String</td>
            <td><code>'horizontal'</code></td>
            <td>Possible options: <code>'horizontal','top','middle','bottom'</code>. The alignment determines how the
                label is aligned over the edge. The default value <code>horizontal</code> aligns the label horizontally,
                regardless of the orientation of the edge. When an option other than <code>horizontal</code> is chosen,
                the label will align itself according to the edge.
            </td>
        </tr>
        <tr>
            <td>hidden</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>When true, the edge is not drawn. It is part still part of the physics simulation however!</td>
        </tr>
        <tr>
            <td>hoverWidth</td>
            <td>Number or Function</td>
            <td><code>0.5</code></td>
            <td>Assuming the hover behaviour is enabled in the <a href="./interaction.html">interaction module</a>, the
                hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is
                supplied, this number will be <b>added</b> to the width.
                Because the width can be altered by the value and the scaling functions, a constant multiplier or added
                value may not give the best results. To solve this, you can supply a function. Example:

 <pre class="code">
 var options: {
  edges: {
    hoverWidth: function (width) {return width+1;}
  }
 }
 </pre>
                It receives the <code>Number width</code> of the edge. In this simple example we add 1 to the width. You
                can taylor the logic in the function as long as it returns a <code>Number</code>.
            </td>
        </tr>

        <tr>
            <td>id</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.</td>
        </tr>
        <tr>
            <td>label</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.</td>
        </tr>
        <tr>
            <td>length</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>The physics simulation gives edges a spring length. This value can override the length of the spring in
                rest.
            </td>
        </tr>
        <tr>
            <td>physics</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>When true, the edge is part of the physics simulation. When false, it will not act as a spring.</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);">
            <td><span parent="scaling" class="right-caret"></span> scaling</td>
            <td>Object</td>
            <td><code>Object</code></td>
            <td>If the <code>value</code> option is specified, the width of the edges will be scaled according to the
                properties in this object. Keep in mind that when using scaling, the <code>width</code> option is
                neglected.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.min</td>
            <td>Number</td>
            <td><code>1</code></td>
            <td>If edges have a value, their widths are determined by the value, the scaling function and the min max
                values. The min value is the minimum allowed value.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.max</td>
            <td>Number</td>
            <td><code>15</code></td>
            <td>This is the maximum allowed width when the edges are scaled using the value option.</td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.label</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>When false, the label is not allowed to scale with the edge. If true it will scale using default
                settigns. For further customization, you can supply an object.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of
                the properties in this object are defined.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.min</td>
            <td>Number</td>
            <td><code>14</code></td>
            <td>The minimum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.max</td>
            <td>Number</td>
            <td><code>30</code></td>
            <td>The maximum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.maxVisible</td>
            <td>Number</td>
            <td><code>30</code></td>
            <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this
                option. If set to 30, the font will never look larger than size 30 zoomed at 100%.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.drawThreshold</td>
            <td>Number</td>
            <td><code>5</code></td>
            <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
                When using font scaling, you can use this together with the maxVisible to first show labels of important
                edges when zoomed out and only show the rest when zooming in.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.customScalingFunction</td>
            <td>Function</td>
            <td>in description</td>
            <td>If edges have <code>value</code> fields, this function determines how the size of the nodes are scaled
                based on their values. The default function is:
 <pre>
 function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  }
  else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
  }
 }
 </pre>
                The function receives the minimum value of the set, the maximum value, the total sum of all values and
                finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The
                nodes and edges then calculate their size as follows:
 <pre>
 var scale = customScalingFunction(min,max,total,value);
 var diff = maxWidth - minWidth;
 myWidth = minWidth + diff * scale;
 </pre>
            </td>
        </tr>
        <tr>
            <td>selectionWidth</td>
            <td>Number or Function</td>
            <td><code>1</code></td>
            <td>The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied,
                this number will be <b>added</b> to the width.
                Because the width can be altered by the value and the scaling functions, a constant multiplier or added
                value may not give the best results. To solve this, you can supply a function. Example:

 <pre class="code">
 var options: {
  edges: {
    selectionWidth: function (width) {return width*2;}
  }
 }
 </pre>
                It receives the <code>Number width</code> of the edge. In this simple example multiply the width by 2.
                You can taylor the logic in the function as long as it returns a <code>Number</code>.
            </td>
        </tr>
        <tr>
            <td>selfReferenceSize</td>
            <td>Number</td>
            <td><code>false</code></td>
            <td>When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
            <td><span parent="shadow" class="right-caret"></span> shadow</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>When true, the edge casts a shadow using the default settings. This can be further refined by supplying
                an object.
            </td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties
                in this object are defined.
            </td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.size</td>
            <td>Number</td>
            <td><code>10</code></td>
            <td>The blur size of the shadow.</td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.x</td>
            <td>Number</td>
            <td><code>5</code></td>
            <td>The x offset.</td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.y</td>
            <td>Number</td>
            <td><code>5</code></td>
            <td>The y offset.</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','smooth', this);">
            <td><span parent="smooth" class="right-caret"></span> smooth</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than
                that of straight curves but it looks better.
                There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves
                have an invisible support node that takes part in the physics simulation. If you have a lot of edges,
                you may want to consider picking a different type of smooth curves then dynamic for better performance.
            </td>
        </tr>
        <tr parent="smooth" class="hidden">
            <td class="indent">smooth.enabled</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>Toggle smooth curves on and off. This is an optional option. If any of the other properties in this
                object are set, this option will be set to true.
            </td>
        </tr>
        <tr parent="smooth" class="hidden">
            <td class="indent">smooth.type</td>
            <td>String</td>
            <td><code>'dynamic'</code></td>
            <td>Possible options: <code>'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal',
                'vertical', 'curvedCW', 'curvedCCW'</code>. Take a look at our example 26 to see what these look like
                and pick the one that you like best!
                <br><br>
                When using dynamic, the edges will have an invisible support node guiding the shape. This node is part of the
                physics simulation.
            </td>
        </tr>
        <tr parent="smooth" class="hidden">
            <td class="indent">smooth.roundness</td>
            <td>Number</td>
            <td><code>0.5</code></td>
            <td>Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the roundness of the smooth curves for all types EXCEPT dynamic.
            </td>
        </tr>
        <tr>
            <td>title</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>The title is shown in a pop-up when the mouse moves over the edge.</td>
        </tr>
        <tr>
            <td>value</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>When a value is set, the edges' width will be scaled using the options in the scaling object defined
                above.
            </td>
        </tr>
        <tr>
            <td>width</td>
            <td>Number</td>
            <td><code>1</code></td>
            <td>The width of the edge. If value is set, this is not used.</td>
        </tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/groups.html
+++ b/docs/network/groups.html
@ -0,0 +1,158 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../js/toggleTable.js"></script>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <style>

    </style>
 </head>
 <!-- NAVBAR
 ================================================== -->
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>

 <div class="container full">
    <h1>Network - groups</h1>

    <p>Handles the group styling.</p>

    <h3>Options</h3>

    <p>The options for the canvas have to be contained in an object titled 'groups'.</p>
    <p>Click on the options shown to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">options shown</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options hidden" id="fullOptions">
 var options = {
  groups:{
    useDefaultGroups: true,
    myGroupId:{
      /*node options*/
    }
  }
 }

 network.setOptions(options);
 </pre>
    <p>All of the individual options are explained here:</p>
    <table class="options">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>useDefaultGroups</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>If your nodes have groups defined that are not in the Groups module, the module loops over the groups it
                does have, allocating one for each unknown group. When all are used, it goes back to the first group. By
                setting this to false, the default groups will not be used in this cycle.
            </td>
        </tr>
        <tr>
            <td>group*</td>
            <td>Object</td>
            <td><code></code></td>
            <td>
                You can add multiple groups containing styling information that applies to a certain subset of groups.
                All options described in the <a href="./nodes.html">nodes module</a> that make sense can be used here
                (you're not going to set the same id or x,y position for a group of nodes).
                Example:
 <pre class="prettyprint lang-js options">
 var nodes = [
    {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
 ]

 var options = {
  groups: {
    myGroup: {color:{background:'red'}, borderWidth:3}
  }
 }
 </pre>
                *) the option is not called group, as shown by the example but can by any custom id, except for
                'useDefaultGroups'.
            </td>
        </tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/index.html
+++ b/docs/network/index.html
--- a/docs/network/interaction.html
+++ b/docs/network/interaction.html
@ -0,0 +1,148 @@
 <!DOCTYPE html>
 <html lang="en"><head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - interaction</h1>
    <p>Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.</p>

    <h3>Options</h3>
    <p>The options for the interaction module have to be contained in an object titled 'interaction'.</p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  interaction:{
    dragNodes:true,
    dragView: true,
    hideEdgesOnDrag: false,
    hideNodesOnDrag: false,
    hover: false,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
      bindToWindow: true
    },
    navigationButtons: false,
    selectable: true,
    selectConnectedEdges: true,
    tooltipDelay: 300,
    zoomView: true
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // only the options that have shorthand notations are shown.
 var options = {
  interaction:{
    keyboard: false
  }
 }

 network.setOptions(options);
 </pre>

    <p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
    <table class="options" id="optionTable">
        <tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
        <tr><td>dragNodes</td>              <td>Boolean</td>            <td><code>true</code></td>      <td>When true, the nodes that are not fixed can be dragged by the user.</td></tr>
        <tr><td>dragView</td>               <td>Boolean</td>            <td><code>true</code></td>      <td>When true, the view can be dragged around by the user.</td></tr>
        <tr><td>hideEdgesOnDrag</td>        <td>Boolean</td>            <td><code>false</code></td>     <td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
        <tr><td>hideNodesOnDrag</td>        <td>Boolean</td>            <td><code>false</code></td>     <td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
        <tr><td>hover</td>                  <td>Boolean</td>            <td><code>false</code></td>     <td>When true, the nodes use their hover colors when the mouse moves over them.</td></tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','keyboard', this);"><td><span parent="keyboard" class="right-caret"></span> keyboard</td>               <td>Object or Boolean</td>   <td><code>Object</code></td>    <td>When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.enabled</td>       <td>Boolean</td>            <td><code>false</code></td>     <td>Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.x</td>       <td>Number</td>             <td><code>1</code></td>         <td>The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.y</td>       <td>Number</td>             <td><code>1</code></td>         <td>The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.speed.zoom</td>    <td>Number</td>             <td><code>0.02</code></td>      <td>The speed at which the view zooms in or out pressing a key or pressing a navigation button.</td></tr>
        <tr parent="keyboard" class="hidden"><td class="indent">keyboard.bindToWindow</td>  <td>Boolean</td>            <td><code>true</code></td>      <td>When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.</td></tr>
        <tr><td>navigationButtons</td>      <td>Boolean</td>            <td><code>false</code></td>     <td>When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.</td></tr>
        <tr><td>selectable</td>             <td>Boolean</td><td><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
        <tr><td>selectConnectedEdges</td>   <td>Boolean</td><td><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
        <tr><td>tooltipDelay</td>           <td>Number</td>             <td><code>300</code></td>        <td>When nodes or edges have a defined <code>'title'</code> field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.</td></tr>
        <tr><td>zoomView</td>               <td>Boolean</td>            <td><code>true</code></td>      <td>When true, the user can zoom in.</td></tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/layout.html
+++ b/docs/network/layout.html
@ -0,0 +1,132 @@
 <!DOCTYPE html>
 <html lang="en"><head><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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">
 <!-- NAVBAR
 ================================================== -->
 <body>


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - layout</h1>
    <p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>

    <h3>Options</h3>
    <p>The options for the layout module have to be contained in an object titled 'layout'.</p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  layout: {
    randomSeed: undefined,
    hierarchical: {
      enabled:false,
      levelSeparation: 150,
      direction: 'UD',   // UD, DU, LR, RL
      sortMethod: 'hubsize' // hubsize, directed
    }
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // only the options that have shorthand notations are shown.
 var options = {
  layout:{
    hierarchical: true
  }
 }

 network.setOptions(options);
 </pre>
    <p>When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.</p>
    <table class="options" id="optionTable">
        <tr><th>Name</th><th>Type</th><th>Default</th><td>Description</td></tr>
        <tr><td>randomSeed</td><td>Number</td><td><code>undefined</code></td>               <td>When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the <code>getSeed()</code> method to ascertain the seed.</td></tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td>Object or Boolean</td><td><code>Object</code></td>      <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td>Boolean</td><td><code>false</code></td>        <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.levelSeparation</td><td>Number</td><td><code>150</code></td>   <td>The distance between the different levels.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.direction</td><td>String</td><td><code>'UD'</code></td>        <td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.sortMethod</td><td>String</td><td><code>'hubsize'</code></td>  <td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
            Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. <br><br>
            Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.</td></tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/manipulation.html
+++ b/docs/network/manipulation.html
@ -0,0 +1,184 @@
 <!DOCTYPE html>
 <html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - manipulation</h1>
    <p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>

    <h3>Options</h3>
    <p>The options for the manipulation module have to be contained in an object titled 'manipulation'.</p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  manipulation: {
    enabled: false,
    initiallyActive: false,
    addNode: true,
    addEdge: true,
    editNode: undefined,
    editEdge: true,
    deleteNode: true,
    deleteEdge: true,
    controlNodeStyle:{
      // all node options are valid.
    }
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // only the options that have shorthand notations are shown.
 var options = {
  manipulation: false
 }

 network.setOptions(options);
 </pre>
    <table class="options" id="optionTable">
        <tr><th>Name</th><th>Type</th><th>Default</th><td>Description</td></tr>
        <tr><td>enabled</td>                    <td>Boolean</td>                <td><code>false</code></td>     <td>Toggle the manipulation system on or off. This property is optional. If you define any of the options below and enabled is undefined, this will be set to true.</td></tr>
        <tr><td>initiallyActive</td>            <td>Boolean</td>                <td><code>true</code></td>      <td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
        <tr><td>addNode</td>                    <td>Boolean or Function</td>    <td><code>true</code></td>      <td>You can use these options to switch certain functionalities on or off of attach
            a handler function to them. These functions are called before the action is performed. If a node is going to be added through the manipulation system,
            the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do. For all except the editNode functionality, these handler functions are optional.
            <br><br>

            When you supply a boolean, you only toggle the adding of nodes.
            When a function is supplied, it will be called when the user clicks the canvas in 'addNode' mode. This function will receive two variables: the properties of the node that can be created and a callback function. If you call the callback function with the properties of the new node, the node will be added. <br><br> Example:
 <pre class="code">
 var options = {
  manipulation: {
    addNode: function(nodeData,callback) {
      nodeData.label = 'hello world';
      callback(nodeData);
    }
  }
 }
 </pre>
            This function changes the label of the new node into 'hello world'. If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr>
        <tr><td>addEdge</td>                    <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the adding of edges.
             When a function is supplied, it will be called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example:
 <pre class="code">
 var options = {
  manipulation: {
    addEdge: function(edgeData,callback) {
      if (edgeData.from === edgeData.to) {
        var r = confirm("Do you want to connect the node to itself?");
        if (r === true) {
          callback(edgeData);
        }
      }
      else {
        callback(edgeData);
      }
    }
  }
 }
 </pre>
            This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr></td></tr>
        <tr><td>editNode</td>                   <td>Function</td>               <td><code>undefined</code></td> <td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
        <tr><td>editEdge</td>                   <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the editing of edges. When a function is supplied, it will be called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
        <tr><td>deleteNode</td>                 <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the deletion of nodes. If function, it will be called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
        <tr><td>deleteEdge</td>                 <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the deletion of edges. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
        <tr><td>controlNodeStyle</td>           <td>Object</td>     <td>Object</td><td>You can supply any styling information you'd like here. All fields described in <a href="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
 <pre class="code">
 {
  shape:'dot',
  size:6,
  color: {
    background: '#ff0000',
    border: '#3c3c3c',
    highlight: {
      background: '#07f968',
      border: '#3c3c3c'
    }
  },
  borderWidth: 2,
  borderWidthSelected: 2
 }
 </pre></td></tr>
    </table>
 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/nodes.html
+++ b/docs/network/nodes.html
@ -0,0 +1,643 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">

 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>

 <div class="container full">
    <h1>Network - nodes</h1>

    <p>Handles the creation and deletion of nodes and contains the global node options and styles.</p>

    <h3>Options</h3>
    <p>The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined
        in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.</p>
    <p><b><i>When you have given a node an option, you will override the global option for that property. If you then set that option to <code>null</code>,
        it will revert back to the default value.</i></b>
    </p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  nodes:{
    borderWidth: 1,
    borderWidthSelected: undefined,
    brokenImage:undefined,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      },
      hover: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    },
    fixed: {
      x:false,
      y:false
    },
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 0, // px
      strokeColor: '#ffffff',
      align: 'horizontal'
    },
    group: undefined,
    hidden: false,
    icon: {
      face: 'FontAwesome',
      code: undefined,
      size: 50,  //50,
      color:'#2B7CE9'
    },
    image: undefined,
    label: undefined,
    level: undefined,
    mass: 1,
    physics: true,
    scaling: {
      min: 10,
      max: 30,
      label: {
        enabled: false,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          let scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    shadow:{
      enabled: false,
      size:10,
      x:5,
      y:5
    },
    shape: 'ellipse',
    size: 25,
    title: undefined,
    value: undefined,
    x: undefined,
    y: undefined
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // only the options that have shorthand notations are shown.
 var options = {
  nodes:{
    color: '#ff0000',
    fixed: false,
    font: '12px arial red',
    scaling: {
      label: true
    },
    shadow: true
  }
 }
 network.setOptions(options);
 </pre>

    <p>These options can also be set per individual node. All of the individual options are explained here:</p>
    <table class="options" id="optionTable">
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>borderWidth</td>
            <td>Number</td>
            <td><code>1</code></td>
            <td>The width of the border of the node.</td>
        </tr>
        <tr>
            <td>borderWidthSelected</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>The width of the border of the node when it is selected. When undefined, the borderWidth is used</td>
        </tr>
        <tr>
            <td>brokenImage</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option can be an URL to
                a backup image in case the URL supplied in the image option cannot be resolved.
            </td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
            <td><span parent="color" class="right-caret"></span> color</td>
            <td>Object or String</td>
            <td><code>Object</code></td>
            <td>The color object contains the color information of the node in every situation. When the node only needs
                a single color, a color value like <code>'rgba(120,32,14,1)'</code>, <code>'#ffffff'</code> or <code>'red'</code>
                can be supplied instead of an object.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.border</td>
            <td>String</td>
            <td><code>'#2B7CE9'</code></td>
            <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is
                enabled in the interaction module)</i>.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.background</td>
            <td>String</td>
            <td><code>'#D2E5FF'</code></td>
            <td>The color of the background of the node when it is not selected or hovered over <i>(assuming hover is
                enabled in the interaction module)</i>.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.highlight</td>
            <td>Object or String</td>
            <td><code>Object</code></td>
            <td>The color the node when it is selected. Alternatively you can just supply a string color value.</td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent2">color.highlight.border</td>
            <td>String</td>
            <td><code>'#2B7CE9'</code></td>
            <td>The color of the border of the node when it is selected.</td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent2">color.highlight.background</td>
            <td>String</td>
            <td><code>'#D2E5FF'</code></td>
            <td>The color of the background of the node when it is selected.</td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent">color.hover</td>
            <td>Object or String</td>
            <td><code>Object</code></td>
            <td>The color the node when the mouse hovers over it <i>(assuming hover is enabled in the interaction
                module)</i>. Shorthand like above is also supported.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent2">color.hover.border</td>
            <td>String</td>
            <td><code>'#2B7CE9'</code></td>
            <td>The color of the border of the node when the mouse hovers over it <i>(assuming hover is enabled in the
                interaction module)</i>.
            </td>
        </tr>
        <tr parent="color" class="hidden">
            <td class="indent2">color.hover.background</td>
            <td>String</td>
            <td><code>'#D2E5FF'</code></td>
            <td>The color of the background of the node when the mouse hovers over it <i>(assuming hover is enabled in
                the interaction module)</i>.
            </td>
        </tr>

        <tr class='toggle collapsible' onclick="toggleTable('optionTable','fixed', this);">
            <td><span parent="fixed" class="right-caret"></span> fixed</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>When true, the node will not move but IS part of the physics simulation. When defined as an object,
                movement in either X or Y direction can be disabled.
            </td>
        </tr>
        <tr parent="fixed" class="hidden">
            <td class="indent">fixed.x</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>When true, the node will not move in the X direction.</td>
        </tr>
        <tr parent="fixed" class="hidden">
            <td class="indent">fixed.y</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>When true, the node will not move in the Y direction.</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','font', this);">
            <td><span parent="font" class="right-caret"></span> font</td>
            <td>Object or String</td>
            <td><code>false</code></td>
            <td>This object defines the details of the label. A shorthand is also supported in the form <code>'size face
                color'</code> for example: <code>'14px arial red'</code>.
            </td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.color</td>
            <td>String</td>
            <td><code>'#343434'</code></td>
            <td>Color of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.size</td>
            <td>Number</td>
            <td><code>14</code></td>
            <td>Size of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.face</td>
            <td>String</td>
            <td><code>'arial'</code></td>
            <td>Font face (or font family) of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.background</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>When not <code>undefined</code> but a <b>color string</b>, a background rectangle will be drawn behind
                the label in the supplied color.
            </td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.strokeWidth</td>
            <td>Number</td>
            <td><code>0</code></td>
            <td>As an alternative to the background rectangle, a stroke can be drawn around the text. When a value
                higher than 0 is supplied, the stroke will be drawn.
            </td>
        </tr>
        <tr parent="font" class="hidden">
            <td class="indent">font.strokeColor</td>
            <td>String</td>
            <td><code>'#ffffff'</code></td>
            <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
        </tr>
        <tr>
            <td>group</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>When not <code>undefined</code>, the</td>
        </tr>
        <tr>
            <td>hidden</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>When true, the node will not be shown. It will still be part of the physics simulation though!</td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','icon', this);">
            <td><span parent="icon" class="right-caret"></span> icon</td>
            <td>Object</td>
            <td><code>Object</code></td>
            <td>These options are only used when the shape is set to <code>icon</code>.</td>
        </tr>
        <tr parent="icon" class="hidden">
            <td class="indent">icon.face</td>
            <td>String</td>
            <td><code>'FontAwesome'</code></td>
            <td>These options are only used when the shape is set to <code>icon</code>. The possible options for the
                face are: <code>'FontAwesome'</code> and <code>'Ionicons'</code>.
            </td>
        </tr>
        <tr parent="icon" class="hidden">
            <td class="indent">icon.code</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>This is the code of the icon, for example <code>'\uf007'</code>.</td>
        </tr>
        <tr parent="icon" class="hidden">
            <td class="indent">icon.size</td>
            <td>Number</td>
            <td><code>50</code></td>
            <td>The size of the icon.</td>
        </tr>
        <tr parent="icon" class="hidden">
            <td class="indent">icon.color</td>
            <td>String</td>
            <td><code>'#2B7CE9'</code></td>
            <td>The color of the icon.</td>
        </tr>
        <tr>
            <td>id</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
        </tr>
        <tr>
            <td>image</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>When the shape is set to <code>image</code> or <code>circularImage</code>, this option should be the URL
                to an image. If the image cannot be found, the brokenImage option can be used.
            </td>
        </tr>
        <tr>
            <td>label</td>
            <td>String</td>
            <td><code>undefined</code></td>
            <td>The label is the piece of text shown in or under the node, depending on the shape.</td>
        </tr>
        <tr>
            <td>level</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>When using the hierarchical layout, the level determines where the node is going to be positioned.</td>
        </tr>
        <tr>
            <td>mass</td>
            <td>Number</td>
            <td><code>1</code></td>
            <td>The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By
                increasing the mass of a node, you increase it's repulsion. Values lower than 1 are not recommended.
            </td>
        </tr>
        <tr>
            <td>physics</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>When false, the node is not part of the physics simulation. It will not move except for from manual
                dragging.
            </td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','scaling', this);">
            <td><span parent="scaling" class="right-caret"></span> scaling</td>
            <td>Object</td>
            <td><code>Object</code></td>
            <td>If the <code>value</code> option is specified, the size of the nodes will be scaled according to the
                properties in this object. All node shapes can be scaled, but some only when label scaling is enabled as
                their size is based on the size of the label.
                Only scalable when label scaling is enabled are:
                <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
                Always scalable are:
                <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
                <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.min</td>
            <td>Number</td>
            <td><code>10</code></td>
            <td>If nodes have a value, their sizes are determined by the value, the scaling function and the min max
                values. The min value is the minimum allowed value.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.max</td>
            <td>Number</td>
            <td><code>30</code></td>
            <td>This is the maximum allowed size when the nodes are scaled using the value option.</td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.label</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>This can be false if the label is not allowed to scale with the node. If true it will scale using
                default settigns. For further customization, you can supply an object.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of
                the properties in this object are defined.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.min</td>
            <td>Number</td>
            <td><code>14</code></td>
            <td>The minimum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.max</td>
            <td>Number</td>
            <td><code>30</code></td>
            <td>The maximum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.maxVisible</td>
            <td>Number</td>
            <td><code>30</code></td>
            <td>When zooming in, the font is drawn larger as well. You can limit the perceived font size using this
                option. If set to 30, the font will never look larger than size 30 zoomed at 100%.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent2">scaling.label.drawThreshold</td>
            <td>Number</td>
            <td><code>5</code></td>
            <td>When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn.
                When using font scaling, you can use this together with the maxVisible to first show labels of important
                nodes when zoomed out and only show the rest when zooming in.
            </td>
        </tr>
        <tr parent="scaling" class="hidden">
            <td class="indent">scaling.customScalingFunction</td>
            <td>Function</td>
            <td>in description</td>
            <td>If nodes have <code>value</code> fields, this function determines how the size of the nodes are scaled
                based on their values. The default function is:
 <pre>
 function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  }
  else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
  }
 }
 </pre>
                The function receives the minimum value of the set, the maximum value, the total sum of all values and
                finally the value of the node or edge it works on. <b>It has to return a value between 0 and 1.</b> The
                nodes and edges then calculate their size as follows:
 <pre>
 var scale = customScalingFunction(min,max,total,value);
 var diff = maxSize - minSize;
 mySize = minSize + diff * scale;
 </pre>
            </td>
        </tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','shadow', this);">
            <td><span parent="shadow" class="right-caret"></span> shadow</td>
            <td>Object or Boolean</td>
            <td><code>Object</code></td>
            <td>When true, the node casts a shadow using the default settings. This can be further refined by supplying
                an object.
            </td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.enabled</td>
            <td>Boolean</td>
            <td><code>false</code></td>
            <td>Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties
                in this object are defined.
            </td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.size</td>
            <td>Number</td>
            <td><code>10</code></td>
            <td>The blur size of the shadow.</td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.x</td>
            <td>Number</td>
            <td><code>5</code></td>
            <td>The x offset.</td>
        </tr>
        <tr parent="shadow" class="hidden">
            <td class="indent">shadow.y</td>
            <td>Number</td>
            <td><code>5</code></td>
            <td>The y offset.</td>
        </tr>
        <tr>
            <td>shape</td>
            <td>String</td>
            <td><code>'ellipse'</code></td>
            <td>The shape defines what the node looks like. There are two types of nodes. One type has the label inside
                of it and the other type has the label underneath it. The types with the label inside of it are:
                <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
                The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>,
                <code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>,
                <code>triangleDown</code>, <code>square</code> and <code>icon</code>.
            </td>
        </tr>
        <tr>
            <td>size</td>
            <td>Number</td>
            <td><code>25</code></td>
            <td>The size is used to determine the size of node shapes that do not have the label inside of them. These
                shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
                <code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
                <code>icon</code></td>
        </tr>
        <tr>
            <td>title</td>
            <td>String or Element</td>
            <td><code>undefined</code></td>
            <td>Title to be displayed when the user hovers over the node. The title can be an HTML element or a string
                containing plain text or HTML.
            </td>
        </tr>
        <tr>
            <td>value</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>When a value is set, the nodes will be scaled using the options in the scaling object defined above.
            </td>
        </tr>
        <tr>
            <td>x</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>This gives a node an initial x position. When using the hierarchical layout, either the x or y position
                is set by the layout engine depending on the type of view. The other value remains untouched. When using
                stabilization, the stabilized position may be different from the initial one. To lock the node to that
                position use the physics or fixed options.
            </td>
        </tr>
        <tr>
            <td>y</td>
            <td>Number</td>
            <td><code>undefined</code></td>
            <td>This gives a node an initial y position. When using the hierarchical layout, either the x or y position
                is set by the layout engine depending on the type of view. The other value remains untouched. When using
                stabilization, the stabilized position may be different from the initial one. To lock the node to that
                position use the physics or fixed options.
            </td>
        </tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/network/physics.html
+++ b/docs/network/physics.html
@ -0,0 +1,201 @@
 <!DOCTYPE html>
 <html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - physics</h1>
    <p>Handles the physics simulation, moving the nodes and edges to show them clearly.</p>

    <h3>Options</h3>
    <p>The options for the physics have to be contained in an object titled 'physics'.</p>
    <p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="fullOptions"><a href="#">full options</a></li>
        <li role="presentation" onclick="toggleTab(this);" targetNode="shortOptions"><a href="#">shorthand options</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options top hidden" id="fullOptions">
 // these are all options in full.
 var options = {
  physics:{
    barnesHut: {
      gravitationalConstant: -2000,
      centralGravity: 0.3,
      springLength: 95,
      springConstant: 0.04,
      damping: 0.09,
      avoidOverlap: 0
    },
    forceAtlas2Based: {
      theta: 0.5,
      gravitationalConstant: -800,
      centralGravity: 0.01,
      springConstant: 0.08,
      springLength: 100,
      damping: 0.4,
      avoidOverlap: 0
    },
    repulsion: {
      centralGravity: 0.2,
      springLength: 200,
      springConstant: 0.05,
      nodeDistance: 100,
      damping: 0.09
    },
    hierarchicalRepulsion: {
      centralGravity: 0.0,
      springLength: 100,
      springConstant: 0.01,
      nodeDistance: 120,
      damping: 0.09
    },
    maxVelocity: 50,
    minVelocity: 0.1,
    solver: 'barnesHut',
    stabilization: {
      enabled: true,
      iterations: 1000,
      updateInterval: 100,
      onlyDynamicEdges: false,
      fit: true
    },
    timestep: 0.5
  }
 }

 network.setOptions(options);
 </pre>

 <pre class="prettyprint lang-js options top hidden" id="shortOptions">
 // only the options that have shorthand notations are shown.
 var options = {
  physics:{
    stabilization: false
  }
 }
 network.setOptions(options);
 </pre>
    <p>All of the individual options are explained here:</p>
    <table class="options" id="optionTable">
        <tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','barnesHut', this);"><td><span parent="barnesHut" class="right-caret"></span> barnesHut</td>                       <td>Object</td>         <td><code>Object</code></td>    <td>BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.</td></tr>
        <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.gravitationalConstant</td>        <td>Number</td>         <td><code>-2000</code></td>     <td>Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).</td></tr>
        <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.centralGravity</td>               <td>Number</td>         <td><code>0.3</code></td>       <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
        <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springLength</td>                 <td>Number</td>         <td><code>95</code></td>        <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
        <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.springConstant</td>               <td>Number</td>         <td><code>0.04</code></td>      <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
        <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.damping</td>                      <td>Number</td>         <td><code>0.09</code></td>      <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
        <tr parent="barnesHut" class="hidden"><td class="indent">barnesHut.avoidOverlap</td>                 <td>Number</td>         <td><code>0</code></td>         <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr>

        <tr class='toggle collapsible' onclick="toggleTable('optionTable','forceAtlas2Based', this);"><td><span parent="forceAtlas2Based" class="right-caret"></span> forceAtlas2Based</td>    <td>Object</td>         <td><code>Object</code></td>    <td>Force Atlas 2 has been developed by <a href="http://journals.plos.org/plosone/article?id=10.1371/journal.pone.0098679" target="_blank">Jacomi <i>et al</i> (2014)</a> for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided
            by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model,
            which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a
            multiplier based on the amount of connected edges plus one.</td></tr>
        <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.gravitationalConstant</td> <td>Number</td>         <td><code>-50</code></td> <td>This is similar to the barnesHut method except that the falloff is linear instead of quadratic. The connectivity is also taken into account as a factor of the mass. If you want the repulsion to be stronger, decrease the value (so -1000, -2000).</td></tr>
        <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.centralGravity</td>        <td>Number</td>         <td><code>0.01</code></td> <td>There is a central gravity attractor to pull the entire network back to the center. This is not dependent on distance.</td></tr>
        <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springLength</td>          <td>Number</td>         <td><code>100</code></td>  <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
        <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.springConstant</td>        <td>Number</td>         <td><code>0.08</code></td> <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
        <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.damping</td>               <td>Number</td>         <td><code>0.4</code></td>  <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>
        <tr parent="forceAtlas2Based" class="hidden"><td class="indent">forceAtlas2Based.avoidOverlap</td>          <td>Number</td>         <td><code>0</code></td>    <td>Accepted range: <code>[0 .. 1]</code>. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.</td></tr>

        <tr class='toggle collapsible' onclick="toggleTable('optionTable','repulsion', this);"><td><span parent="repulsion" class="right-caret"></span> repulsion</td>                              <td>Object</td>         <td><code>Object</code></td>    <td>The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).</td></tr>
        <tr parent="repulsion" class="hidden"><td class="indent">repulsion.nodeDistance</td>                 <td>Number</td>         <td><code>100</code></td>       <td>This is the range of influence for the repulsion.</td></tr>
        <tr parent="repulsion" class="hidden"><td class="indent">repulsion.centralGravity</td>               <td>Number</td>         <td><code>0.2</code></td>       <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
        <tr parent="repulsion" class="hidden"><td class="indent">repulsion.springLength</td>                 <td>Number</td>         <td><code>200</code></td>       <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
        <tr parent="repulsion" class="hidden"><td class="indent">repulsion.springConstant</td>               <td>Number</td>         <td><code>0.05</code></td>      <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
        <tr parent="repulsion" class="hidden"><td class="indent">repulsion.damping</td>                      <td>Number</td>         <td><code>0.09</code></td>      <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>

        <tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchicalRepulsion', this);"><td><span parent="hierarchicalRepulsion" class="right-caret"></span> hierarchicalRepulsion</td>                  <td>Object</td>         <td><code>Object</code></td>    <td>This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.</td></tr>
        <tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.nodeDistance</td>     <td>Number</td>         <td><code>120</code></td>       <td>This is the range of influence for the repulsion.</td></tr>
        <tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.centralGravity</td>   <td>Number</td>         <td><code>0.0'</code></td>      <td>There is a central gravity attractor to pull the entire network back to the center.</td></tr>
        <tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springLength</td>     <td>Number</td>         <td><code>100</code></td>       <td>The edges are modelled as springs. This springLength here is the the rest length of the spring.</td></tr>
        <tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.springConstant</td>   <td>Number</td>         <td><code>0.01</code></td>      <td>This is how 'sturdy' the springs are. Higher values mean stronger springs.</td></tr>
        <tr parent="hierarchicalRepulsion" class="hidden"><td class="indent">hierarchicalRepulsion.damping</td>          <td>Number</td>         <td><code>0.09</code></td>      <td>Accepted range: <code>[0 .. 1]</code>. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.</td></tr>

        <tr><td>maxVelocity</td>                            <td>Number</td>         <td><code>50</code></td>        <td>The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.</td></tr>
        <tr><td>minVelocity</td>                            <td>Number</td>         <td><code>0.1</code></td>       <td>Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.</td></tr>
        <tr><td>solver</td>                                 <td>String</td>         <td><code>'barnesHut'</code></td><td>You can select your own solver. Possible options: <code>'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'</code>. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.</td></tr>
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td>                          <td>Object | Boolean</td><td><code>Object</code></td>    <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td>                  <td>Boolean</td>        <td><code>true</code></td>       <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td>               <td>Number</td>         <td><code>1000</code></td>       <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td>           <td>Number</td>         <td><code>50</code></td>         <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td>         <td>Boolean</td>        <td><code>false</code></td>      <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.fit</td>                      <td>Boolean</td>        <td><code>true</code></td>       <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
        <tr><td>timestep</td>                               <td>Number</td>         <td><code>0.5</code></td>        <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
    </table>

 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/old/dataset.html
+++ b/docs/old/dataset.html
@ -1,14 +1,14 @@
 <!doctype html>
 <html>

 <head><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>
 <head>
  <title>vis.js | DataSet documentation</title>

  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href='css/old_style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
  <script type="text/javascript" src="js/prettify/prettify.js"></script>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -118,8 +118,7 @@ var data = new vis.DataSet([data] [, options])
 </p>

 <p>
  The parameter <code>data</code> is optional and can be an Array or
  <a href="https://developers.google.com/chart/interactive/docs/reference#DataTable" target="_blank">Google DataTable</a> with items.
  The parameter <code>data</code> is optional and is an Array with items.
 </p>

 <p>
@ -245,10 +244,10 @@ var data = new vis.DataSet([data] [, options])
      get(id [,options] [, data])<br>
      get(ids [, options] [, data])
    </td>
    <td>Object | Array | DataTable</td>
    <td>Object | Array</td>
    <td>
      Get a single item, multiple items, or all items from the DataSet.
      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>.
    </td>
  </tr>

@ -600,10 +599,7 @@ The argument data can contain:
    added. The item must contain an id.
  </li>
  <li>
    An <code>Array</code> or
    <code>google.visualization.DataTable</code> containing
    a list with items to be added. Each item must contain
    an id.
    An <code>Array</code> containing a list with items to be added. Each item must contain an id.
  </li>
 </ul>

@ -635,10 +631,7 @@ The argument data can contain:
    updated. The item must contain an id.
  </li>
  <li>
    An <code>Array</code> or
    <code>google.visualization.DataTable</code> containing
    a list with items to be updated. Each item must contain
    an id.
    An <code>Array</code> containing a list with items to be updated. Each item must contain an id.
  </li>
 </ul>

@ -720,7 +713,7 @@ Syntax:
 </p>

 <pre class="prettyprint lang-js">
 DataSet.get([id] [, options] [, data]);
 DataSet.get([id] [, options]);
 DataSet.getIds([options]);
 DataSet.forEach(callback [, options]);
 DataSet.map(callback [, options]);
@ -786,8 +779,8 @@ DataSet.map(callback [, options]);
  <tr>
      <td>returnType</td>
      <td>String</td>
      <td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
          The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
      <td>Determine the type of output of the get function. Allowed values are <code>'Array' | 'Object'</code>.
          The default returnType is an Array. The Object type will return a JSON object with the ID's as keys.</td>
  </tr>

 </table>
--- a/docs/old/dataview.html
+++ b/docs/old/dataview.html
@ -1,14 +1,14 @@
 <!doctype html>
 <html>

 <head><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>
 <head>
  <title>vis.js | DataView documentation</title>

  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href='css/old_style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
  <script type="text/javascript" src="js/prettify/prettify.js"></script>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -176,10 +176,10 @@ var data = new vis.DataView(dataset, options)
      get(id [,options] [, data])<br>
      get(ids [, options] [, data])
    </td>
    <td>Object | Array | DataTable</td>
    <td>Object | Array</td>
    <td>
      Get a single item, multiple items, or all items from the DataView.
      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. If parameter <code>data</code> is provided, items will be appended to this array or table, which is required in case of Google DataTable.
      Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>.
    </td>
  </tr>

--- a/docs/old/graph3d.html
+++ b/docs/old/graph3d.html
@ -1,13 +1,13 @@
 <html>

 <head><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>
 <head>
  <title>vis.js | graph3d documentation</title>

  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href='../css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='../css/style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
  <script type="text/javascript" src="../js/prettify/prettify.js"></script>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -39,7 +39,7 @@
 <h2 id="Example">Example</h2>
 <p>
  The following code shows how to create a Graph3d and provide it with data.
  More examples can be found in the <a href="../examples">examples</a> directory.
  More examples can be found in the <a href="../../examples">examples</a> directory.
 </p>

 <pre class="prettyprint lang-html">
--- a/docs/old/index.html
+++ b/docs/old/index.html
@ -1,14 +1,14 @@
 <!doctype html>
 <html>

 <head><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>
 <head>
  <title>vis.js | documentation</title>

  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href='css/old_style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
  <script type="text/javascript" src="js/prettify/prettify.js"></script>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -61,7 +61,7 @@
      Plot data on a timeline with lines or barcharts.
    </li>
    <li>
      <a href="graph3d.html"><b>Graph3d</b></a>.
      <a href="old/graph3d.html"><b>Graph3d</b></a>.
      Display data in a three dimensional graph.
    </li>
    <li>
--- a/docs/old/lib/prettify/lang-apollo.js
+++ b/docs/old/lib/prettify/lang-apollo.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
 null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])
--- a/docs/old/lib/prettify/lang-css.js
+++ b/docs/old/lib/prettify/lang-css.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
 ["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])
--- a/docs/old/lib/prettify/lang-hs.js
+++ b/docs/old/lib/prettify/lang-hs.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
 null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])
--- a/docs/old/lib/prettify/lang-lisp.js
+++ b/docs/old/lib/prettify/lang-lisp.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
 null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])
--- a/docs/old/lib/prettify/lang-lua.js
+++ b/docs/old/lib/prettify/lang-lua.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
 ["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])
--- a/docs/old/lib/prettify/lang-ml.js
+++ b/docs/old/lib/prettify/lang-ml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
 ["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])
--- a/docs/old/lib/prettify/lang-proto.js
+++ b/docs/old/lib/prettify/lang-proto.js
@ -0,0 +1 @@
 PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])
--- a/docs/old/lib/prettify/lang-scala.js
+++ b/docs/old/lib/prettify/lang-scala.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
 ["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])
--- a/docs/old/lib/prettify/lang-sql.js
+++ b/docs/old/lib/prettify/lang-sql.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
 null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])
--- a/docs/old/lib/prettify/lang-vb.js
+++ b/docs/old/lib/prettify/lang-vb.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
 null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])
--- a/docs/old/lib/prettify/lang-vhdl.js
+++ b/docs/old/lib/prettify/lang-vhdl.js
@ -0,0 +1,3 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
 null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
 ["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])
--- a/docs/old/lib/prettify/lang-wiki.js
+++ b/docs/old/lib/prettify/lang-wiki.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
 PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])
--- a/docs/old/lib/prettify/lang-yaml.js
+++ b/docs/old/lib/prettify/lang-yaml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
 ["yaml","yml"])
--- a/docs/old/lib/prettify/prettify.css
+++ b/docs/old/lib/prettify/prettify.css
@ -0,0 +1 @@
 .str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
--- a/docs/old/lib/prettify/prettify.js
+++ b/docs/old/lib/prettify/prettify.js
@ -0,0 +1,33 @@
 window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
 (function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
 for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
 8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
 continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
 a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
 g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
 ""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push("                ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
 f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
 if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
 null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
 null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
 null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
 d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
 for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
 function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
 d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
 "&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
 "~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
 la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
 hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
 "htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
 ["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
 hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
 hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
 cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
 u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
 multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
 ["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
 0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
 " "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
 document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
 PR_TAG:"tag",PR_TYPE:S}})()
--- a/docs/old/old_graph2d.html
+++ b/docs/old/old_graph2d.html
@ -1,17 +1,17 @@
 <html>

 <head><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>
 <head>
  <title>vis.js | Graph2d documentation</title>
  <style>
    td.greenField {
      background-color: #c9ffc7;
    }
  </style>
  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href='../css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='../css/style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -55,7 +55,7 @@
 <h2 id="Example">Example</h2>
 <p>
  The following code shows how to create a Graph2d and provide it with data.
  More examples can be found in the <a href="../examples">examples</a> directory.
  More examples can be found in the <a href="../../examples">examples</a> directory.
 </p>

 <pre class="prettyprint lang-html">
@ -100,27 +100,6 @@
 </pre>


 <h2 id="Loading">Loading</h2>

 <p>
  The class name of the Graph2d is <code>vis.Graph2d</code>.
  When constructing a Graph2d, an HTML DOM container must be provided to attach
  the graph to. Optionally, data an options can be provided.
  Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
  section <a href="#Data_Format">Data Format</a>.
  Options is a name-value map in the JSON format. The available options
  are described in section <a href="#Configuration_Options">Configuration Options</a>.
  Groups is a vis <code>DataSet</code> containing groups. The available options and the method of construction
  are described in section <a href="#Group_Options">Data Format</a>.
 </p>
 <pre class="prettyprint lang-js">var graph = new vis.Graph2d(container [, data] [, groups] [, options]);</pre>
 For backwards compatibility, groups and options can be interchanged.

 <p>
  Data, options and groups can be set or changed later on using the functions
  <code>Graph2d.setItems(data)</code>, <code>Graph2d.setOptions(options)</code> and <code>Graph2d.setGroups(groups)</code>.
 </p>

 <h2 id="Data_Format">Data Format</h2>
 <p>
  Graph2d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
@ -296,7 +275,7 @@ The options colored in green can also be used as options for the groups. All opt
  <td class="greenField">yAxisOrientation</td>
  <td>String</td>
  <td>'left'</td>
  <td>This defines with which axis, left or right, the graph is coupled. <a href="../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
  <td>This defines with which axis, left or right, the graph is coupled. <a href="../../examples/graph2d/05_bothAxis.html">Example 5</a> shows groups with different Y axis. If no groups are coupled
    with an axis, it will not be shown.</td>
 </tr>
 <tr>
@ -375,8 +354,8 @@ The options colored in green can also be used as options for the groups. All opt
  <td>'overlap'</td>
  <td>You can choose how graph2d handles the case where barcharts are occupying the same datapoint. The possible options are:
    <code>overlap, sideBySide, stack</code>.
    See <a href="../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
    When using groups, see <a href="../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
    See <a href="../../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
    When using groups, see <a href="../../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
  </td>
 </tr>
 <tr>
@ -395,7 +374,7 @@ The options colored in green can also be used as options for the groups. All opt
  <td class="greenField">catmullRom.parametrization</td>
  <td>String</td>
  <td>'centripetal'</td>
  <td>Define the type of parametrizaion. <a href="../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
  <td>Define the type of parametrizaion. <a href="../../examples/graph2d/07_scrollingAndSorting.html">Example 7</a> shows the different methods. The options are 'centripetal' (best results), 'chordal' and 'uniform'. Uniform is the computationally cheapest variant.
    If catmullRom is disabled, linear interpolation is used.</td>
 </tr>
 <tr>
@ -528,7 +507,7 @@ The options colored in green can also be used as options for the groups. All opt
  <td>Object</td>
  <td></td>
  <td>You can use this to toggle the visibility of groups per graph2D instance. This is different from setting the visibility flag of the groups since
    this is not communicated across instances of graph2d. Take a look at <a href="../examples/graph2d/14_toggleGroups.html">Example 14</a>
    this is not communicated across instances of graph2d. Take a look at <a href="../../examples/graph2d/14_toggleGroups.html">Example 14</a>
    for more explanation.
  </td>
 </tr>
@ -1171,8 +1150,8 @@ Graph2d comes with support for the following locales:
 </p>
 <p>
  Additionally, Graph2d has 10 preset styles for graphs, which are cycled through when loading groups. These styles can be overwritten
  as well, along with defining your own classes to style the graphs! <a href="../examples/graph2d/04_rightAxis.html">Example 4</a> and
  <a href="../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
  as well, along with defining your own classes to style the graphs! <a href="../../examples/graph2d/04_rightAxis.html">Example 4</a> and
  <a href="../../examples/graph2d/05_bothAxis.html">example 5</a> show the usage of custom styles.
 </p>

 <h2 id="Data_Policy">Data Policy</h2>
--- a/docs/old/old_network.html
+++ b/docs/old/old_network.html
@ -1,17 +1,17 @@
 <!doctype html>
 <html>

 <head><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>
 <head>
  <title>vis.js | network documentation</title>

  <link href="css/prettify.css" type="text/css" rel="stylesheet" />
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
  <link href='../css/style.css' type='text/css' rel='stylesheet'>
    <style>td.greenField {
        background-color: #c9ffc7;
    }</style>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -90,7 +90,7 @@

 <p>
  More examples can be found in the
  <a href="../examples" target="_blank">examples directory</a>.
  <a href="../../examples" target="_blank">examples directory</a>.
 </p>

 <pre class="prettyprint lang-html">&lt;!doctype html&gt;
@ -484,83 +484,6 @@ var network = new vis.Network(container, data);

 <h3 id="Gephi_import">Gephi import (JSON)</h3>

 <p>
  network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
  <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
  An example exists showing how to get a JSON file into Vis: <a href="../examples/network/30_importing_from_gephi.html">30_importing_from_gephi</a>.
 </p>

 <p>
  Example usage:
 </p>

 <pre class="prettyprint lang-js">
 // load the JSON file containing the Gephi network.
 var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30

 // create a data object with the gephi key:
 var data = {
  gephi: gephiJSON
 };

 // create a network
 var network = new vis.Network(container, data);
 </pre>
 Alternatively you can use the parser manually:
 <pre class="prettyprint lang-js">
 // load the JSON file containing the Gephi network.
 var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30

 // parse the gephi file to receive an object
 // containing nodes and edges in vis format.
 var parsed = vis.network.gephiParser.parseGephi(gephiJSON);

 // provide data in the normal fashion
 var data = {
  nodes: parsed.nodes,
  edged: parsed.edges
 };

 // create a network
 var network = new vis.Network(container, data);
 </pre>

 <h4>Gephi parser options</h4>

 There are a few options you can use to tell Vis what to do with the data from Gephi.

 <pre class="prettyprint lang-js">
 var parserOptions = {
  allowedToMove: false,
  parseColor: false
 }
 var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions);
 </pre>
 <table>
  <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>

  <tr>
    <td>allowedToMove</td>
    <td>Boolean</td>
    <td>false</td>
    <td>
      If true, the nodes will move according to the physics model after import. If false, the nodes do not move at all.
    </td>
  </tr>
  <tr>
    <td>parseColor</td>
    <td>Boolean</td>
    <td>false</td>
    <td>
      If true, the color will be parsed by the vis parser, generating extra colors for the borders, highlighs and hover. If false, the node will be the supplied color.
    </td>
  </tr>
 </table>

 <h2 id="Configuration_options">Configuration options</h2>

@ -1288,7 +1211,7 @@ var options = {
      <td class="greenField">labelAlignment</td>
      <td>String</td>
      <td>horizontal</td>
      <td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge. 
      <td>Possible values: <code>"top", "middle", "bottom", "horizontial"</code>. The alignment of the label when drawn on the edge.
 	  If <code>horizontal</code> it will align the label absolute horizontial.</td>
  </tr>
    <tr>
--- a/docs/old/old_network/canvas.html
+++ b/docs/old/old_network/canvas.html
@ -0,0 +1,214 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/newdocs.css" rel="stylesheet">

    <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../js/toggleTable.js"></script>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

 </head>
 <!-- NAVBAR
 ================================================== -->
 <body onload="prettyPrint();">

 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="../index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="../blog.html">Blog</a></li>
                        <li><a href="../index.html#download_install">Download</a></li>
                        <li><a href="../showcase/index.html">Showcase</a></li>
                        <li><a href="../index.html#contribute">Contribute</a></li>
                        <li><a href="../featureRequests.html">Feature requests</a></li>
                        <li><a href="../index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
 </div>

 <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>

 <div class="container full">
    <h1>Network - canvas</h1>

    <p>Handles the HTML part of the canvas.</p>

    <h3>Options</h3>

    <p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
    <p>Click on the options shown to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options hidden" id="fullOptions">
 var options = {
  canvas:{
    width:'100%',  // other format: '400px'
    height:'100%',
    autoResize: true
  }
 }

 network.setOptions(options);
 </pre>
    <p>All of the individual options are explained here:</p>
    <table>
        <tr class="header">
            <td class="name">name</td>
            <td class="type">type</td>
            <td class="default">default</td>
            <td class="description">description</td>
        </tr>
        <tr>
            <td>width</td>
            <td class="mid">String</td>
            <td class="mid"><code>'100%'</code></td>
            <td>the width of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
        </tr>
        <tr>
            <td>height</td>
            <td class="mid">String</td>
            <td class="mid"><code>'100%'</code></td>
            <td>the height of the canvas. Can be in percentages or pixels (ie. <code>'400px'</code>).</td>
        </tr>
        <tr>
            <td>autoResize</td>
            <td class="mid">Boolean</td>
            <td class="mid"><code>true</code></td>
            <td>If true, the Network will automatically detect when its container is resized, and redraw itself
                accordingly. If false, the Network can be forced to repaint after its container has been resized
                using the function redraw() and setSize().</td>
        </tr>
    </table>

    <h3>Methods</h3>

    <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the
        setOptions method of the network itself and use the module name as an object name.</p>
    <table>
        <tr class="header">
            <td class="methodName">name</td>
            <td>returns</td>
            <td>description</td>
        </tr>
        <tr>
            <td>setSize(<br>&nbsp;&nbsp;&nbsp;<code><i>String width</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>String
                height</i></code><br>)
            </td>
            <td class="mid">none</td>
            <td>Set the size of the canvas. This is automatically done on a window resize.</td>
        </tr>
        <tr>
            <td>canvasToDOM({<br>&nbsp;&nbsp;&nbsp;<code><i>x: Number</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>y:
                Number</i></code><br>})
            </td>
            <td class="mid">Object</td>
            <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of
                <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
            </td>
        </tr>
        <tr>
            <td>DOMtoCanvas({<br>&nbsp;&nbsp;&nbsp;<code><i>x: Number</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>y:
                Number</i></code><br>})
            </td>
            <td class="mid">Object</td>
            <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of
                <code>{x:Number,y:Number}</code>. The DOM values are relative to the network container.
            </td>
        </tr>
    </table>

    <h3>Events</h3>

    <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
    <table>
        <tr class="header">
            <td class="eventName">name</td>
            <td class="eventProperties">properties</td>
            <td>description</td>
        </tr>
        <tr>
            <td>resize</td>
            <td class="mid">
 <pre class="code">
 {
  width: Number     // the new width  of the canvas
  height: Number    // the new height of the canvas
  oldWidth: Number  // the old width  of the canvas
  oldHeight: Number // the old height of the canvas
 }
 </pre>
                <ul>
                </ul>
            </td>
            <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div has
                changed in size, a setSize() call with new values or a setOptions() with new width and/or height values.
            </td>

        </tr>
    </table>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/old/old_network/clustering.html
+++ b/docs/old/old_network/clustering.html
@ -0,0 +1,183 @@
 <!DOCTYPE html>
 <html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/newdocs.css" rel="stylesheet">

    <link href="../css/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <style>
        td.properties {
            width:350px;
        }

        td.name {
            width:180px;
        }

    </style>
 </head>
 <!-- NAVBAR
 ================================================== -->
 <body onload="prettyPrint();">

 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="../index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon" src="../img/external-link-icons/external-link-icon-white.png"></a></li>
                        <li><a href="../blog.html">Blog</a></li>
                        <li><a href="../index.html#download_install">Download</a></li>
                        <li><a href="../showcase/index.html">Showcase</a></li>
                        <li><a href="../index.html#contribute">Contribute</a></li>
                        <li><a href="../featureRequests.html">Feature requests</a></li>
                        <li><a href="../index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - clustering</h1>
    <p>Handles the HTML part of the canvas.</p>

    <h3>Options</h3>
    <p>Clustering has no options, everything is done with methods.</p>


    <h3>Methods</h3>
    <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
    <table>
        <tr class="header"><td class="name">name</td><td>returns</td><td>description</td></tr>
        <tr><td>findNode(<br>
            &nbsp;&nbsp;<code>String nodeId</code><br>)</td>   <td class="mid">Array</td>   <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example: <br>
            cluster 'A' contains cluster 'B',<br>
            cluster 'B' contains cluster 'C',<br>
            cluster 'C' contains node 'fred'.<br>
            <code>network.clustering.findNode('fred')</code> will return <code>['A','B','C','fred']</code>.
        </td></tr>
        <tr><td>isCluster(<br>
            &nbsp;&nbsp;<code>String nodeId</code><br>)</td>   <td class="mid">Boolean</td> <td>Returns true if the node whose ID has been supplied is a cluster.</td></tr>
        <tr><td>openCluster(<br>&nbsp;&nbsp;
            <code>String nodeId</code><br>)</td>               <td class="mid">none</td>    <td>Opens the cluster, releases the contained nodes and edges, removing the cluster node and cluster edges.</td></tr>
        <tr><td>cluster(<br>&nbsp;&nbsp;
            <code>Object options</code><br>)</td>              <td class="mid">none</td>    <td>The options object is explained in full <a data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }" href="#optionsObject">below</a>. The joinCondition function is presented with all nodes.</td></tr>
        <tr><td>clusterByConnection(<br>
            &nbsp;&nbsp;<code>String nodeId</code>,<br>
            &nbsp;&nbsp;<code>[Object options]</code><br>
            )</td>                                             <td class="mid">none</td>    <td>This method looks at the provided node and makes a cluster of it and all it's connected nodes. The behaviour can be customized by proving the options object. All options of this object are explained <a data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }" href="#optionsObject">below</a>. The joinCondition is only presented with the connected nodes.</td></tr>
        <tr><td>clusterByHubsize(<br>
            &nbsp;&nbsp;<code>Number hubsize</code>,<br>
            &nbsp;&nbsp;<code>[Object options]</code><br>)</td><td class="mid">none</td>    <td>This method checks all nodes in the network and those with a equal or higher amount of edges than specified with the <code>hubsize</code> qualify. Cluster by connection is performed on each of them. The options object is described for <code>clusterByConnection</code> and does the same here.</td></tr>

        <tr><td>clusterOutliers(<br>
            &nbsp;&nbsp;<code>[Object options]</code><br>)</td><td class="mid">none</td>    <td>This method will cluster all nodes with 1 edge with their respective connected node.</td></tr>
    </table>
    <br>
    <h4 id="optionsObject">Cluster options object</h4>
    <p>The options object supplied to the cluster functions can contain these properties:</p>
    <table>
        <tr class="header"><td class="name">name</td><td>Type</td><td>description</td></tr>
        <tr><td>joinCondition(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td>     <td class="mid">Function</td>
            <td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument.
                If this function returns true, this node will be added to the cluster. You have access to all options (including the default)
                as well as any custom fields you may have added to the node to determine whether or not to include it in the cluster. Example:
 <pre class="prettyprint lang-js">
 var nodes = [
  {id: 4, label: 'Node 4'},
  {id: 5, label: 'Node 5'},
  {id: 6, label: 'Node 6', cid:1},
  {id: 7, label: 'Node 7', cid:1}
 ]

 var options = {
  joinCondition:function(nodeOptions) {
    return nodeOptions.cid === 1;
  }
 }

 network.clustering.cluster(options);
 </pre></td></tr>
        <tr><td>processProperties(<br>&nbsp;&nbsp;<code>Object nodeOptions</code><br>)</td> <td class="mid">Function</td>   <td><i>Optional. </i> Before creating the new cluster node, this (optional) function will be called with the properties supplied by you (<code>clusterNodeProperties</code>), all contained nodes and all contained edges. You can use this to update the
                                                                                                                                properties of the cluster based on which items it contains. The function should return the properties to create the cluster node. In the example below, we ensure preservation of mass and value when forming the cluster:
 <pre class="prettyprint lang-js">
 var options = {
  processProperties: function (clusterOptions, childNodes, childEdges) {
    var totalMass = 0;
    var totalValue = 0;
    for (var i = 0; i < childNodes.length; i++) {
        totalMass += childNodes[i].mass;
        totalValue = childNodes[i].value ? totalValue + childNodes[i].value : totalValue;
    }
    clusterOptions.mass = totalMass;
    if (totalValue > 0) {
      clusterOptions.value = totalValue;
    }
    return clusterOptions;
  },
 }
 </pre></td></tr>
        <tr><td>clusterNodeProperties</td>    <td class="mid">Object</td>     <td><i>Optional. </i> This is an object containing the options for the cluster node. All options described in the <a href="./nodes.html">nodes module</a> are allowed. This allows you to style your cluster node any way you want. This is also the style object that is provided in the processProperties function for fine tuning. If undefined, default node options will be used.</td></tr>
        <tr><td>clusterEdgeProperties</td>    <td class="mid">Object</td>     <td><i>Optional. </i> This is an object containing the options for the edges connected to the cluster. All options described in the <a href="./edges.html">edges module</a> are allowed. Using this, you can style the edges connecting to the cluster any way you want. If none are provided, the optoins from the edges that are replaced are used. If undefined, default edge options will be used.</td></tr>
    </table>
    <p>

    </p>

    <br><br>
    <h3>Events</h3>
    <p>The clustering module does not have any events.</p>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/old/old_network/rendering.html
+++ b/docs/old/old_network/rendering.html
@ -0,0 +1,130 @@
 <!DOCTYPE html>
 <html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/newdocs.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - rendering</h1>
    <p>Handles the rendering aspect of vis. It governs the render loop, it draws the nodes and edges and provides events to allow users to hook into the drawing.</p>

    <h3>Options</h3>
    <p>The options for the rendering have to be contained in an object titled 'rendering'.</p>
    <p>Click on the options shown to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options hidden" id="fullOptions">
 var options = {
  rendering:{
    hideEdgesOnDrag: true,
    hideNodesOnDrag: false
  }
 }

 network.setOptions(options);
 </pre>
    <p>All of the individual options are explained here:</p>
    <table>
        <tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr>
        <tr><td>hideEdgesOnDrag</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td><td>When true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
        <tr><td>hideNodesOnDrag</td><td class="mid">Boolean</td><td class="mid"><code>false</code></td><td>When true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.</td></tr>
    </table>

    <h3>Methods</h3>
    <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
    <table>
        <tr class="header"><td>name</td><td>returns</td><td>description</td></tr>
        <tr><td>redraw()</td><td class="mid">none</td><td>Redraw the network.</td></tr>
    </table>

    <h3>Events</h3>
    <p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p>
    <table>
        <tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr>
        <tr><td>initRedraw</td><td class="mid">none</td><td>Fired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.</td>
        <tr><td>beforeDrawing</td><td class="mid"><code>canvas context</code></td><td>Fired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.</td>
        <tr><td>initRedraw</td><td class="mid"><code>canvas context</code></td><td>Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.</td></tr>
    </table>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/old/old_network/selection.html
+++ b/docs/old/old_network/selection.html
@ -0,0 +1,138 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/newdocs.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - selection</h1>
    <p>Handles the selection of nodes and edges.</p>

    <h3>Options</h3>
    <p>The options for the selection have to be contained in an object titled 'selection'.</p>
    <p>Click on the options shown to show how these options are supposed to be used.</p>
    <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
        <li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
    </ul>
    <br>
 <pre class="prettyprint lang-js options hidden" id="fullOptions">
 var options = {
  selection:{
    selectable: true,
    selectConnectedEdges: false
  }
 }

 network.setOptions(options);
 </pre>
    <p>All of the individual options are explained here:</p>
    <table>
        <tr class="header"><td>name</td><td>type</td><td>default</td><td>description</td></tr>
        <tr><td>selectable</td>             <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, the nodes and edges can be selected by the user.</td></tr>
        <tr><td>selectConnectedEdges</td>   <td class="mid">Boolean</td><td class="mid"><code>true</code></td><td>When true, on selecting a node, its connecting edges are highlighted.</td></tr>
    </table>

    <h3>Methods</h3>
    <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
    <table>
        <tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr>
        <tr><td>getSelection()</td>             <td class="mid">
 <pre class="code">
 {
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds]
 }</pre> </td><td>Returns an object with selected nodes and edges ids.</td></tr>

        <tr><td>getSelectedNodes()</td>         <td class="mid"><code>[nodeId1, nodeId2, ..]</code></td><td>Returns an array of selected node ids.</td></tr>
        <tr><td>getSelectedEdges()</td>         <td class="mid"><code>[edgeId1, edgeId2, ..]</code></td><td>Returns an array of selected edge ids.</td></tr>
        <tr><td>getNodeAt(<br>&nbsp;&nbsp;&nbsp;<code><i>{x: xPosition DOM,<br>&nbsp;&nbsp; y: yPosition DOM}</i></code><br>)</td>         <td class="mid">nodeId</td><td>Returns a nodeId or undefined. The DOM positions are expected to be in pixels from the top left corner of the canvas.</td></tr>
        <tr><td>getEdgeAt(<br>&nbsp;&nbsp;&nbsp;<code><i>{x: xPosition DOM,<br>&nbsp;&nbsp; y: yPosition DOM}</i></code><br>)</td>         <td class="mid">edgeId</code></td><td>Returns a edgeId or undefined. The DOM positions are expected to be in pixels from the top left corner of the canvas..</td></tr>
        <tr><td>selectNodes(<br>&nbsp;&nbsp;&nbsp;<code><i>Array with nodeIds</i></code>,<br>&nbsp;&nbsp;&nbsp;<code><i>[Boolean highlightEdges]</i></code><br>)</td>  <td class="mid">none</td><td>Selects the nodes corresponding to the id's in the input array. If highlightEdges is true or undefined, the neighbouring edges will also be selected. This method unselects all other objects before selecting its own objects. <i>Does not fire events</i>.</td></tr>
        <tr><td>selectEdges(<br>&nbsp;&nbsp;&nbsp;<code><i>Array with edgeIds</i></code><br>)</td>      <td class="mid">none</td><td>Selects the edges corresponding to the id's in the input array. This method unselects all other objects before selecting its own objects. <i>Does not fire events</i>.</td></tr>
        <tr><td>unselectAll()</td>               <td class="mid">none</td>                              <td>Unselect all objects. <i>Does not fire events</i>.</td></tr>
    </table>

    <h3>Events</h3>
    <p>The selection handler does not fire events. All related events are fired by the <a href="./interaction.html">interaction module</a> because they are triggered by user interaction.</p>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>
--- a/docs/old/old_network/view.html
+++ b/docs/old/old_network/view.html
@ -0,0 +1,164 @@
 <!DOCTYPE html>
 <html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" HREF="favicon.ico">
    <title>vis.js - A dynamic, browser based visualization library.</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.css" rel="stylesheet">
    <link href="../css/newdocs.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../js/googleAnalytics.js"></script>
    <script type="text/javascript" src="../js/prettify/prettify.js"></script>

    <script src="../js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
        smoothScroll.init();
    </script>

    <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">


 <div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
                        <li class="active"><a href="./docs/index.html" target="_blank">Documentation <img class="icon"
                                                                                                          src="../img/external-link-icons/external-link-icon-white.png"></a>
                        </li>
                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                        <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                        <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                        <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
                        <li><a href="http://www.visjs.org/featureRequests.html">Feature requests</a></li>
                        <li><a href="http://www.visjs.org/index.html#licenses">License</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
 </div>

 <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>
 <div class="container full">
    <h1>Network - view</h1>
    <p>Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.</p>

    <h3>Options</h3>
    <p>The view has no options.</p>

    <h3>Methods</h3>
    <p>This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.</p>
    <table>
        <tr class="header"><td class="methodName">name</td><td>returns</td><td>description</td></tr>
        <tr><td>getScale()</td>      <td class="mid">Number</td><td>Returns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.</td></tr>
        <tr><td>getPosition()</td>   <td class="mid">Number</td><td>Returns the current central focus point of the camera.</td></tr>
        <tr><td>fit(<code>[Object options]</code>)</td><td class="mid">none</td><td>Zooms out so all nodes fit on the canvas. You can supply options to customize this:
 <pre class="code">
 {
  nodes:[Array of nodeIds],
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
 }
 </pre>
            The nodes can be used to zoom to fit only specific nodes in the view. <br /><br />
            The other options are explained in the <code>moveTo()</code> description below.
            All options are optional for the fit method.
        </td></tr>
        <tr><td>focus(<br>
            &nbsp;&nbsp;&nbsp;<code>String nodeId</code>,<br>
            &nbsp;&nbsp;&nbsp;<code>[Object options]</code><br>)</td><td class="mid">none</td>
            <td>You can focus on a node with this function. What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken.
                You can supply options to customize the effect:
 <pre class="code">
 {
  scale: Number,
  offset: {x:Number, y:Number}
  locked: boolean
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
 }
 </pre>
        All options except for locked are explained in the <code>moveTo()</code> description below. Locked denotes whether or not the view remains locked to the node once the zoom-in animation is finished. Default value is true. The options object is optional in the focus method.</td></tr>
        <tr><td>moveTo(<code>Object options</code>)</td>      <td class="mid">none</td><td>You can animate or move the camera using the moveTo method. Options are:
 <pre class="code">
 {
  position: {x:Number, y:Number},
  scale: Number,
  offset: {x:Number, y:Number}
  animation: { // -------------------> can be a boolean too!
    duration: Number
    easingFunction: String
  }
 }
 </pre>
            The position (in canvas units!) is the position of the central focus point of the camera. <br><br>
            The scale is the target zoomlevel. Default value is 1.0. <br><br>
            The offset (in DOM units) is how many pixels from the center the view is focussed.  Default value is {x:0,y:0}.<br><br>
            For animation you can either use a Boolean to use it with the default options or disable it or you can define the duration (in milliseconds) and easing function manually. Available are:
            <code>linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint</code>. <br><br>
            <i>You will have to define at least a scale or a position. Otherwise, there is nothing to move to.</i>
        </td></tr>



    <tr><td>releaseNode()</td><td class="mid">none</td><td>Programatically release the focussed node.</td></tr>


    </table>

    <h3>Events</h3>
    <p>These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.</p>
    <table>
        <tr class="header"><td>name</td><td class="properties">properties</td><td>description</td></tr>
        <tr><td>animationFinished</td><td class="mid">none</td><td>Fired when an animation is finished.</td>
    </table>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
 </div>

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
 <script src="../js/jquery.min.js"></script>
 <script src="../js/bootstrap.min.js"></script>
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../js/ie10-viewport-bug-workaround.js"></script>

--- a/docs/old/old_timeline.html
+++ b/docs/old/old_timeline.html
@ -1,13 +1,13 @@
 <html>

 <head><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>
 <head>
  <title>vis.js | timeline documentation</title>

  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='css/style.css' type='text/css' rel='stylesheet'>
  <link href='../css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='../css/style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
 <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></head>

 <body onload="prettyPrint();">
 <div id="container">
@ -52,7 +52,7 @@
 <h2 id="Example">Example</h2>
 <p>
  The following code shows how to create a Timeline and provide it with data.
  More examples can be found in the <a href="../examples">examples</a> directory.
  More examples can be found in the <a href="../../examples">examples</a> directory.
 </p>

 <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
@ -706,19 +706,6 @@ var options = {
    <td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
 </tr>

 <tr>
    <td>padding</td>
    <td>Number</td>
    <td>5</td>
    <td>The padding of items, needed to correctly calculate the size
        of item ranges. Must correspond with the css of items, for example when setting <code>options.padding=10</code>, corresponding css is:
  <pre class="prettyprint lang-css">
 .vis.timeline .item {
  padding: 10px;
 }</pre>
    </td>
 </tr>

 <tr>
    <td>selectable</td>
    <td>Boolean</td>
@ -733,13 +720,6 @@ var options = {
    <td>Show a vertical bar at the current time.</td>
 </tr>

 <tr>
    <td>showCustomTime</td>
    <td>boolean</td>
    <td>false</td>
    <td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
 </tr>

 <tr>
 <tr>
    <td>showMajorLabels</td>
@ -877,24 +857,13 @@ var options = {
  </tr>

  <tr>
    <td>addCustomTime(time[, id])</td>
    <td>addCustomTime([time] [, id])</td>
    <td>Number | String</td>
    <td>
      Only applicable when the option showCustomTime is true.<br>
      Add new vertical bar representing custom time that can be dragged by the user. Parameter <code>time</code> can be a Date, Number, or String. Parameter <code>id</code> can be Number or String. If <code>id</code> is provided, it will be used as ID for the new vertical bar, otherwise the ID will be auto generated.<br>
      Returns ID of the newly created bar.
    </td>
  </tr>
  <tr>
    <td>clear([what])</td>
    <td>none</td>
    <td>
      Clear the Timeline. An object can be passed specifying which sections to clear: items, groups,
      and/or options. By Default, items, groups and options are cleared, i.e. <code>what = {items: true, groups: true, options: true}</code>. Example usage:

 <pre class="prettyprint lang-js">timeline.clear();                // clear items, groups, and options
 timeline.clear({options: true}); // clear options only
 </pre>
      Add new vertical bar representing a custom time that can be dragged by the user.
      Parameter <code>time</code> can be a Date, Number, or String, and is <code>new Date()</code> by default.
      Parameter <code>id</code> can be Number or String and is <code>undefined</code> by default.<br>
      Returns id of the created bar.
    </td>
  </tr>

@ -911,7 +880,8 @@ timeline.clear({options: true}); // clear options only
    <td>Adjust the visible window such that it fits all items. See also function <code>focus(id)</code>.
      Available options:
      <ul>
        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
        <li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.
          </li>
      </ul>
    </td>
  </tr>
@ -921,7 +891,7 @@ timeline.clear({options: true}); // clear options only
    <td>none</td>
    <td>Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function <code>fit()</code>. Available options:
      <ul>
        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
        <li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
      </ul>
    </td>
  </tr>
@ -936,7 +906,7 @@ timeline.clear({options: true}); // clear options only
  <tr>
    <td>getCustomTime([id])</td>
    <td>Date</td>
    <td>Retrieve the custom time. Only applicable when the option <code>showCustomTime</code> is true. If parameter <code>id</code> is provided, time of the custom time bar under that ID is returned.
    <td>Retrieve the custom time from the custom time bar with given id. Id is <code>undefined</code> by default.
    </td>
  </tr>

@ -983,7 +953,7 @@ timeline.clear({options: true}); // clear options only
    <td>none</td>
    <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
      <ul>
        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
        <li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
      </ul>
    </td>
  </tr>
@ -1028,7 +998,20 @@ timeline.clear({options: true}); // clear options only
  <tr>
    <td>setCustomTime(time [, id])</td>
    <td>none</td>
    <td>Adjust the custom time bar. Only applicable when the option <code>showCustomTime</code> is true. Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string. Parameter <code>id</code> represents ID of the custom time bar, provided by <code>addCustomTime</code> method and can be a Number or String.
    <td>Adjust the time of a custom time bar.
      Parameter <code>time</code> can be a Date object, numeric timestamp, or ISO date string.
      Parameter <code>id</code> is the idof the custom time bar, and is <code>undefined</code> by default.
    </td>
  </tr>

  <tr>
    <td>setData({<br>&nbsp;&nbsp;groups: groups,<br>&nbsp;&nbsp;items: items<br>})</td>
    <td>none</td>
    <td>Set both groups and items at once. Both properties are optional. This is a convenience method for individually calling both <code>setItems(items)</code> and <code>setGroups(groups)</code>.
      Both <code>items</code> and <code>groups</code> can be an Array with Objects,
      a DataSet, or a DataView. For each of the groups, the items of the
      timeline are filtered on the property <code>group</code>, which
      must correspond with the id of the group.
    </td>
  </tr>

@ -1065,7 +1048,7 @@ timeline.clear({options: true}); // clear options only
    <td>Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
      <ul>
        <li><code>focus: boolean</code><br>If true, focus will be set to the selected item(s)</li>
        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms. Only applicable when option focus is true.</li>
        <li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Only applicable when option focus is true. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
      </ul>
    </td>
  </tr>
@ -1075,7 +1058,7 @@ timeline.clear({options: true}); // clear options only
    <td>none</td>
    <td>Set the current visible window. The parameters <code>start</code> and <code>end</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. If the parameter value of <code>start</code> or <code>end</code> is null, the parameter will be left unchanged. Available options:
      <ul>
        <li><code>animate: boolean | number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
        <li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is <code>'easeInOutQuad'</code>. Available easing functions: <code>"linear"</code>, <code>"easeInQuad"</code>, <code>"easeOutQuad"</code>, <code>"easeInOutQuad"</code>, <code>"easeInCubic"</code>, <code>"easeOutCubic"</code>, <code>"easeInOutCubic"</code>, <code>"easeInQuart"</code>, <code>"easeOutQuart"</code>, <code>"easeInOutQuart"</code>, <code>"easeInQuint"</code>, <code>"easeOutQuint"</code>, <code>"easeInOutQuint"</code>.</li>
      </ul>
    </td>
  </tr>
@ -1083,6 +1066,7 @@ timeline.clear({options: true}); // clear options only
 </table>



 <h2 id="Events">Events</h2>
 <p>
  Timeline fires events when changing the visible window by dragging, when
@ -1167,15 +1151,6 @@ timeline.off('select', onSelect);
    </td>
  </tr>

  <tr>
    <td>finishedRedraw</td>
    <td>Fired after a redraw is complete. When moving the timeline around, this could be fired frequently.
    </td>
    <td>
      none.
    </td>
  </tr>

  <tr>
    <td>rangechange</td>
    <td>Fired repeatedly when the timeline window is being changed.
@ -1222,8 +1197,8 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number | String): Vertical bar ID.</li>
        <li><code>time</code> (Date): the current time.</li>
        <li><code>id</code> (Number | String): custom time bar id.</li>
        <li><code>time</code> (Date): the custom time.</li>
      </ul>
    </td>
  </tr>
@ -1235,8 +1210,8 @@ timeline.off('select', onSelect);
    </td>
    <td>
      <ul>
        <li><code>id</code> (Number | String): Vertical bar ID.</li>
        <li><code>time</code> (Date): the current time.</li>
        <li><code>id</code> (Number | String): custom time bar id.</li>
        <li><code>time</code> (Date): the custom time.</li>
      </ul>
    </td>
  </tr>
@ -1311,7 +1286,7 @@ var options = {
 };
 </pre>

 A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
 A full example is available here: <a href="../../examples/timeline/08_manipulation_callbacks.html">08_edit_items.html</a>.


 <h2 id="Templates">Templates</h2>
@ -1456,7 +1431,7 @@ To load a locale into the Timeline not supported by default, one can add a new l
 <p>For example, to change the border and background color of all items, include the
  following code inside the head of your html code or in a separate stylesheet.</p>
 <pre class="prettyprint lang-html">&lt;style&gt;
  .vis.timeline .item {
  .vis-item {
    border-color: orange;
    background-color: yellow;
  }
@ -1484,10 +1459,10 @@ To load a locale into the Timeline not supported by default, one can add a new l
    <td>Current date</td><td><code>today</code>, <code>tomorrow</code>, <code>yesterday</code>, <code>current-week</code>, <code>current-month</code>, <code>current-year</code></td>
  </tr>
  <tr>
    <td>Hours</td><td><code>0h</code>, <code>1h</code>, ..., <code>23h</code></td>
    <td>Hours</td><td><code>h0</code>, <code>h1</code>, ..., <code>h23</code></td>
  </tr>
  <tr>
    <td>Grouped hours</td><td><code>0-4h</code> to <code>20-24h</code></td>
    <td>Grouped hours</td><td><code>h0-h4</code> to <code>h20-h24</code></td>
  </tr>
  <tr>
    <td>Weekday</td><td><code>monday</code>, <code>tuesday</code>, <code>wednesday</code>, <code>thursday</code>, <code>friday</code>, <code>saturday</code>, <code>sunday</code></td>
@ -1507,17 +1482,17 @@ To load a locale into the Timeline not supported by default, one can add a new l

  <pre class="prettyprint lang-html">&lt;style&gt;
  /* alternating column backgrounds */
  .vis.timeline .timeaxis .grid.odd {
  .vis-time-axis .grid.odd {
    background: #f5f5f5;
  }

  /* gray background in weekends, white text color */
  .vis.timeline .timeaxis .grid.saturday,
  .vis.timeline .timeaxis .grid.sunday {
  .vis-time-axis .vis-grid.saturday,
  .vis-time-axis .vis-grid.sunday {
    background: gray;
  }
  .vis.timeline .timeaxis .text.saturday,
  .vis.timeline .timeaxis .text.sunday {
  .vis-time-axis .vis-text.saturday,
  .vis-time-axis .vis-text.sunday {
    color: white;
  }
 &lt;/style&gt;
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
--- a/examples/googleAnalytics.js
+++ b/examples/googleAnalytics.js
@ -0,0 +1,12 @@
 (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');
--- a/examples/graph2d/01_basic.html
+++ b/examples/graph2d/01_basic.html
@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>

 <head><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>
 <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Graph2d | Basic Example</title>
@ -14,7 +14,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Basic Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
--- a/examples/graph2d/02_bars.html
+++ b/examples/graph2d/02_bars.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Bar Graph Example</title>

    <style type="text/css">
@ -11,7 +11,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Bar Graph Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
--- a/examples/graph2d/03_groups.html
+++ b/examples/graph2d/03_groups.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
  <title>Graph2d | Groups Example</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
@ -12,7 +12,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Groups Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
--- a/examples/graph2d/04_rightAxis.html
+++ b/examples/graph2d/04_rightAxis.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Right Axis Example</title>

    <style type="text/css">
@ -8,14 +8,14 @@
            font-family: sans-serif;
        }

        .customStyle1 {
        .custom-style1 {
            fill: #0df200;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #0df200;
        }

        .customStyle2 {
        .custom-style2 {
            fill: #f23303;
            fill-opacity:0;
            stroke-width:2px;
@ -25,7 +25,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Right Axis Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -47,7 +47,7 @@
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
@ -60,7 +60,7 @@
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
@ -117,7 +117,7 @@
        dataAxis: {icons: true},
        start: '2014-06-10',
        end: '2014-07-04',
        movable: false
        moveable: false
    };
    var graph2d = new vis.Graph2d(container, dataset, groups, options);

--- a/examples/graph2d/05_bothAxis.html
+++ b/examples/graph2d/05_bothAxis.html
@ -1,42 +1,41 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Both Axis Example</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script src="../../dist/vis.js"></script>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

        .customStyle1 {
        .custom-style1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
        .custom-style2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
        .custom-style3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }
        path.customStyle3.fill {
        path.custom-style3.vis-fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }
    </style>

    <script src="../../dist/vis.js"></script>

 </head>
 <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></head>
 <body>
 <h2>Graph2d | Both Axis Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -57,7 +56,7 @@
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
@ -70,7 +69,7 @@
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
@ -90,7 +89,7 @@
    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        className: 'custom-style3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
--- a/examples/graph2d/06_interpolation.html
+++ b/examples/graph2d/06_interpolation.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Interpolation</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
@ -11,7 +11,7 @@

    <script src="../../dist/vis.js"></script>

 </head>
 <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></head>
 <body>
 <h2>Graph2d | Interpolation</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -36,7 +36,7 @@
        content: names[0],
        options: {
            drawPoints: false,
            catmullRom: {
            interpolation: {
                parametrization: 'centripetal'
            }
        }});
@ -46,7 +46,7 @@
        content: names[1],
        options: {
            drawPoints: false,
            catmullRom: {
            interpolation: {
                parametrization: 'chordal'
            }
        }});
@ -56,7 +56,7 @@
        content: names[2],
        options: {
            drawPoints: false,
            catmullRom: {
            interpolation: {
                parametrization: 'uniform'
            }
        }
@ -67,7 +67,7 @@
        content: names[3],
        options: {
            drawPoints: { style: 'circle' },
            catmullRom: false
            interpolation: false
        }});

    var container = document.getElementById('visualization');
--- a/examples/graph2d/07_scrollingAndSorting.html
+++ b/examples/graph2d/07_scrollingAndSorting.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
  <title>Graph2d | Scrolling and Sorting</title>

  <style type="text/css">
@ -11,7 +11,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Scrolling and Sorting</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
--- a/examples/graph2d/08_performance.html
+++ b/examples/graph2d/08_performance.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Performance</title>

    <style>
@ -19,7 +19,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Performance</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -74,19 +74,19 @@
        var interpolationField = document.getElementById("interpolation");
        if (interpolation == "linear") {
            interpolation = 'centripetal';
            interpolationOptions = {catmullRom: {parametrization: interpolation}};
            interpolationOptions = {interpolation: {parametrization: interpolation}};
        }
        else if (interpolation == "centripetal") {
            interpolation = 'chordal';
            interpolationOptions = {catmullRom: {parametrization: interpolation}};
            interpolationOptions = {interpolation: {parametrization: interpolation}};
        }
        else if (interpolation == "chordal") {
            interpolation = 'uniform';
            interpolationOptions = {catmullRom: {parametrization: interpolation}};
            interpolationOptions = {interpolation: {parametrization: interpolation}};
        }
        else if (interpolation == "uniform") {
            interpolation = 'linear';
            interpolationOptions = {catmullRom: false};
            interpolationOptions = {interpolation: false};
        }
        interpolationField.value = interpolation;
        graph2d.setOptions(interpolationOptions);
@ -139,7 +139,7 @@
    var options = {
        sampling: true,
        drawPoints: {enabled:false, size:3},
        catmullRom: false,
        interpolation: false,
        start: startPoint,
        end: endPoint
    };
--- a/examples/graph2d/09_external_legend.html
+++ b/examples/graph2d/09_external_legend.html
@ -1,366 +1,362 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
    <title>Graph2d | External legend Example</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

        .customStyle1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }

        path.customStyle3.fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }

         .graphGroup0 {
            fill:#4f81bd;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #4f81bd;
        }

         .graphGroup1 {
            fill:#f79646;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #f79646;
        }

         .graphGroup2 {
            fill: #8c51cf;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8c51cf;
        }

         .graphGroup3 {
            fill: #75c841;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #75c841;
        }

         .graphGroup4 {
            fill: #ff0100;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff0100;
        }

         .graphGroup5 {
            fill: #37d8e6;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #37d8e6;
        }

         .graphGroup6 {
            fill: #042662;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #042662;
        }

         .graphGroup7 {
            fill:#00ff26;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #00ff26;
        }

         .graphGroup8 {
            fill:#ff00ff;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff00ff;
        }

         .graphGroup9 {
            fill: #8f3938;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8f3938;
        }

         .fill {
            fill-opacity:0.1;
            stroke: none;
        }


         .bar {
            fill-opacity:0.5;
            stroke-width:1px;
        }

         .point {
            stroke-width:2px;
            fill-opacity:1.0;
        }


         .legendBackground {
            stroke-width:1px;
            fill-opacity:0.9;
            fill: #ffffff;
            stroke: #c2c2c2;
        }


         .outline {
            stroke-width:1px;
            fill-opacity:1;
            fill: #ffffff;
            stroke: #e5e5e5;
        }

         .iconFill {
            fill-opacity:0.3;
            stroke: none;
        }

        div.descriptionContainer {
            float:left;
            height:30px;
            width:160px;
            padding-left:5px;
            padding-right:5px;
            line-height: 30px;
        }

        div.iconContainer {
            float:left;
        }

        div.legendElementContainer {
            display:inline-block;
            width:200px;
            height:30px;
            border-style:solid;
            border-width:1px;
            border-color: #e0e0e0;
            background-color: #ffffff;
            margin:4px;
            padding:4px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor:pointer;
        }
        div.legendElementContainer.hidden {
            background-color: #d3e6ff;
        }

        svg.legendIcon {
            width:30px;
            height:30px;
        }

        div.externalLegend {
            position:relative;
            margin-left: -5px;
            width: 900px;
        }




    </style>

    <script src="../../dist/vis.js"></script>

 </head>
 <head>
  <title>Graph2d | External legend Example</title>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

    .custom-style1 {
      fill: #f2ea00;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #b3ab00;
    }

    .custom-style2 {
      fill: #00a0f2;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #050092;
    }

    .custom-style3 {
      fill: #00f201;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #029200;
    }

    path.custom-style3.fill {
      fill-opacity:0.5 !important;
      stroke: none;
    }

    .vis-graph-group0 {
      fill:#4f81bd;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #4f81bd;
    }

    .vis-graph-group1 {
      fill:#f79646;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #f79646;
    }

    .vis-graph-group2 {
      fill: #8c51cf;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #8c51cf;
    }

    .vis-graph-group3 {
      fill: #75c841;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #75c841;
    }

    .vis-graph-group4 {
      fill: #ff0100;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #ff0100;
    }

    .vis-graph-group5 {
      fill: #37d8e6;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #37d8e6;
    }

    .vis-graph-group6 {
      fill: #042662;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #042662;
    }

    .vis-graph-group7 {
      fill:#00ff26;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #00ff26;
    }

    .vis-graph-group8 {
      fill:#ff00ff;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #ff00ff;
    }

    .vis-graph-group9 {
      fill: #8f3938;
      fill-opacity:0;
      stroke-width:2px;
      stroke: #8f3938;
    }

    .vis-fill {
      fill-opacity:0.1;
      stroke: none;
    }


    .vis-bar {
      fill-opacity:0.5;
      stroke-width:1px;
    }

    .vis-point {
      stroke-width:2px;
      fill-opacity:1.0;
    }


    .vis-legend-background {
      stroke-width:1px;
      fill-opacity:0.9;
      fill: #ffffff;
      stroke: #c2c2c2;
    }


    .vis-outline {
      stroke-width:1px;
      fill-opacity:1;
      fill: #ffffff;
      stroke: #e5e5e5;
    }

    .vis-icon-fill {
      fill-opacity:0.3;
      stroke: none;
    }

    div.description-container {
      float:left;
      height:30px;
      width:160px;
      padding-left:5px;
      padding-right:5px;
      line-height: 30px;
    }

    div.icon-container {
      float:left;
    }

    div.legend-element-container {
      display:inline-block;
      width:200px;
      height:30px;
      border-style:solid;
      border-width:1px;
      border-color: #e0e0e0;
      background-color: #ffffff;
      margin:4px;
      padding:4px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor:pointer;
    }
    div.legend-element-container.hidden {
      background-color: #d3e6ff;
    }

    svg.legend-icon {
      width:30px;
      height:30px;
    }

    div.external-legend {
      position:relative;
      margin-left: -5px;
      width: 900px;
    }
  </style>

  <script src="../../dist/vis.js"></script>

  <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></head>
 <body>
 <h2>Graph2d | External custom legend</h2>
 <div style="width:800px; font-size:14px; text-align: justify;">
    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
    groups by updating the dataset.
  This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
  groups by updating the dataset.

 </div>
 <br />
 <div id="Legend" class="externalLegend"></div>
 <div id="Legend" class="external-legend"></div>
 <div id="visualization"></div>


 <script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});

    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
                size: 10
            }
        }});

    groups.add({
        id: 2,
        content: names[2],
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: false
        }
    });

    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});

    var container = document.getElementById('visualization');
    var items = [
        {x: '2014-06-12', y: 0 , group: 0},
        {x: '2014-06-13', y: 30, group: 0},
        {x: '2014-06-14', y: 10, group: 0},
        {x: '2014-06-15', y: 15, group: 1},
        {x: '2014-06-16', y: 30, group: 1},
        {x: '2014-06-17', y: 10, group: 1},
        {x: '2014-06-18', y: 15, group: 1},
        {x: '2014-06-19', y: 52, group: 1},
        {x: '2014-06-20', y: 10, group: 1},
        {x: '2014-06-21', y: 20, group: 2},
        {x: '2014-06-22', y: 600, group: 2},
        {x: '2014-06-23', y: 100, group: 2},
        {x: '2014-06-24', y: 250, group: 2},
        {x: '2014-06-25', y: 300, group: 2},
        {x: '2014-06-26', y: 200, group: 3},
        {x: '2014-06-27', y: 600, group: 3},
        {x: '2014-06-28', y: 1000, group: 3},
        {x: '2014-06-29', y: 250, group: 3},
        {x: '2014-06-30', y: 300, group: 3}
    ];

    var dataset = new vis.DataSet(items);
    var options = {
        dataAxis: {showMinorLabels: false},
        start: '2014-06-09',
        end: '2014-07-03'
    };
    var graph2d = new vis.Graph2d(container, items, groups, options);


    /**
     * this function fills the external legend with content using the getLegend() function.
     */
    function populateExternalLegend() {
        var groupsData = groups.get();
        var legendDiv = document.getElementById("Legend");
        legendDiv.innerHTML = "";

        // get for all groups:
        for (var i = 0; i < groupsData.length; i++) {
            // create divs
            var containerDiv = document.createElement("div");
            var iconDiv = document.createElement("div");
            var descriptionDiv = document.createElement("div");

            // give divs classes and Ids where necessary
            containerDiv.className = 'legendElementContainer';
            containerDiv.id = groupsData[i].id + "_legendContainer"
            iconDiv.className = "iconContainer";
            descriptionDiv.className = "descriptionContainer";

            // get the legend for this group.
            var legend = graph2d.getLegend(groupsData[i].id,30,30);

            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
            // icons with the same classes if they are using the default ones.
            legend.icon.setAttributeNS(null, "class", "legendIcon");

            // append the legend to the corresponding divs
            iconDiv.appendChild(legend.icon);
            descriptionDiv.innerHTML = legend.label;

            // determine the order for left and right orientation
            if (legend.orientation == 'left') {
                descriptionDiv.style.textAlign = "left";
                containerDiv.appendChild(iconDiv);
                containerDiv.appendChild(descriptionDiv);
            }
            else {
                descriptionDiv.style.textAlign = "right";
                containerDiv.appendChild(descriptionDiv);
                containerDiv.appendChild(iconDiv);
            }

            // append to the legend container div
            legendDiv.appendChild(containerDiv);

            // bind click event to this legend element.
            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
        }
  // create a dataSet with groups
  var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  var groups = new vis.DataSet();
  groups.add({
    id: 0,
    content: names[0],
    className: 'custom-style1',
    options: {
      drawPoints: {
        style: 'square' // square, circle
      },
      shaded: {
        orientation: 'bottom' // top, bottom
      }
    }});

  groups.add({
    id: 1,
    content: names[1],
    className: 'custom-style2',
    options: {
      style:'bar',
      drawPoints: {style: 'circle',
        size: 10
      }
    }});

  groups.add({
    id: 2,
    content: names[2],
    options: {
      yAxisOrientation: 'right', // right, left
      drawPoints: false
    }

    /**
     * This function switchs the visible option of the selected group on an off.
     * @param groupId
     */
    function toggleGraph(groupId) {
        // get the container that was clicked on.
        var container = document.getElementById(groupId + "_legendContainer")
        // if visible, hide
        if (graph2d.isGroupVisible(groupId) == true) {
            groups.update({id:groupId, visible:false});
            container.className = container.className + " hidden";
        }
        else { // if invisible, show
            groups.update({id:groupId, visible:true});
            container.className = container.className.replace("hidden","");
        }
  });

  groups.add({
    id: 3,
    content: names[3],
    className: 'custom-style3',
    options: {
      yAxisOrientation: 'right', // right, left
      drawPoints: {
        style: 'circle' // square, circle
      },
      shaded: {
        orientation: 'top' // top, bottom
      }
    }});

  var container = document.getElementById('visualization');
  var items = [
    {x: '2014-06-12', y: 0 , group: 0},
    {x: '2014-06-13', y: 30, group: 0},
    {x: '2014-06-14', y: 10, group: 0},
    {x: '2014-06-15', y: 15, group: 1},
    {x: '2014-06-16', y: 30, group: 1},
    {x: '2014-06-17', y: 10, group: 1},
    {x: '2014-06-18', y: 15, group: 1},
    {x: '2014-06-19', y: 52, group: 1},
    {x: '2014-06-20', y: 10, group: 1},
    {x: '2014-06-21', y: 20, group: 2},
    {x: '2014-06-22', y: 600, group: 2},
    {x: '2014-06-23', y: 100, group: 2},
    {x: '2014-06-24', y: 250, group: 2},
    {x: '2014-06-25', y: 300, group: 2},
    {x: '2014-06-26', y: 200, group: 3},
    {x: '2014-06-27', y: 600, group: 3},
    {x: '2014-06-28', y: 1000, group: 3},
    {x: '2014-06-29', y: 250, group: 3},
    {x: '2014-06-30', y: 300, group: 3}
  ];

  var dataset = new vis.DataSet(items);
  var options = {
    dataAxis: {showMinorLabels: false},
    start: '2014-06-09',
    end: '2014-07-03'
  };
  var graph2d = new vis.Graph2d(container, items, groups, options);


  /**
   * this function fills the external legend with content using the getLegend() function.
   */
  function populateExternalLegend() {
    var groupsData = groups.get();
    var legendDiv = document.getElementById("Legend");
    legendDiv.innerHTML = "";

    // get for all groups:
    for (var i = 0; i < groupsData.length; i++) {
      // create divs
      var containerDiv = document.createElement("div");
      var iconDiv = document.createElement("div");
      var descriptionDiv = document.createElement("div");

      // give divs classes and Ids where necessary
      containerDiv.className = 'legend-element-container';
      containerDiv.id = groupsData[i].id + "_legendContainer"
      iconDiv.className = "icon-container";
      descriptionDiv.className = "description-container";

      // get the legend for this group.
      var legend = graph2d.getLegend(groupsData[i].id,30,30);

      // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
      // icons with the same classes if they are using the default ones.
      legend.icon.setAttributeNS(null, "class", "legend-icon");

      // append the legend to the corresponding divs
      iconDiv.appendChild(legend.icon);
      descriptionDiv.innerHTML = legend.label;

      // determine the order for left and right orientation
      if (legend.orientation == 'left') {
        descriptionDiv.style.textAlign = "left";
        containerDiv.appendChild(iconDiv);
        containerDiv.appendChild(descriptionDiv);
      }
      else {
        descriptionDiv.style.textAlign = "right";
        containerDiv.appendChild(descriptionDiv);
        containerDiv.appendChild(iconDiv);
      }

      // append to the legend container div
      legendDiv.appendChild(containerDiv);

      // bind click event to this legend element.
      containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
    }
  }

  /**
   * This function switchs the visible option of the selected group on an off.
   * @param groupId
   */
  function toggleGraph(groupId) {
    // get the container that was clicked on.
    var container = document.getElementById(groupId + "_legendContainer")
    // if visible, hide
    if (graph2d.isGroupVisible(groupId) == true) {
      groups.update({id:groupId, visible:false});
      container.className = container.className + " hidden";
    }
    else { // if invisible, show
      groups.update({id:groupId, visible:true});
      container.className = container.className.replace("hidden","");
    }
  }

    populateExternalLegend()
  populateExternalLegend()

 </script>
 </body>
--- a/examples/graph2d/10_barsSideBySide.html
+++ b/examples/graph2d/10_barsSideBySide.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Bar Graphs Side by Side Example</title>

    <style type="text/css">
@ -11,7 +11,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Bar Graphs Side by Side Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -40,7 +40,7 @@
        {x: '2014-06-14', y: 10},
        {x: '2014-06-15', y: 15},
        {x: '2014-06-16', y: 30},
        {x: '2014-06-11', y: 12},
        {x: '2014-06-11', y: -12},
        {x: '2014-06-14', y: 24},
        {x: '2014-06-15', y: 5},
        {x: '2014-06-16', y: 12}
@ -49,7 +49,8 @@
    var dataset = new vis.DataSet(items);
    var options = {
        style:'bar',
        barChart: {width:50, align:'center'}, // align: left, center, right
        stack:false,
        barChart: {width:50, align:'center', sideBySide:false}, // align: left, center, right
        drawPoints: false,
        dataAxis: {
            icons:true
@ -65,7 +66,7 @@
    dropdown.onchange = update;

    function update() {
        var options = {barChart:{handleOverlap:dropdown.value}};
        var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
        graph2d.setOptions(options);
    }

--- a/examples/graph2d/11_barsSideBySideGroups.html
+++ b/examples/graph2d/11_barsSideBySideGroups.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Bar Graphs Side by Side Example with Groups</title>

    <style type="text/css">
@ -11,7 +11,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -49,7 +49,7 @@
        {x: '2014-06-12', y: 15, group:1},
        {x: '2014-06-13', y: 34, group:1},
        {x: '2014-06-14', y: 24, group:1},
        {x: '2014-06-15', y: 5, group:1},
        {x: '2014-06-15', y: 5,  group:1},
        {x: '2014-06-16', y: 12, group:1},
        {x: '2014-06-11', y: 22, group:2},
        {x: '2014-06-12', y: 14, group:2},
@ -62,7 +62,8 @@
    var dataset = new vis.DataSet(items);
    var options = {
        style:'bar',
        barChart: {width:50, align:'center', handleOverlap:'sideBySide'}, // align: left, center, right
        stack:false,
        barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
        drawPoints: false,
        dataAxis: {
            icons:true
@ -77,7 +78,7 @@
    dropdown.onchange = update;

    function update() {
        var options = {barChart:{handleOverlap:dropdown.value}};
        var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
        graph2d.setOptions(options);
    }

--- a/examples/graph2d/12_customRange.html
+++ b/examples/graph2d/12_customRange.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Bar Graph Example</title>

    <style type="text/css">
@ -11,7 +11,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Custom axis range</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -23,13 +23,11 @@
 <pre class="prettyprint lang-js">
 var options = {
    dataAxis: {
        customRange: {
            left: {
                min:-5, max:30
            },
            right: {
                min:-5
            }
        left: {
            range: {min:-5, max:30}
        },
        right: {
            range: {min:-5}
        }
    }
 };
@ -71,16 +69,14 @@ var options = {
    var dataset = new vis.DataSet(items);
    var options = {
        style:'bar',
        barChart: {width:50, align:'center', handleOverlap:"sideBySide"}, // align: left, center, right
        barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
        drawPoints: true,
        dataAxis: {
            customRange: {
                left: {
                    min:-5, max:30
                },
                right: {
                    min:-5
                }
            left: {
                range: {min:-5, max:30}
            },
            right: {
                range: {min:-5}
            },
            icons:true
        },
--- a/examples/graph2d/13_localization.html
+++ b/examples/graph2d/13_localization.html
@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>

 <head><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>
 <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Graph2d | Localization</title>
@ -16,7 +16,7 @@
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Localization</h2>
 <p>
--- a/examples/graph2d/14_toggleGroups.html
+++ b/examples/graph2d/14_toggleGroups.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
  <title>Graph2d | Toggle Groups Example</title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
@ -17,7 +17,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Groups Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
--- a/examples/graph2d/15_streaming_data.html
+++ b/examples/graph2d/15_streaming_data.html
@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>

 <head><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>
 <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Graph2d | Streaming data</title>
@ -14,7 +14,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Streaming data</h2>
 <p style="max-width: 700px;">
@ -45,8 +45,8 @@
    start: vis.moment().add(-30, 'seconds'), // changed so its faster
    end: vis.moment(),
    dataAxis: {
      customRange: {
        left: {
      left: {
        range: {
          min:-10, max: 10
        }
      }
@ -73,12 +73,12 @@
    switch (strategy.value) {
      case 'continuous':
        // continuously move the window
        graph2d.setWindow(now - interval, now, {animate: false});
        graph2d.setWindow(now - interval, now, {animation: false});
        requestAnimationFrame(renderStep);
        break;

      case 'discrete':
        graph2d.setWindow(now - interval, now, {animate: false});
        graph2d.setWindow(now - interval, now, {animation: false});
        setTimeout(renderStep, DELAY);
        break;

--- a/examples/graph2d/16_bothAxis_titles.html
+++ b/examples/graph2d/16_bothAxis_titles.html
@ -1,42 +1,42 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
    <title>Graph2d | Axis Titles and Styling</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script src="../../dist/vis.js"></script>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

        .customStyle1 {
        .custom-style1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }

        .customStyle2 {
        .custom-style2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }

        .customStyle3 {
        .custom-style3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }
        path.customStyle3.fill {
        path.custom-style3.vis-fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }
    </style>

    <script src="../../dist/vis.js"></script>

 </head>
    <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></head>
 <body>
 <h2>Graph2d | Axis Titles and Styling</h2>
 <div style="width:800px; font-size:14px; text-align: justify;">
@ -64,15 +64,6 @@
                    <td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
                    <td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
                </tr>
                <tr>
                    <td>Left decimals</td>
                    <td><select id="decimals" onchange="styleDecimals()">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        </select>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
@ -88,7 +79,7 @@
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        className: 'custom-style1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
@ -101,7 +92,7 @@
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        className: 'custom-style2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
@ -121,7 +112,7 @@
    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        className: 'custom-style3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
@ -159,8 +150,8 @@
    var options = {
        dataAxis: {
            showMinorLabels: false,
            title: {
                right: {
            right: {
                title: {
                    text: 'Title (right axis)'
                }
            }
@ -185,10 +176,10 @@
        }

        if(axis == 'left') {
            graph2d.setOptions({dataAxis: {title: {left: title}}});
            graph2d.setOptions({dataAxis: {left: {title: title}}});
        }
        else {
            graph2d.setOptions({dataAxis: {title: {right: title}}});
            graph2d.setOptions({dataAxis: {right: {title: title}}});
        }
    }

@ -198,18 +189,13 @@
        title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};

        if(axis == 'left') {
            graph2d.setOptions({dataAxis: {title: {left: title}}});
            graph2d.setOptions({dataAxis: {left: {title: title}}});
        }
        else {
            graph2d.setOptions({dataAxis: {title: {right: title}}});
            graph2d.setOptions({dataAxis: {right: {title: title}}});
        }
    }

    function styleDecimals() {
        var x = document.getElementById("decimals");
        graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
    }

 </script>
 </body>
 </html>
--- a/examples/graph2d/17_dynamicStyling.html
+++ b/examples/graph2d/17_dynamicStyling.html
@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>

 <head><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>
 <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Graph2d | Dynamic Styling</title>
@ -14,7 +14,7 @@

    <script src="../../dist/vis.js"></script>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css"/>
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Dynamic Styling Example</h2>

--- a/examples/graph2d/18_scatterplot.html
+++ b/examples/graph2d/18_scatterplot.html
@ -1,6 +1,6 @@
 <!DOCTYPE HTML>
 <html>
 <head><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>
 <head>
  <title>Graph2d | Scatterplot</title>

  <style type="text/css">
@ -11,7 +11,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Scatterplot</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -42,8 +42,8 @@ var options = {
      sampling:false,
      style:'points',
      dataAxis: {
          customRange: {
              left: {
          left: {
              range: {
                  min: 300, max: 800
              }
          }
--- a/examples/graph2d/19_labels.html
+++ b/examples/graph2d/19_labels.html
@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>

 <head><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>
 <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Graph2d | Basic Example</title>
@ -18,7 +18,7 @@

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <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></head>
 <body>
 <h2>Graph2d | Label Example</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
@ -57,6 +57,7 @@
  var options = {
    start: '2014-06-10',
    end: '2014-06-18',
      style:'bar'
  };
  var graph2d = new vis.Graph2d(container, dataset, options);
 </script>
--- a/examples/graph2d/index.html
+++ b/examples/graph2d/index.html
@ -1,32 +0,0 @@
 <html>
 <head><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>
  <link rel='stylesheet' href='default.css' type='text/css'>
 </head>
 <body>
 <div id="container">

  <h1>Graph2d Examples</h1>

  <p><a href="01_basic.html">01_basic.html</a></p>
  <p><a href="02_bars.html">02_bars.html</a></p>
  <p><a href="03_groups.html">03_groups.html</a></p>
  <p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
  <p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
  <p><a href="06_interpolation.html">06_interpolation.html</a></p>
  <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
  <p><a href="08_performance.html">08_performance.html</a></p>
  <p><a href="09_external_legend.html">09_external_legend.html</a></p>
  <p><a href="10_barsSideBySide.html">10_barsSideBySide.html</a></p>
  <p><a href="11_barsSideBySideGroups.html">11_barsSideBySideGroups.html</a></p>
  <p><a href="12_customRange.html">12_customRange.html</a></p>
  <p><a href="13_localization.html">13_localization.html</a></p>
  <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
  <p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
  <p><a href="16_bothAxis_titles.html">16_bothAxis_titles.html</a></p>
  <p><a href="17_dynamicStyling.html">17_dynamicStyling.html</a></p>
  <p><a href="18_scatterplot.html">18_scatterplot.html</a></p>
  <p><a href="19_labels.html">19_labels.html</a></p>

 </div>
 </body>
 </html>
--- a/examples/graph3d/example01_basis.html
+++ b/examples/graph3d/example01_basis.html
@ -1,60 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head><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>
  <title>Graph 3D demo</title>

  <style>
    body {font: 10pt arial;}
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    function custom(x, y) {
      return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
    }

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // Create and populate a data table.
      data = new vis.DataSet();
      // create some nice looking data with sin/cos
      var counter = 0;
      var steps = 50;  // number of datapoints will be steps*steps
      var axisMax = 314;
      var axisStep = axisMax / steps;
      for (var x = 0; x < axisMax; x+=axisStep) {
        for (var y = 0; y < axisMax; y+=axisStep) {
          var value = custom(x,y);
          data.add({id:counter++,x:x,y:y,z:value,style:value});
        }
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'surface',
        showPerspective: true,
        showGrid: true,
        showShadow: false,
        keepAspectRatio: true,
        verticalRatio: 0.5
      };

      // Instantiate our graph object.
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
    }
  </script>
 </head>

 <body onload="drawVisualization();">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph3d/example02_camera.html
+++ b/examples/graph3d/example02_camera.html
@ -1,109 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head><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>
  <title>Graph 3D camera position</title>

  <style>
    body {font: 10pt arial;}
    td {font: 10pt arial}
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    function custom(x, y) {
      return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
    }

    // callback function, called when the camera position has changed
    function onCameraPositionChange() {
      // adjust the values of startDate and endDate
      var pos = graph.getCameraPosition();
      document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
      document.getElementById('vertical').value   = parseFloat(pos.vertical.toFixed(3));
      document.getElementById('distance').value   = parseFloat(pos.distance.toFixed(3));
    }

    // set the camera position
    function setCameraPosition() {
      var horizontal = parseFloat(document.getElementById('horizontal').value);
      var vertical = parseFloat(document.getElementById('vertical').value);
      var distance = parseFloat(document.getElementById('distance').value);
      var pos = {
        horizontal: horizontal,
        vertical: vertical,
        distance: distance
      };
      graph.setCameraPosition(pos);

      // retrieve the camera position again, to get the applied values
      onCameraPositionChange();
    }

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // Create and populate a data table.
      data = new vis.DataSet();
      // create some nice looking data with sin/cos
      var steps = 50;  // number of datapoints will be steps*steps
      var axisMax = 314;
      var axisStep = axisMax / steps;
      for (var x = 0; x < axisMax; x+=axisStep) {
        for (var y = 0; y < axisMax; y+=axisStep) {
          var value = custom(x,y);
          data.add([
            {x:x,y:y,z:value,t:0,style:value}
          ]);
        }
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'surface',
        showPerspective: true,
        showGrid: true,
        showShadow: false,
        keepAspectRatio: true,
        verticalRatio: 0.5
      };

      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);

      graph.on('cameraPositionChange', onCameraPositionChange);
    }
  </script>
 </head>

 <body onload="drawVisualization()">
 <h1>Graph 3d camera position</h1>
 <table>
  <tr>
    <td>Horizontal angle (0 to 2*pi)</td>
    <td><input type="text" id="horizontal" value="1.0"></td>
  </tr>
  <tr>
    <td>Vertical angle (0 to 0.5*pi)</td>
    <td><input type="text" id="vertical" value="0.5"></td>
  </tr>
  <tr>
    <td>Distance (0.71 to 5.0)</td>
    <td><input type="text" id="distance" value="1.7"></td>
  </tr>
  <tr>
    <td></td>
    <td><input type="button" value="Set" onclick="setCameraPosition();"></td>
  </tr>
 </table>

 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph3d/example03_filter.html
+++ b/examples/graph3d/example03_filter.html
@ -1,63 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head><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>
  <title>Graph 3D demo</title>

  <style>
    body {font: 10pt arial;}
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    function custom(x, y) {
      return Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
    }

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // Create and populate a data table.
      data = [];
      // create some nice looking data with sin/cos
      var steps = 50;  // number of datapoints will be steps*steps
      var axisMax = 314;
      var axisStep = axisMax / steps;
      for (var x = 0; x < axisMax; x+=axisStep) {
        for (var y = 0; y < axisMax; y+=axisStep) {
          var value = custom(x,y);
          var valueRange = (value > 67) ? '67-100' :
              (value < 33) ? '0-33' :
                  '33-67';
          data.push({x:x,y:y,z:value,filter:valueRange,style:value});
        }
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'surface',
        showPerspective: false,
        showGrid: true,
        showShadow: false,
        keepAspectRatio: true,
        verticalRatio: 0.5,
        filterLabel: 'values'
      };

      // Create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
    }
  </script>
 </head>

 <body onload="drawVisualization()">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph3d/example04_animate.html
+++ b/examples/graph3d/example04_animate.html
@ -1,70 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head><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>
  <title>Graph 3D animation demo</title>

  <style type="text/css">
    body {
      font: 10pt arial;
    }
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    function custom(x, y, t) {
      return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
    }

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // Create and populate a data table.
      data = new vis.DataSet();
      // create some nice looking data with sin/cos
      var steps = 25;
      var axisMax = 314;
      var tMax = 31;
      var axisStep = axisMax / steps;
      for (var t = 0; t < tMax; t++) {
        for (var x = 0; x < axisMax; x+=axisStep) {
          for (var y = 0; y < axisMax; y+=axisStep) {
            var value = custom(x, y, t);
            data.add([
              {x:x,y:y,z:value,filter:t,style:value}
            ]);
          }
        }
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'surface',
        showPerspective: true,
        showGrid: true,
        showShadow: false,
        // showAnimationControls: false,
        keepAspectRatio: true,
        verticalRatio: 0.5,
        animationInterval: 100, // milliseconds
        animationPreload: true,
        filterValue: 'time'
      };

      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
    }
  </script>
 </head>

 <body onload="drawVisualization();">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph3d/example05_line.html
+++ b/examples/graph3d/example05_line.html
@ -1,59 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head><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>
  <title>Graph 3D line demo</title>

  <style>
    body {font: 10pt arial;}
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // Create and populate a data table.
      data = new vis.DataSet();

      // create some nice looking data with sin/cos
      var steps = 500;
      var axisMax = 314;
      var tmax = 4 * 2 * Math.PI;
      var axisStep = axisMax / steps;
      for (var t = 0; t < tmax; t += tmax / steps) {
        var r = 1;
        var x = r * Math.sin(t);
        var y = r * Math.cos(t);
        var z = t / tmax;
        data.add({x:x,y:y,z:z});
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'line',
        showPerspective: false,
        showGrid: true,
        keepAspectRatio: true,
        verticalRatio: 1.0
      };

      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);

      graph.setCameraPosition(0.4, undefined, undefined);
    }
  </script>
 </head>

 <body onload="drawVisualization()">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/examples/graph3d/example06_moving_dots.html
+++ b/examples/graph3d/example06_moving_dots.html
@ -1,77 +0,0 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head><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>
  <title>Graph 3D animation moving dots</title>

  <style>
    body {font: 10pt arial;}
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var data = null;
    var graph = null;

    // Called when the Visualization API is loaded.
    function drawVisualization() {
      // create the data table.
      data = new vis.DataSet();

      // create some shortcuts to math functions
      var sin = Math.sin;
      var cos = Math.cos;
      var pi = Math.PI;

      // create the animation data
      var tmax = 2.0 * pi;
      var tstep = tmax / 75;
      var dotCount = 1;  // set this to 1, 2, 3, 4, ...
      for (var t = 0; t < tmax; t += tstep) {
        var tgroup = parseFloat(t.toFixed(2));
        var value = t;

        // a dot in the center
        data.add( {x:0,y:0,z:0,filter:tgroup,style:value});

        // one or multiple dots moving around the center
        for (var dot = 0; dot < dotCount; dot++) {
          var tdot = t + 2*pi * dot / dotCount;
          data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
          data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
        }
      }

      // specify options
      var options = {
        width:  '600px',
        height: '600px',
        style: 'dot-color',
        showPerspective: true,
        showGrid: true,
        keepAspectRatio: true,
        verticalRatio: 1.0,
        animationInterval: 35, // milliseconds
        animationPreload: false,
        animationAutoStart: true,
        legendLabel: 'color value',
        cameraPosition: {
          horizontal: 2.7,
          vertical: 0.0,
          distance: 1.65
        }
      };

      // create our graph
      var container = document.getElementById('mygraph');
      graph = new vis.Graph3d(container, data, options);
    }
  </script>
 </head>

 <body onload="drawVisualization();">
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>