Released version 0.3.0

dist/vis.css

@@ -0,0 +1,235 @@
+.vis.timeline {
+}
+
+
+.vis.timeline.rootpanel {
+  position: relative;
+  overflow: hidden;
+
+  border: 1px solid #bfbfbf;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.vis.timeline .panel {
+  position: absolute;
+  overflow: hidden;
+}
+
+
+.vis.timeline .groupset {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+}
+
+.vis.timeline .labels {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  padding: 0;
+  margin: 0;
+
+  border-right: 1px solid #bfbfbf;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+.vis.timeline .labels .label-set {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  overflow: hidden;
+
+  border-top: none;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labels .label-set .label {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  color: #4d4d4d;
+}
+
+.vis.timeline.top .labels .label-set .label,
+.vis.timeline.top .groupset .itemset-axis {
+  border-top: 1px solid #bfbfbf;
+  border-bottom: none;
+}
+
+.vis.timeline.bottom .labels .label-set .label,
+.vis.timeline.bottom .groupset .itemset-axis {
+  border-top: none;
+  border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labels .label-set .label .inner {
+  display: inline-block;
+  padding: 5px;
+}
+
+
+.vis.timeline .itemset {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.vis.timeline .background {
+}
+
+.vis.timeline .foreground {
+}
+
+.vis.timeline .itemset-axis {
+  position: absolute;
+}
+
+
+.vis.timeline .item {
+  position: absolute;
+  color: #1A1A1A;
+  border-color: #97B0F8;
+  background-color: #D5DDF6;
+  display: inline-block;
+}
+
+.vis.timeline .item.selected {
+  border-color: #FFC200;
+  background-color: #FFF785;
+  z-index: 999;
+}
+
+.vis.timeline .item.cluster {
+  /* TODO: use another color or pattern? */
+  background: #97B0F8 url('img/cluster_bg.png');
+  color: white;
+}
+.vis.timeline .item.cluster.point {
+  border-color: #D5DDF6;
+}
+
+.vis.timeline .item.box {
+  text-align: center;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 5px;
+  -moz-border-radius: 5px; /* For Firefox 3.6 and older */
+}
+
+.vis.timeline .item.point {
+  background: none;
+}
+
+.vis.timeline .dot {
+  border: 5px solid #97B0F8;
+  position: absolute;
+  border-radius: 5px;
+  -moz-border-radius: 5px;  /* For Firefox 3.6 and older */
+}
+
+.vis.timeline .item.range {
+  overflow: hidden;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
+}
+
+.vis.timeline .item.rangeoverflow {
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 2px;
+  -moz-border-radius: 2px;  /* For Firefox 3.6 and older */
+}
+
+.vis.timeline .item.range .drag-left, .vis.timeline .item.rangeoverflow .drag-left {
+  cursor: w-resize;
+  z-index: 1000;
+}
+
+.vis.timeline .item.range .drag-right, .vis.timeline .item.rangeoverflow .drag-right {
+  cursor: e-resize;
+  z-index: 1000;
+}
+
+.vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content {
+  position: relative;
+  display: inline-block;
+}
+
+.vis.timeline .item.line {
+  position: absolute;
+  width: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.vis.timeline .item .content {
+  margin: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.vis.timeline .axis {
+  position: relative;
+}
+
+.vis.timeline .axis .text {
+  position: absolute;
+  color: #4d4d4d;
+  padding: 3px;
+  white-space: nowrap;
+}
+
+.vis.timeline .axis .text.measure {
+  position: absolute;
+  padding-left: 0;
+  padding-right: 0;
+  margin-left: 0;
+  margin-right: 0;
+  visibility: hidden;
+}
+
+.vis.timeline .axis .grid.vertical {
+  position: absolute;
+  width: 0;
+  border-right: 1px solid;
+}
+
+.vis.timeline .axis .grid.horizontal {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid;
+}
+
+.vis.timeline .axis .grid.minor {
+  border-color: #e5e5e5;
+}
+
+.vis.timeline .axis .grid.major {
+  border-color: #bfbfbf;
+}
+
+.vis.timeline .currenttime {
+  background-color: #FF7F6E;
+  width: 2px;
+  z-index: 9;
+}
+.vis.timeline .customtime {
+  background-color: #6E94FF;
+  width: 2px;
+  cursor: move;
+  z-index: 9;
+}

docs/css/prettify.css

@@ -1,87 +1,87 @@
 .com {
-    color: gray;
+  color: gray;
 }
 
 .lit {
-    color: red;
+  color: red;
 }
 
 .pun {
-    color: gray;
+  color: gray;
 }
 
 .pln {
-    color: #333333;
+  color: #333333;
 }
 
 pre.prettyprint {
-    border: 1px solid lightgray;
-    background-color: #fcfcfc;
-    padding: 5px;
+  border: 1px solid lightgray;
+  background-color: #fcfcfc;
+  padding: 5px;
 
-    font-size: 10pt;
-    line-height: 1.5em;
-    font-family: monospace;
+  font-size: 10pt;
+  line-height: 1.5em;
+  font-family: monospace;
 }
 
 ol.linenums {
-    margin-top:0;
-    margin-bottom:0;
+  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;
+  list-style:none;
 }
 
 li.L1,li.L3,li.L5,li.L7,li.L9 {
-    background:#eee;
+  background:#eee;
 }
 
 .str,.atv {
-    color: green;
+  color: green;
 }
 
 .kwd,.tag {
-    color:#2B7CE9;
+  color:#2B7CE9;
 }
 
 .typ,.atn,.dec {
-    color: darkorange;
+  color: darkorange;
 }
 
 @media print {
-    .com {
-        color:#600;
-        font-style:italic;
-    }
-
-    .typ {
-        color:#404;
-        font-weight:700;
-    }
-
-    .lit {
-        color:#044;
-    }
-
-    .pun {
-        color:#440;
-    }
-
-    .pln {
-        color:#000;
-    }
-
-    .atn {
-        color:#404;
-    }
-
-    .str,.atv {
-        color:#060;
-    }
-
-    .kwd,.tag {
-        color:#006;
-        font-weight:700;
-    }
+  .com {
+    color:#600;
+    font-style:italic;
+  }
+
+  .typ {
+    color:#404;
+    font-weight:700;
+  }
+
+  .lit {
+    color:#044;
+  }
+
+  .pun {
+    color:#440;
+  }
+
+  .pln {
+    color:#000;
+  }
+
+  .atn {
+    color:#404;
+  }
+
+  .str,.atv {
+    color:#060;
+  }
+
+  .kwd,.tag {
+    color:#006;
+    font-weight:700;
+  }
 }

docs/css/style.css

@@ -1,77 +1,77 @@
 html, body {
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    margin: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
 }
 
 body, td, th {
-    font-family: arial, sans-serif;
-    font-size: 11pt;
-    color: #4D4D4D;
-    line-height: 1.7em;
+  font-family: arial, sans-serif;
+  font-size: 11pt;
+  color: #4D4D4D;
+  line-height: 1.7em;
 }
 
 #container {
-    position: relative;
-    margin: 0 auto;
-    padding: 10px 10px 50px 10px;
-    width: 700px;
-    max-width: 100%;
-    box-sizing: border-box;
+  position: relative;
+  margin: 0 auto;
+  padding: 10px 10px 50px 10px;
+  width: 700px;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 h1 {
-    font-size: 180%;
-    font-weight: bold;
-    padding: 0;
-    margin: 1em 0 1em 0;
+  font-size: 180%;
+  font-weight: bold;
+  padding: 0;
+  margin: 1em 0 1em 0;
 }
 
 h2 {
-    padding-top: 20px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #a0c0f0;
-    color: #2B7CE9;
+  padding-top: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #a0c0f0;
+  color: #2B7CE9;
 }
 
 h3 {
-    font-size: 140%;
+  font-size: 140%;
 }
 
 a > img {
-    border: none;
+  border: none;
 }
 
 a {
-    color: #2B7CE9;
-    text-decoration: none;
+  color: #2B7CE9;
+  text-decoration: none;
 }
 
 a:visited {
-    color: #2E60A4;
+  color: #2E60A4;
 }
 
 a:hover {
-    color: red;
-    text-decoration: underline;
+  color: red;
+  text-decoration: underline;
 }
 
 table {
-    border-collapse: collapse;
+  border-collapse: collapse;
 }
 
 th {
-    font-weight: bold;
-    border: 1px solid lightgray;
-    background-color: #E5E5E5;
-    text-align: left;
-    vertical-align: top;
-    padding: 5px;
+  font-weight: bold;
+  border: 1px solid lightgray;
+  background-color: #E5E5E5;
+  text-align: left;
+  vertical-align: top;
+  padding: 5px;
 }
 
 td {
-    border: 1px solid lightgray;
-    padding: 5px;
-    vertical-align: top;
+  border: 1px solid lightgray;
+  padding: 5px;
+  vertical-align: top;
 }

docs/dataview.html

@@ -2,69 +2,69 @@
 <html>
 
 <head>
-    <title>vis.js | DataView documentation</title>
+  <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/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>
+  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
 
 <body onload="prettyPrint();">
 <div id="container">
 
-    <h1>DataView documentation</h1>
+<h1>DataView documentation</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="#Getting_Data">Getting Data</a></li>
-        <li><a href="#Subscriptions">Subscriptions</a></li>
-        <li><a href="#Data_Policy">Data Policy</a></li>
-    </ul>
+<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="#Getting_Data">Getting Data</a></li>
+  <li><a href="#Subscriptions">Subscriptions</a></li>
+  <li><a href="#Data_Policy">Data Policy</a></li>
+</ul>
 
 
-    <h2 id="Overview">Overview</h2>
+<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 on changes in a DataView, and easily get filtered or
-        formatted data without having to specify filters and field types all
-        the time.
-    </p>
+<p>
+  A DataView offers a filtered and/or formatted view on a
+  <a href="dataset.html">DataSet</a>.
+  One can subscribe on 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>
+<h2 id="Example">Example</h2>
 
-    <p>
-        The following example shows how to use a DataView.
-    </p>
+<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'}
+  {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']
+  filter: function (item) {
+    return (item.group == 1);
+  },
+  fields: ['id', 'text', 'date']
 });
 
 // subscribe to any change in the DataView
 view.subscribe('*', function (event, params, senderId) {
-    console.log('event', event, params);
+  console.log('event', event, params);
 });
 
 // update an item in the data set
@@ -78,131 +78,131 @@ console.log('ids', ids); // will output [1, 2]
 var items = view.get();
 </pre>
 
-    <h2 id="Construction">Construction</h2>
+<h2 id="Construction">Construction</h2>
 
 
-    <p>
-        A DataView can be constructed as:
-    </p>
+<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>
-                <tr>
-                    <th>Name</th>
-                    <th>Type</th>
-                    <th>Description</th>
-                </tr>
-
-                <tr>
-                    <td>convert</td>
-                    <td>Object.&lt;String,&nbsp;String&gt;</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;]</td>
-                    <td>
-                        An array with field names.
-                        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>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="Getting_Data">Getting Data</h2>
-
-    <p>
-        Data of the DataView can be retrieved using the method <code>get</code>.
-    </p>
+<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>
+      <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+      </tr>
+
+      <tr>
+        <td>convert</td>
+        <td>Object.&lt;String,&nbsp;String&gt;</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;]</td>
+        <td>
+          An array with field names.
+          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>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="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_Filtering">Data Filtering</a> and
-        <a href="dataset.html#Data_Formatting">Data Formatting</a> for more
-        information.
-    </p>
+<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_Filtering">Data Filtering</a> and
+  <a href="dataset.html#Data_Formatting">Data Formatting</a> for more
+  information.
+</p>
 
 <pre class="prettyprint lang-js">
 var items = view.get({
-    fields: ['id', 'score'],
-    filter: function (item) {
-        return (item.score > 50);
-    }
+  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>
+<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);
-    }
+  filter: function (item) {
+    return (item.group == 2);
+  }
 });
 
 // subscribe to any change in the DataView
 view.subscribe('*', function (event, params, senderId) {
-    console.log('event:', event, 'params:', params, 'senderId:', senderId);
+  console.log('event:', event, 'params:', params, 'senderId:', senderId);
 });
 
 // add, update, and remove data in the DataSet...
@@ -210,11 +210,11 @@ view.subscribe('*', function (event, params, senderId) {
 
 
 
-    <h2 id="Data_Policy">Data Policy</h2>
-    <p>
-        All code and data is processed and rendered in the browser.
-        No data is sent to any server.
-    </p>
+<h2 id="Data_Policy">Data Policy</h2>
+<p>
+  All code and data is processed and rendered in the browser.
+  No data is sent to any server.
+</p>
 
 </div>
 </body>

docs/index.html

@@ -2,201 +2,204 @@
 <html>
 
 <head>
-    <title>vis.js | documentation</title>
+  <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/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>
+  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
 
 <body onload="prettyPrint();">
 <div id="container">
 
-    <h1>vis.js documentation</h1>
-
-    <p>
-        Vis.js is a dynamic, browser based visualization library.
-        The library is designed to be easy to use, handle large amounts
-        of dynamic data, and enable manipulation of the data.
-    </p>
-
-    <p>
-        The library is developed by
-        <a href="http://almende.com" target="_blank">Almende B.V.</a>
-    </p>
-
-    <h2 id="Components">Components</h2>
-
-    <p>
-        Vis.js contains of the following components:
-    </p>
-
-    <ul>
-        <li>
-            <a href="dataset.html"><b>DataSet</b></a>.
-            A flexible key/value based data set.
-            Add, update, and remove items. Subscribe on changes in the data set.
-            A DataSet can filter and order items, and convert fields of items.
-        </li>
-        <li>
-            <a href="dataview.html"><b>DataView</b></a>.
-            A filtered and/or formatted view on a DataSet.
-        </li>
-        <li>
-            <a href="graph.html"><b>Graph</b></a>.
-            Display a graph or network with nodes and edges.
-        </li>
-        <li>
-            <a href="timeline.html"><b>Timeline</b></a>.
-            Display different types of data on a timeline. The timeline and the
-            items on the timeline can be interactively moved, zoomed, and
-            manipulated.
-        </li>
-    </ul>
-
-    <div style="text-align: center;">
-        <a href="img/vis_overview.png" target="_blank">
-            <img src="img/vis_overview.png" style="width: 250px; "/><br>
-            (click for a larger view)
-        </a>
-    </div>
-
-
-    <h2 id="Install">Install</h2>
-
-    <h3>npm</h3>
+  <h1>vis.js documentation</h1>
+
+  <p>
+    Vis.js is a dynamic, browser based visualization library.
+    The library is designed to be easy to use, handle large amounts
+    of dynamic data, and enable manipulation of the data.
+  </p>
+
+  <p>
+    The library is developed by
+    <a href="http://almende.com" target="_blank">Almende B.V.</a>
+  </p>
+
+  <h2 id="Components">Components</h2>
+
+  <p>
+    Vis.js contains of the following components:
+  </p>
+
+  <ul>
+    <li>
+      <a href="dataset.html"><b>DataSet</b></a>.
+      A flexible key/value based data set.
+      Add, update, and remove items. Subscribe on changes in the data set.
+      A DataSet can filter and order items, and convert fields of items.
+    </li>
+    <li>
+      <a href="dataview.html"><b>DataView</b></a>.
+      A filtered and/or formatted view on a DataSet.
+    </li>
+    <li>
+      <a href="graph.html"><b>Graph</b></a>.
+      Display a graph or network with nodes and edges.
+    </li>
+    <li>
+      <a href="timeline.html"><b>Timeline</b></a>.
+      Display different types of data on a timeline. The timeline and the
+      items on the timeline can be interactively moved, zoomed, and
+      manipulated.
+    </li>
+  </ul>
+
+  <div style="text-align: center;">
+    <a href="img/vis_overview.png" target="_blank">
+      <img src="img/vis_overview.png" style="width: 250px; "/><br>
+      (click for a larger view)
+    </a>
+  </div>
+
+
+  <h2 id="Install">Install</h2>
+
+  <h3>npm</h3>
 
 <pre class="prettyprint">
 npm install vis
 </pre>
 
-    <h3>bower</h3>
+  <h3>bower</h3>
 
 <pre class="prettyprint">
 bower install vis
 </pre>
 
-    <h3>download</h3>
-    Download the library from the website:
-    <a href="http://visjs.org" target="_blank">http://visjs.org</a>.
+  <h3>download</h3>
+  Download the library from the website:
+  <a href="http://visjs.org" target="_blank">http://visjs.org</a>.
 
-    <h2 id="Load">Load</h2>
+  <h2 id="Load">Load</h2>
 
-    <p>
-        To use a component, include the javascript file of vis in your web page:
-    </p>
+  <p>
+    To load vis.js, include the javascript and css files of vis in your web page:
+  </p>
 
 <pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
-    &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script type="text/javascript"&gt;
-    // ... load a visualization
+  // ... load a visualization
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
-    <p>
-        or load vis.js using require.js:
-    </p>
+  <p>
+    or load vis.js using require.js:
+  </p>
 
 <pre class="prettyprint lang-js">
 require.config({
-    paths: {
-        vis: 'path/to/vis',
-    }
+  paths: {
+    vis: 'path/to/vis',
+  }
 });
 
 require(['vis'], function (math) {
-    // ... load a visualization
+  // ... load a visualization
 });
 </pre>
 
-    <p>
-        A timeline can be instantiated as follows. Other components can be
-        created in a similar way.
-    </p>
+  <p>
+    A timeline can be instantiated as follows. Other components can be
+    created in a similar way.
+  </p>
 
 <pre class="prettyprint lang-js">
 var timeline = new vis.Timeline(container, data, options);
 </pre>
 
-    <p>
-        Where <code>container</code> is an HTML element, <code>data</code> is
-        an Array with data or a DataSet, and <code>options</code> is an optional
-        object with configuration options for the component.
-    </p>
+  <p>
+    Where <code>container</code> is an HTML element, <code>data</code> is
+    an Array with data or a DataSet, and <code>options</code> is an optional
+    object with configuration options for the component.
+  </p>
 
-    <h2 id="Use">Use</h2>
+  <h2 id="Use">Use</h2>
 
-    <p>
+  <p>
     A basic example on using a Timeline is shown below. More examples can be
     found in the <a href="https://github.com/almende/vis/tree/master/examples"
-            target="_blank">examples directory</a> of the project.
-    </p>
+                    target="_blank">examples directory</a> of the project.
+  </p>
 
 <pre class="prettyprint lang-html">
 &lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
-    &lt;title&gt;Timeline basic demo&lt;/title&gt;
-    &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
-
-    &lt;style type="text/css"&gt;
-        body, html {
-            font-family: sans-serif;
-        }
-    &lt;/style&gt;
+  &lt;title&gt;Timeline basic demo&lt;/title&gt;
+
+  &lt;script src="components/vis/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="components/vis/vis.css" rel="stylesheet" type="text/css" /&gt;
+
+  &lt;style type="text/css"&gt;
+    body, html {
+      font-family: sans-serif;
+    }
+  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="visualization"&gt;&lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
-    var container = document.getElementById('visualization');
-    var data = [
-        {id: 1, content: 'item 1', start: '2013-04-20'},
-        {id: 2, content: 'item 2', start: '2013-04-14'},
-        {id: 3, content: 'item 3', start: '2013-04-18'},
-        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
-        {id: 5, content: 'item 5', start: '2013-04-25'},
-        {id: 6, content: 'item 6', start: '2013-04-27'}
-    ];
-    var options = {};
-    var timeline = new vis.Timeline(container, data, options);
+  var container = document.getElementById('visualization');
+  var data = [
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ];
+  var options = {};
+  var timeline = new vis.Timeline(container, data, options);
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
 
 
-    <h2 id="license">License</h2>
+  <h2 id="license">License</h2>
 
-    <p>
-        Copyright (C) 2010-2013 Almende B.V.
-    </p>
+  <p>
+    Copyright (C) 2010-2013 Almende B.V.
+  </p>
 
-    <p>
-        Licensed under the Apache License, Version 2.0 (the "License");
-        you may not use this file except in compliance with the License.
-        You may obtain a copy of the License at
-    </p>
+  <p>
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+  </p>
 
-    <p>
-        <a href="http://www.apache.org/licenses/LICENSE-2.0"
-                target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
-    </p>
+  <p>
+    <a href="http://www.apache.org/licenses/LICENSE-2.0"
+       target="_blank">http://www.apache.org/licenses/LICENSE-2.0</a>
+  </p>
 
-    <p>
-        Unless required by applicable law or agreed to in writing, software
-        distributed under the License is distributed on an "AS IS" BASIS,
-        WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-        See the License for the specific language governing permissions and
-        limitations under the License.
-    </p>
+  <p>
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+  </p>
 
 </div>
 </body>

examples/graph/01_basic_usage.html

@@ -1,17 +1,17 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Basic usage</title>
+  <title>Graph | Basic usage</title>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <style type="text/css">
-        #mygraph {
-            width: 400px;
-            height: 400px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    #mygraph {
+      width: 400px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
 </head>
 
 <body>
@@ -19,31 +19,31 @@
 <div id="mygraph"></div>
 
 <script type="text/javascript">
-    // create an array with nodes
-    var nodes = [
-        {id: 1, label: 'Node 1'},
-        {id: 2, label: 'Node 2'},
-        {id: 3, label: 'Node 3'},
-        {id: 4, label: 'Node 4'},
-        {id: 5, label: 'Node 5'}
-    ];
-
-    // create an array with edges
-    var edges = [
-        {from: 1, to: 2},
-        {from: 1, to: 3},
-        {from: 2, to: 4},
-        {from: 2, to: 5}
-    ];
-
-    // create a graph
-    var container = document.getElementById('mygraph');
-    var data = {
-        nodes: nodes,
-        edges: edges
-    };
-    var options = {};
-    var graph = new vis.Graph(container, data, options);
+  // create an array with nodes
+  var nodes = [
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2'},
+    {id: 3, label: 'Node 3'},
+    {id: 4, label: 'Node 4'},
+    {id: 5, label: 'Node 5'}
+  ];
+
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2},
+    {from: 1, to: 3},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ];
+
+  // create a graph
+  var container = document.getElementById('mygraph');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {};
+  var graph = new vis.Graph(container, data, options);
 </script>
 
 </body>

examples/graph/02_random_nodes.html

@@ -1,105 +1,105 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Random nodes</title>
+  <title>Graph | Random nodes</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt sans;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
 
-        function draw() {
-            nodes = [];
-            edges = [];
-            var connectionCount = [];
+    function draw() {
+      nodes = [];
+      edges = [];
+      var connectionCount = [];
 
-            // randomly create some nodes and edges
-            var nodeCount = document.getElementById('nodeCount').value;
-            for (var i = 0; i < nodeCount; i++) {
-                nodes.push({
-                    id: i,
-                    label: String(i)
-                });
+      // randomly create some nodes and edges
+      var nodeCount = document.getElementById('nodeCount').value;
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
 
-                connectionCount[i] = 0;
+        connectionCount[i] = 0;
 
-                // create edges in a scale-free-graph way
-                if (i == 1) {
-                    var from = i;
-                    var to = 0;
-                    edges.push({
-                        from: from,
-                        to: to
-                    });
-                    connectionCount[from]++;
-                    connectionCount[to]++;
-                }
-                else if (i > 1) {
-                    var conn = edges.length * 2;
-                    var rand = Math.floor(Math.random() * conn);
-                    var cum = 0;
-                    var j = 0;
-                    while (j < connectionCount.length && cum < rand) {
-                        cum += connectionCount[j];
-                        j++;
-                    }
+        // create edges in a scale-free-graph way
+        if (i == 1) {
+          var from = i;
+          var to = 0;
+          edges.push({
+            from: from,
+            to: to
+          });
+          connectionCount[from]++;
+          connectionCount[to]++;
+        }
+        else if (i > 1) {
+          var conn = edges.length * 2;
+          var rand = Math.floor(Math.random() * conn);
+          var cum = 0;
+          var j = 0;
+          while (j < connectionCount.length && cum < rand) {
+            cum += connectionCount[j];
+            j++;
+          }
 
-                    var from = i;
-                    var to = j;
-                    edges.push({
-                        from: from,
-                        to: to
-                    });
-                    connectionCount[from]++;
-                    connectionCount[to]++;
-                }
-            }
+          var from = i;
+          var to = j;
+          edges.push({
+            from: from,
+            to: to
+          });
+          connectionCount[from]++;
+          connectionCount[to]++;
+        }
+      }
 
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                nodes: {
-                    shape: 'circle'
-                },
-                edges: {
-                    length: 50
-                },
-                stabilize: false
-            };
-            graph = new vis.Graph(container, data, options);
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          shape: 'circle'
+        },
+        edges: {
+          length: 50
+        },
+        stabilize: false
+      };
+      graph = new vis.Graph(container, data, options);
 
-            // add event listeners
-            vis.events.addListener(graph, 'select', function(params) {
-                document.getElementById('selection').innerHTML =
-                        'Selection: ' + graph.getSelection();
-            });
-        }
-    </script>
+      // add event listeners
+      vis.events.addListener(graph, 'select', function(params) {
+        document.getElementById('selection').innerHTML =
+            'Selection: ' + graph.getSelection();
+      });
+    }
+  </script>
 </head>
 
 <body onload="draw();">
 
 <form onsubmit="draw(); return false;">
-    <label for="nodeCount">Number of nodes:</label>
-    <input id="nodeCount" type="text" value="25" style="width: 50px;">
-    <input type="submit" value="Go">
+  <label for="nodeCount">Number of nodes:</label>
+  <input id="nodeCount" type="text" value="25" style="width: 50px;">
+  <input type="submit" value="Go">
 </form>
 <br>
 

examples/graph/03_images.html

@@ -1,78 +1,78 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Images</title>
-
-    <style type="text/css">
-        body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
-
-    <script type="text/javascript" src="../../vis.js"></script>
-
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
-
-        var DIR = 'img/refresh-cl/';
-        var LENGTH_MAIN = 150;
-        var LENGTH_SUB = 50;
-
-        // Called when the Visualization API is loaded.
-        function draw() {
-            // Create a data table with nodes.
-            nodes = [];
-
-            // Create a data table with links.
-            edges = [];
-
-            nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
-            nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
-            nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
-            edges.push({from: 1, to: 2, length: LENGTH_MAIN});
-            edges.push({from: 1, to: 3, length: LENGTH_MAIN});
-
-            for (var i = 4; i <= 7; i++) {
-                nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
-                edges.push({from: 2, to: i, length: LENGTH_SUB});
-            }
-
-            nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
-            edges.push({from: 2, to: 101, length: LENGTH_SUB});
-
-            nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
-            edges.push({from: 3, to: 102, length: LENGTH_SUB});
-
-            nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
-            edges.push({from: 1, to: 103, length: LENGTH_SUB});
-
-            nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
-            edges.push({from: 1, to: 104, length: LENGTH_SUB});
-
-            for (var i = 200; i <= 201; i++ ) {
-                nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
-                edges.push({from: 3, to: i, length: LENGTH_SUB});
-            }
-
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                stabilize: false   // stabilize positions before displaying
-            };
-            graph = new vis.Graph(container, data, options);
-        }
-    </script>
+  <title>Graph | Images</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
+
+    var DIR = 'img/refresh-cl/';
+    var LENGTH_MAIN = 150;
+    var LENGTH_SUB = 50;
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // Create a data table with nodes.
+      nodes = [];
+
+      // Create a data table with links.
+      edges = [];
+
+      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 2, length: LENGTH_MAIN});
+      edges.push({from: 1, to: 3, length: LENGTH_MAIN});
+
+      for (var i = 4; i <= 7; i++) {
+        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
+        edges.push({from: 2, to: i, length: LENGTH_SUB});
+      }
+
+      nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
+      edges.push({from: 2, to: 101, length: LENGTH_SUB});
+
+      nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
+      edges.push({from: 3, to: 102, length: LENGTH_SUB});
+
+      nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 103, length: LENGTH_SUB});
+
+      nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 104, length: LENGTH_SUB});
+
+      for (var i = 200; i <= 201; i++ ) {
+        nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
+        edges.push({from: 3, to: i, length: LENGTH_SUB});
+      }
+
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        stabilize: false   // stabilize positions before displaying
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/04_shapes.html

@@ -1,71 +1,71 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Shapes</title>
+  <title>Graph | Shapes</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 100%;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 100%;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
 
-        function draw() {
-            nodes = [
-                {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
-                {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
-                {id: 3, label: 'database', shape: 'database', group: 'group_x'},
-                {id: 4, label: 'box', shape: 'box', group: 'group_x'}
-            ];
+    function draw() {
+      nodes = [
+        {id: 1, label: 'circle', shape: 'circle', group: 'group_x'},
+        {id: 2, label: 'ellipse', shape: 'ellipse', group: 'group_x'},
+        {id: 3, label: 'database', shape: 'database', group: 'group_x'},
+        {id: 4, label: 'box', shape: 'box', group: 'group_x'}
+      ];
 
-            edges = [
-                {from: 3, to: 1, style: 'arrow'},
-                {from: 1, to: 4, style: 'dash-line'},
-                {from: 1, to: 2, style: 'arrow-center'}
-            ];
+      edges = [
+        {from: 3, to: 1, style: 'arrow'},
+        {from: 1, to: 4, style: 'dash-line'},
+        {from: 1, to: 2, style: 'arrow-center'}
+      ];
 
-            var mainId = 5;
-            nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
-            var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
-            var id = 6;
-            for (var size = 1; size < 4; size++) {
-                var groupId = id;
-                nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
-                edges.push({from: mainId, to: groupId, color: 'gray', width: size});
-                id++;
+      var mainId = 5;
+      nodes.push({id: mainId, label: 'shapes\nand\nsizes', shape: 'box', group: 'group_main'});
+      var shapes = ['dot', 'square', 'triangle', 'triangleDown', 'star'];
+      var id = 6;
+      for (var size = 1; size < 4; size++) {
+        var groupId = id;
+        nodes.push({id: id, label: 'size ' + size, shape: 'box', group: 'group' + size});
+        edges.push({from: mainId, to: groupId, color: 'gray', width: size});
+        id++;
 
-                for (var i in shapes) {
-                    if (shapes.hasOwnProperty(i)) {
-                        nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
-                        edges.push({from: groupId, to: id, color: 'gray', width: size});
-                        id++;
-                    }
-                }
-            }
-
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                stabilize: false
-            };
-            graph = new vis.Graph(container, data, options);
+        for (var i in shapes) {
+          if (shapes.hasOwnProperty(i)) {
+            nodes.push({id: id, value: size, label: shapes[i], shape: shapes[i], group: 'group' + size});
+            edges.push({from: groupId, to: id, color: 'gray', width: size});
+            id++;
+          }
         }
-    </script>
+      }
+
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        stabilize: false
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/05_social_network.html

@@ -1,76 +1,76 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Social Network</title>
+  <title>Graph | Social Network</title>
 
-    <style>
-        body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-            background: #F3F3F3;
-        }
-    </style>
+  <style>
+    body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+      background: #F3F3F3;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var DIR = 'img/soft-scraps-icons/';
+  <script type="text/javascript">
+    var DIR = 'img/soft-scraps-icons/';
 
-        var nodes = null;
-        var edges = null;
-        var graph = null;
+    var nodes = null;
+    var edges = null;
+    var graph = null;
 
-        function draw() {
-            // create people
-            nodes = [
-                {id: 1,  label: 'Algie',   image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
-                {id: 2,  label: 'Alston',  image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
-                {id: 3,  label: 'Barney',  image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
-                {id: 4,  label: 'Coley',   image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
-                {id: 5,  label: 'Grant',   image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
-                {id: 6,  label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
-                {id: 7,  label: 'Lee',     image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
-                {id: 8,  label: 'Merlin',  image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
-                {id: 9,  label: 'Mick',    image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
-                {id: 10, label: 'Tod',     image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
-            ];
+    function draw() {
+      // create people
+      nodes = [
+        {id: 1,  label: 'Algie',   image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
+        {id: 2,  label: 'Alston',  image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
+        {id: 3,  label: 'Barney',  image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
+        {id: 4,  label: 'Coley',   image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
+        {id: 5,  label: 'Grant',   image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
+        {id: 6,  label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
+        {id: 7,  label: 'Lee',     image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
+        {id: 8,  label: 'Merlin',  image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
+        {id: 9,  label: 'Mick',    image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
+        {id: 10, label: 'Tod',     image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
+      ];
 
-            // create connections
-            var color = '#BFBFBF';
-            edges = [
-                {from: 2,   to: 8,  value: 3,   label: 3,   color: color},
-                {from: 2,   to: 9,  value: 5,   label: 5,   color: color},
-                {from: 2,   to: 10, value: 1,   label: 1,   color: color},
-                {from: 4,   to: 6,  value: 8,   label: 8,   color: color},
-                {from: 5,   to: 7,  value: 2,   label: 2,   color: color},
-                {from: 4,   to: 5,  value: 1,   label: 1,   color: color},
-                {from: 9,   to: 10, value: 2,   label: 2,   color: color},
-                {from: 2,   to: 3,  value: 6,   label: 6,   color: color},
-                {from: 3,   to: 9,  value: 4,   label: 4,   color: color},
-                {from: 5,   to: 3,  value: 1,   label: 1,   color: color},
-                {from: 2,   to: 7,  value: 4,   label: 4,   color: color}
-            ];
+      // create connections
+      var color = '#BFBFBF';
+      edges = [
+        {from: 2,   to: 8,  value: 3,   label: 3,   color: color},
+        {from: 2,   to: 9,  value: 5,   label: 5,   color: color},
+        {from: 2,   to: 10, value: 1,   label: 1,   color: color},
+        {from: 4,   to: 6,  value: 8,   label: 8,   color: color},
+        {from: 5,   to: 7,  value: 2,   label: 2,   color: color},
+        {from: 4,   to: 5,  value: 1,   label: 1,   color: color},
+        {from: 9,   to: 10, value: 2,   label: 2,   color: color},
+        {from: 2,   to: 3,  value: 6,   label: 6,   color: color},
+        {from: 3,   to: 9,  value: 4,   label: 4,   color: color},
+        {from: 5,   to: 3,  value: 1,   label: 1,   color: color},
+        {from: 2,   to: 7,  value: 4,   label: 4,   color: color}
+      ];
 
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {};
-            graph = new vis.Graph(container, data, options);
-        }
-    </script>
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {};
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">
 <div id="mygraph"></div>
 <p>
-    Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
+  Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
 </p>
 
 <div id="info"></div>

examples/graph/06_groups.html

@@ -1,156 +1,156 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Groups</title>
+  <title>Graph | Groups</title>
+
+  <style>
+    body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
+
+    google.load('visualization', '1');
+
+    // Set callback to run when API is loaded
+    google.setOnLoadCallback(draw);
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      var from, to;
+
+      nodes = [];
+      edges = [];
+
+      var color = 'gray';
+      var len = undefined;
+
+      // randomly create some nodes
+      var nodeCount = parseInt(document.getElementById('nodeCount').value);
+      var nodeOffset = 0;
+      var groupMin = 0;
+      var groupMax = parseInt(document.getElementById('groupCount').value);
+      var group = groupMin;
+      var groupLeader = []; // will contain the node id with the most links of each group
+      while (group < groupMax) {
+        // randomly create some nodes
+        var i = 0;
+        var cols = parseInt(Math.sqrt(nodeCount));
+        var connectionCount = [];
+        while (i < nodeCount) {
+          nodes.push({
+            id: i + nodeOffset,
+            label: String(i + nodeOffset),
+            group: group
+          });
+          connectionCount[i] = 0;
+
+          // create links in a scale-free-graph way
+          if (i == 1) {
+            from = i;
+            to = 0;
+            edges.push({
+              from: from + nodeOffset,
+              to: to + nodeOffset,
+              length: len,
+              color: color
+            });
+            connectionCount[from]++;
+            connectionCount[to]++;
+          }
+          else if (i > 1) {
+            var conn = (i - 1) * 2;
+            var rand = Math.floor(Math.random() * conn);
+            var cum = 0;
+            var j = 0;
+            while (j < connectionCount.length && cum < rand) {
+              cum += connectionCount[j];
+              j++;
+            }
 
-    <style>
-        body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
+            from = i;
+            to = j;
+            edges.push({
+              from: from + nodeOffset,
+              to: to + nodeOffset,
+              length: len,
+              color: color
+            });
+            connectionCount[from]++;
+            connectionCount[to]++;
+          }
+
+          i++;
         }
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../../vis.js"></script>
-
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
-
-        google.load('visualization', '1');
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(draw);
-
-        // Called when the Visualization API is loaded.
-        function draw() {
-            var from, to;
-
-            nodes = [];
-            edges = [];
-
-            var color = 'gray';
-            var len = undefined;
-
-            // randomly create some nodes
-            var nodeCount = parseInt(document.getElementById('nodeCount').value);
-            var nodeOffset = 0;
-            var groupMin = 0;
-            var groupMax = parseInt(document.getElementById('groupCount').value);
-            var group = groupMin;
-            var groupLeader = []; // will contain the node id with the most links of each group
-            while (group < groupMax) {
-                // randomly create some nodes
-                var i = 0;
-                var cols = parseInt(Math.sqrt(nodeCount));
-                var connectionCount = [];
-                while (i < nodeCount) {
-                    nodes.push({
-                        id: i + nodeOffset,
-                        label: String(i + nodeOffset),
-                        group: group
-                    });
-                    connectionCount[i] = 0;
-
-                    // create links in a scale-free-graph way
-                    if (i == 1) {
-                        from = i;
-                        to = 0;
-                        edges.push({
-                            from: from + nodeOffset,
-                            to: to + nodeOffset,
-                            length: len,
-                            color: color
-                        });
-                        connectionCount[from]++;
-                        connectionCount[to]++;
-                    }
-                    else if (i > 1) {
-                        var conn = (i - 1) * 2;
-                        var rand = Math.floor(Math.random() * conn);
-                        var cum = 0;
-                        var j = 0;
-                        while (j < connectionCount.length && cum < rand) {
-                            cum += connectionCount[j];
-                            j++;
-                        }
-
-                        from = i;
-                        to = j;
-                        edges.push({
-                            from: from + nodeOffset,
-                            to: to + nodeOffset,
-                            length: len,
-                            color: color
-                        });
-                        connectionCount[from]++;
-                        connectionCount[to]++;
-                    }
-
-                    i++;
-                }
-
-                // calculate the node with the most number of connections
-                var leader = 0;
-                for (var c in connectionCount) {
-                    if (connectionCount.hasOwnProperty(c)) {
-                        if (connectionCount[c] > connectionCount[leader]) {
-                            leader = parseInt(c);
-                        }
-                    }
-                }
-
-                if (group > groupMin) {
-                    // connect to the leader of this group to the leader of a random other group
-                    from = leader + nodeOffset;
-                    to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
-                    edges.push({
-                        from: from,
-                        to: to,
-                        length: len,
-                        color: color
-                    });
-                }
-
-                // add this leader to the list
-                groupLeader[group] = leader + nodeOffset;
-
-                nodeOffset += nodeCount;
-                group++;
+
+        // calculate the node with the most number of connections
+        var leader = 0;
+        for (var c in connectionCount) {
+          if (connectionCount.hasOwnProperty(c)) {
+            if (connectionCount[c] > connectionCount[leader]) {
+              leader = parseInt(c);
             }
+          }
+        }
+
+        if (group > groupMin) {
+          // connect to the leader of this group to the leader of a random other group
+          from = leader + nodeOffset;
+          to = groupLeader[groupMin + parseInt(Math.random() * (group - groupMin))];
+          edges.push({
+            from: from,
+            to: to,
+            length: len,
+            color: color
+          });
+        }
 
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                stabilize: false,
-                nodes: {
-                    shape: 'dot'
-                },
-                edges: {
-                    length: 50
-                }
-            };
-            graph = new vis.Graph(container, data, options);
+        // add this leader to the list
+        groupLeader[group] = leader + nodeOffset;
+
+        nodeOffset += nodeCount;
+        group++;
+      }
+
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        stabilize: false,
+        nodes: {
+          shape: 'dot'
+        },
+        edges: {
+          length: 50
         }
-    </script>
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">
 <form onsubmit= "javascript: draw(); return false;">
-    Number of groups:
-    <input type="text" value="6" id="groupCount" style="width: 50px;">
-    Number of nodes per group:
-    <input type="text" value="7" id="nodeCount" style="width: 50px;">
-    <input type="submit" value="Go">
+  Number of groups:
+  <input type="text" value="6" id="groupCount" style="width: 50px;">
+  Number of nodes per group:
+  <input type="text" value="7" id="nodeCount" style="width: 50px;">
+  <input type="submit" value="Go">
 </form>
 <br>
 

examples/graph/07_selections.html

@@ -1,17 +1,17 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Selections</title>
+  <title>Graph | Selections</title>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <style type="text/css">
-        #mygraph {
-            width: 400px;
-            height: 400px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    #mygraph {
+      width: 400px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
 </head>
 
 <body>
@@ -20,45 +20,45 @@
 <div id="info"></div>
 
 <script type="text/javascript">
-    // create an array with nodes
-    var nodes = [
-        {id: 1, label: 'Node 1'},
-        {id: 2, label: 'Node 2'},
-        {id: 3, label: 'Node 3'},
-        {id: 4, label: 'Node 4'},
-        {id: 5, label: 'Node 5'}
-    ];
-
-    // create an array with edges
-    var edges = [
-        {from: 1, to: 2},
-        {from: 1, to: 3},
-        {from: 2, to: 4},
-        {from: 2, to: 5}
-    ];
+  // create an array with nodes
+  var nodes = [
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2'},
+    {id: 3, label: 'Node 3'},
+    {id: 4, label: 'Node 4'},
+    {id: 5, label: 'Node 5'}
+  ];
 
-    // create a graph
-    var container = document.getElementById('mygraph');
-    var data = {
-        nodes: nodes,
-        edges: edges
-    };
-    var options = {
-        nodes: {
-            shape: 'box'
-        }
-    };
-    graph = new vis.Graph(container, data, options);
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2},
+    {from: 1, to: 3},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ];
 
-    // add event listener
-    function onSelect() {
-        document.getElementById('info').innerHTML +=
-                'selection: ' + graph.getSelection().join(', ') + '<br>';
+  // create a graph
+  var container = document.getElementById('mygraph');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    nodes: {
+      shape: 'box'
     }
-    vis.events.addListener(graph, 'select', onSelect);
+  };
+  graph = new vis.Graph(container, data, options);
+
+  // add event listener
+  function onSelect() {
+    document.getElementById('info').innerHTML +=
+        'selection: ' + graph.getSelection().join(', ') + '<br>';
+  }
+  vis.events.addListener(graph, 'select', onSelect);
 
-    // set initial selection (id's of some nodes)
-    graph.setSelection([3, 4, 5]);
+  // set initial selection (id's of some nodes)
+  graph.setSelection([3, 4, 5]);
 </script>
 
 </body>

examples/graph/08_mobile_friendly.html

@@ -1,105 +1,105 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Graph | Mobile friendly</title>
+  <title>Graph | Mobile friendly</title>
 
-    <style type="text/css">
-        html, body {
-            font: 10pt arial;
-            padding: 0;
-            margin: 0;
-            width: 100%;
-            height: 100%;
-        }
+  <style type="text/css">
+    html, body {
+      font: 10pt arial;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
 
-        #mygraph {
-            width: 100%;
-            height: 100%;
-        }
-    </style>
+    #mygraph {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 
-    <!-- for mobile devices like android and iphone -->
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <!-- for mobile devices like android and iphone -->
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
 
-        // Called when the Visualization API is loaded.
-        function draw() {
-            nodes = [];
-            edges = [];
-            var EDGE_LENGTH = 50;
-            var connectionCount = [];
+    // Called when the Visualization API is loaded.
+    function draw() {
+      nodes = [];
+      edges = [];
+      var EDGE_LENGTH = 50;
+      var connectionCount = [];
 
-            // randomly create some nodes
-            var nodeCount = 20;
-            var cols = parseInt(Math.sqrt(nodeCount));
-            for (var i = 0; i < nodeCount; i++) {
-                nodes.push({
-                    id: i,
-                    label: '' + i
-                });
+      // randomly create some nodes
+      var nodeCount = 20;
+      var cols = parseInt(Math.sqrt(nodeCount));
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: '' + i
+        });
 
-                connectionCount[i] = 0;
+        connectionCount[i] = 0;
 
-                // create links in a scale-free-network way
-                if (i == 1) {
-                    var from = i;
-                    var to = 0;
-                    edges.push({
-                        from: from,
-                        to: to,
-                        length: EDGE_LENGTH
-                    });
-                    connectionCount[from]++;
-                    connectionCount[to]++;
-                }
-                else if (i > 1) {
-                    var conn = edges.length * 2;
-                    var rand = Math.floor(Math.random() * conn);
-                    var cum = 0;
-                    var j = 0;
-                    while (j < connectionCount.length && cum < rand) {
-                        cum += connectionCount[j];
-                        j++;
-                    }
+        // create links in a scale-free-network way
+        if (i == 1) {
+          var from = i;
+          var to = 0;
+          edges.push({
+            from: from,
+            to: to,
+            length: EDGE_LENGTH
+          });
+          connectionCount[from]++;
+          connectionCount[to]++;
+        }
+        else if (i > 1) {
+          var conn = edges.length * 2;
+          var rand = Math.floor(Math.random() * conn);
+          var cum = 0;
+          var j = 0;
+          while (j < connectionCount.length && cum < rand) {
+            cum += connectionCount[j];
+            j++;
+          }
 
-                    var from = i;
-                    var to = j;
-                    edges.push({
-                        from: from,
-                        to: to,
-                        length: EDGE_LENGTH
-                    });
-                    connectionCount[from]++;
-                    connectionCount[to]++;
-                }
-            }
+          var from = i;
+          var to = j;
+          edges.push({
+            from: from,
+            to: to,
+            length: EDGE_LENGTH
+          });
+          connectionCount[from]++;
+          connectionCount[to]++;
+        }
+      }
 
-            // Create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                stabilize: false,
-                nodes: {
-                    shape: 'dot',
-                    radius: 24,
-                    fontSize: 24
-                },
-                edges: {
-                    width: 2
-                }
-            };
-            graph = new vis.Graph(container, data, options);
+      // Create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        stabilize: false,
+        nodes: {
+          shape: 'dot',
+          radius: 24,
+          fontSize: 24
+        },
+        edges: {
+          width: 2
         }
-    </script>
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()" onresize="graph.redraw();">

examples/graph/09_sizing.html

@@ -1,77 +1,77 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-    <title>Graph | Sizing</title>
+  <title>Graph | Sizing</title>
 
-    <style type="text/css">
-        html, body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    html, body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
 
-        var DIR = 'img/soft-scraps-icons/';
+    var DIR = 'img/soft-scraps-icons/';
 
-        function draw() {
-            // create people.
-            // value corresponds with the age of the person
-            nodes = [
-                {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
-                {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
-                {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
-                {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
-                {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
-                {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
-                {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
-                {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
-                {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
-                {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
-            ];
+    function draw() {
+      // create people.
+      // value corresponds with the age of the person
+      nodes = [
+        {id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'},
+        {id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'},
+        {id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'},
+        {id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'},
+        {id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'},
+        {id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'},
+        {id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'},
+        {id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'},
+        {id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'},
+        {id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'}
+      ];
 
-            // create connections.
-            // value corresponds with the amount of contact between two people
-            edges = [
-                {from: 2, to: 8, value: 3, title: '3 emails per week'},
-                {from: 2, to: 9, value: 5, title: '5 emails per week'},
-                {from: 2, to: 10,value: 1, title: '1 emails per week'},
-                {from: 4, to: 6, value: 8, title: '8 emails per week'},
-                {from: 5, to: 7, value: 2, title: '2 emails per week'},
-                {from: 4, to: 5, value: 1, title: '1 emails per week'},
-                {from: 9, to: 10,value: 2, title: '2 emails per week'},
-                {from: 2, to: 3, value: 6, title: '6 emails per week'},
-                {from: 3, to: 9, value: 4, title: '4 emails per week'},
-                {from: 5, to: 3, value: 1, title: '1 emails per week'},
-                {from: 2, to: 7, value: 4, title: '4 emails per week'}
-            ];
+      // create connections.
+      // value corresponds with the amount of contact between two people
+      edges = [
+        {from: 2, to: 8, value: 3, title: '3 emails per week'},
+        {from: 2, to: 9, value: 5, title: '5 emails per week'},
+        {from: 2, to: 10,value: 1, title: '1 emails per week'},
+        {from: 4, to: 6, value: 8, title: '8 emails per week'},
+        {from: 5, to: 7, value: 2, title: '2 emails per week'},
+        {from: 4, to: 5, value: 1, title: '1 emails per week'},
+        {from: 9, to: 10,value: 2, title: '2 emails per week'},
+        {from: 2, to: 3, value: 6, title: '6 emails per week'},
+        {from: 3, to: 9, value: 4, title: '4 emails per week'},
+        {from: 5, to: 3, value: 1, title: '1 emails per week'},
+        {from: 2, to: 7, value: 4, title: '4 emails per week'}
+      ];
 
-            // Instantiate our graph object.
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                nodes: {
-                    shape: 'dot'
-                },
-                edges: {
-                    color: '#97C2FC'
-                }
-            };
-            graph = new vis.Graph(container, data, options);
+      // Instantiate our graph object.
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          shape: 'dot'
+        },
+        edges: {
+          color: '#97C2FC'
         }
-    </script>
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/10_multiline_text.html

@@ -1,47 +1,47 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-    <title>Graph | Multiline text</title>
+  <title>Graph | Multiline text</title>
 
-    <style type="text/css">
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        function draw() {
-            // create some nodes
-            var nodes = [
-                {id: 1, label: 'Node in\nthe center', shape: 'text'},
-                {id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
-                {id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
-                {id: 4, label: 'This is text\non multiple lines', shape: 'box'},
-                {id: 5, label: 'Little text', shape: 'ellipse'}
-            ];
+  <script type="text/javascript">
+    function draw() {
+      // create some nodes
+      var nodes = [
+        {id: 1, label: 'Node in\nthe center', shape: 'text'},
+        {id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'},
+        {id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'},
+        {id: 4, label: 'This is text\non multiple lines', shape: 'box'},
+        {id: 5, label: 'Little text', shape: 'ellipse'}
+      ];
 
-            // create some edges
-            var edges = [
-                {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
-                {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
-                {from: 1, to: 4, style: 'line', width: 1, length: 200},
-                {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
-            ];
+      // create some edges
+      var edges = [
+        {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
+        {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
+        {from: 1, to: 4, style: 'line', width: 1, length: 200},
+        {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
+      ];
 
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {};
-            var graph = new vis.Graph(container, data, options);
-        }
-    </script>
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {};
+      var graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/11_custom_style.html

@@ -1,128 +1,128 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-    <title>Graph | Custom style</title>
+  <title>Graph | Custom style</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var options = null;
-        var graph = null;
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var options = null;
+    var graph = null;
 
-        // Called when the Visualization API is loaded.
-        function draw() {
-            // create nodes
-            nodes = [
-                {id: 1, label: 'black node', group: 'black'},
-                {id: 2, label: 'black node', group: 'black'},
-                {id: 3, label: 'black node', group: 'black'},
-                {id: 4, label: 'red node', group: 'black', color: 'red'},
-                {id: 5, label: 'gray node', group: 'gray'},
-                {id: 6, label: 'gray node', group: 'gray'},
-                {id: 7, label: 'gray node', group: 'gray'},
-                {id: 8, label: 'gray node', group: 'gray'},
-                {id: 9, label: 'image node', group: 'white'},
-                {id: 10, label: 'image node', group: 'white'},
-                {id: 11, label: 'default node'},
-                {id: 12, label: 'default node'}
-            ];
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // create nodes
+      nodes = [
+        {id: 1, label: 'black node', group: 'black'},
+        {id: 2, label: 'black node', group: 'black'},
+        {id: 3, label: 'black node', group: 'black'},
+        {id: 4, label: 'red node', group: 'black', color: 'red'},
+        {id: 5, label: 'gray node', group: 'gray'},
+        {id: 6, label: 'gray node', group: 'gray'},
+        {id: 7, label: 'gray node', group: 'gray'},
+        {id: 8, label: 'gray node', group: 'gray'},
+        {id: 9, label: 'image node', group: 'white'},
+        {id: 10, label: 'image node', group: 'white'},
+        {id: 11, label: 'default node'},
+        {id: 12, label: 'default node'}
+      ];
 
-            // create edges
-            edges = [
-                {from: 1, to: 2},
-                {from: 1, to: 3},
-                {from: 1, to: 4},
-                {from: 5, to: 6},
-                {from: 5, to: 7},
-                {from: 5, to: 8},
-                {from: 9, to: 10},
-                {from: 9, to: 11},
-                {from: 9, to: 12},
+      // create edges
+      edges = [
+        {from: 1, to: 2},
+        {from: 1, to: 3},
+        {from: 1, to: 4},
+        {from: 5, to: 6},
+        {from: 5, to: 7},
+        {from: 5, to: 8},
+        {from: 9, to: 10},
+        {from: 9, to: 11},
+        {from: 9, to: 12},
 
-                {from: 1, to: 5},
-                {from: 5, to: 9},
-                {from: 9, to: 1}
-            ];
+        {from: 1, to: 5},
+        {from: 5, to: 9},
+        {from: 9, to: 1}
+      ];
 
-            // specify options
-            options = {
-                stabilize: false,
-                edges: {
-                    length: 120,
-                    width: 2,
-                    style: 'arrow',
-                    color: 'gray'
-                },
-                nodes: {
-                    // default for all nodes
-                    fontFace: 'times',
-                    shape: 'circle',
-                    color: {
-                        border: 'orange',
-                        background: 'yellow',
-                        highlight: {
-                            border: 'darkorange',
-                            background: 'gold'
-                        }
-                    }
-                },
-                groups: {
-                    black: {
-                        // defaults for nodes in this group
-                        radius: 15,
-                        color: 'black',
-                        fontColor: 'white',
-                        fontSize: 18,
-                        fontFace: 'courier',
-                        shape: 'rect'
-                    },
-                    gray: {
-                        color: {
-                            border: 'black',
-                            background: 'gray',
-                            highlight: {
-                                border: 'black',
-                                background: 'lightgray'
-                            }
-                        },
-                        fontSize: 18,
-                        fontFace: 'arial',
-                        shape: 'circle'
-                    },
-                    white: {
-                        color: {
-                            border: 'black',
-                            background: 'white'
-                        },
-                        fontColor: 'red',
-                        shape: 'image',
-                        image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
-                    }
-                }
-            };
-
-            // create the graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            graph = new vis.Graph(container, data, options);
+      // specify options
+      options = {
+        stabilize: false,
+        edges: {
+          length: 120,
+          width: 2,
+          style: 'arrow',
+          color: 'gray'
+        },
+        nodes: {
+          // default for all nodes
+          fontFace: 'times',
+          shape: 'circle',
+          color: {
+            border: 'orange',
+            background: 'yellow',
+            highlight: {
+              border: 'darkorange',
+              background: 'gold'
+            }
+          }
+        },
+        groups: {
+          black: {
+            // defaults for nodes in this group
+            radius: 15,
+            color: 'black',
+            fontColor: 'white',
+            fontSize: 18,
+            fontFace: 'courier',
+            shape: 'rect'
+          },
+          gray: {
+            color: {
+              border: 'black',
+              background: 'gray',
+              highlight: {
+                border: 'black',
+                background: 'lightgray'
+              }
+            },
+            fontSize: 18,
+            fontFace: 'arial',
+            shape: 'circle'
+          },
+          white: {
+            color: {
+              border: 'black',
+              background: 'white'
+            },
+            fontColor: 'red',
+            shape: 'image',
+            image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
+          }
         }
-    </script>
+      };
+
+      // create the graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/12_scalable_images.html

@@ -1,80 +1,80 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Scalable images</title>
+  <title>Graph | Scalable images</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt arial;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var DIR = 'img/soft-scraps-icons/';
+  <script type="text/javascript">
+    var DIR = 'img/soft-scraps-icons/';
 
-        var nodes = null;
-        var edges = null;
-        var graph = null;
+    var nodes = null;
+    var edges = null;
+    var graph = null;
 
-        // Called when the Visualization API is loaded.
-        function draw() {
-            // create people.
-            // value corresponds with the age of the person
-            var DIR = 'img/soft-scraps-icons/';
-            nodes = [
-                {id: 1,  value: 2,  shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
-                {id: 2,  value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
-                {id: 3,  value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
-                {id: 4,  value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
-                {id: 5,  value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
-                {id: 6,  value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
-                {id: 7,  value: 6,  shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
-                {id: 8,  value: 5,  shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
-                {id: 9,  value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
-                {id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
-            ];
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // create people.
+      // value corresponds with the age of the person
+      var DIR = 'img/soft-scraps-icons/';
+      nodes = [
+        {id: 1,  value: 2,  shape: 'image', label: 'Algie', title: 'Algie (2 years old)', image: DIR + 'Smiley-Angry-icon.png'},
+        {id: 2,  value: 31, shape: 'image', label: 'Alston', title: 'Alston (31 years old)', image: DIR + 'Smiley-Grin-icon.png'},
+        {id: 3,  value: 12, shape: 'image', label: 'Barney', title: 'Barney (12 years old)', image: DIR + 'User-Administrator-Blue-icon.png'},
+        {id: 4,  value: 16, shape: 'image', label: 'Coley', title: 'Coley (16 years old)', image: DIR + 'User-Administrator-Green-icon.png'},
+        {id: 5,  value: 17, shape: 'image', label: 'Grant', title: 'Grant (17 years old)', image: DIR + 'User-Coat-Blue-icon.png'},
+        {id: 6,  value: 15, shape: 'image', label: 'Langdon', title: 'Langdon (15 years old)', image: DIR + 'User-Coat-Green-icon.png'},
+        {id: 7,  value: 6,  shape: 'image', label: 'Lee', title: 'Lee (6 years old)', image: DIR + 'User-Coat-Red-icon.png'},
+        {id: 8,  value: 5,  shape: 'image', label: 'Merlin', title: 'Merlin (5 years old)', image: DIR + 'User-Executive-Green-icon.png'},
+        {id: 9,  value: 30, shape: 'image', label: 'Mick', title: 'Mick (30 years old)', image: DIR + 'User-Preppy-Blue-icon.png'},
+        {id: 10, value: 18, shape: 'image', label: 'Tod', title: 'Tod (18 years old)', image: DIR + 'User-Preppy-Red-icon.png'}
+      ];
 
-            // create connetions between people
-            // value corresponds with the amount of contact between two people
-            edges = [
-                {from: 2, to: 8, value: 3, title: '3 emails per week'},
-                {from: 2, to: 9, value: 5, title: '5 emails per week'},
-                {from: 2, to: 10,value: 1, title: '1 emails per week'},
-                {from: 4, to: 6, value: 8, title: '8 emails per week'},
-                {from: 5, to: 7, value: 2, title: '2 emails per week'},
-                {from: 4, to: 5, value: 1, title: '1 emails per week'},
-                {from: 9, to: 10,value: 2, title: '2 emails per week'},
-                {from: 2, to: 3, value: 6, title: '6 emails per week'},
-                {from: 3, to: 9, value: 4, title: '4 emails per week'},
-                {from: 5, to: 3, value: 1, title: '1 emails per week'},
-                {from: 2, to: 7, value: 4, title: '4 emails per week'}
-            ];
+      // create connetions between people
+      // value corresponds with the amount of contact between two people
+      edges = [
+        {from: 2, to: 8, value: 3, title: '3 emails per week'},
+        {from: 2, to: 9, value: 5, title: '5 emails per week'},
+        {from: 2, to: 10,value: 1, title: '1 emails per week'},
+        {from: 4, to: 6, value: 8, title: '8 emails per week'},
+        {from: 5, to: 7, value: 2, title: '2 emails per week'},
+        {from: 4, to: 5, value: 1, title: '1 emails per week'},
+        {from: 9, to: 10,value: 2, title: '2 emails per week'},
+        {from: 2, to: 3, value: 6, title: '6 emails per week'},
+        {from: 3, to: 9, value: 4, title: '4 emails per week'},
+        {from: 5, to: 3, value: 1, title: '1 emails per week'},
+        {from: 2, to: 7, value: 4, title: '4 emails per week'}
+      ];
 
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                nodes: {
-                    widthMin: 20,  // min width in pixels
-                    widthMax: 100  // max width in pixels
-                },
-                edges: {
-                    color: 'lightgray'
-                }
-            };
-            graph = new vis.Graph(container, data, options);
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          widthMin: 20,  // min width in pixels
+          widthMax: 100  // max width in pixels
+        },
+        edges: {
+          color: 'lightgray'
         }
-    </script>
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/13_dashed_lines.html

@@ -1,65 +1,65 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Dashed lines</title>
+  <title>Graph | Dashed lines</title>
 
-    <style type="text/css">
-        body {
-            font: 10pt sans;
-        }
-        #mygraph {
-            width: 600px;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mygraph {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        // Called on page load
-        function draw() {
-            var nodes = [
-                {id: 1, label: 'dashed\nline\nexamples'},
-                {id: 2, label: 'default'},
-                {id: 3, label: 'dash.length: 20\ndash.gap: 20'},
-                {id: 4, label: 'dash.length: 20\ndash.gap: 5'},
-                {id: 5, label: 'dash.length: 5\ndash.gap: 20'},
-                {id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
-            ];
-            var edges = [
-                {from: 1, to: 2, style: 'dash-line'},
-                {from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
-                {from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
-                {from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
-                {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
-            ];
+  <script type="text/javascript">
+    // Called on page load
+    function draw() {
+      var nodes = [
+        {id: 1, label: 'dashed\nline\nexamples'},
+        {id: 2, label: 'default'},
+        {id: 3, label: 'dash.length: 20\ndash.gap: 20'},
+        {id: 4, label: 'dash.length: 20\ndash.gap: 5'},
+        {id: 5, label: 'dash.length: 5\ndash.gap: 20'},
+        {id: 6, label: 'dash.length: 20\ndash.gap: 5\ndash.altLength: 5'}
+      ];
+      var edges = [
+        {from: 1, to: 2, style: 'dash-line'},
+        {from: 1, to: 3, style: 'dash-line', dash: {length: 20, gap: 20}},
+        {from: 1, to: 4, style: 'dash-line', dash: {length: 20, gap: 5}},
+        {from: 1, to: 5, style: 'dash-line', dash: {length: 5, gap: 20}},
+        {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
+      ];
 
-            // create the graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                nodes: {
-                    shape: 'box'
-                },
-                edges: {
-                    length: 180
-                },
-                stabilize: false
-            };
-            var graph = new vis.Graph(container, data, options);
-        }
-    </script>
+      // create the graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          shape: 'box'
+        },
+        edges: {
+          length: 180
+        },
+        stabilize: false
+      };
+      var graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw();">
-    <p>
-        This example shows the different options for dashed lines.
-    </p>
+<p>
+  This example shows the different options for dashed lines.
+</p>
 
-    <div id="mygraph"></div>
+<div id="mygraph"></div>
 </body>
 </html>

examples/graph/14_dot_language.html

@@ -1,18 +1,18 @@
 <html>
 <head>
-    <title>Graph | DOT Language</title>
+  <title>Graph | DOT Language</title>
 
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 </head>
 <body>
-    <div id="mygraph"></div>
+<div id="mygraph"></div>
 
-    <script type="text/javascript">
-        var container = document.getElementById('mygraph');
-        var data = {
-            dot: 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
-        };
-        var graph = new vis.Graph(container, data);
-    </script>
+<script type="text/javascript">
+  var container = document.getElementById('mygraph');
+  var data = {
+    dot: 'digraph {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
+  };
+  var graph = new vis.Graph(container, data);
+</script>
 </body>
 </html>

examples/graph/15_dot_language_playground.html

@@ -1,201 +1,201 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | DOT language playground</title>
-
-    <script type="text/javascript" src="../../vis.js"></script>
-
-    <style type="text/css">
-        body, html {
-            font: 10pt sans;
-            width: 100%;
-            height: 100%;
-            padding: 0;
-            margin: 0;
-            color: #4d4d4d;
-        }
+  <title>Graph | DOT language playground</title>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <style type="text/css">
+    body, html {
+      font: 10pt sans;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      color: #4d4d4d;
+    }
 
-        #frame {
-            width: 100%;
-            height: 99%;
-        }
-        #frame td {
-            padding: 10px;
-            height: 100%;
-        }
-        #error {
-            color: red;
-        }
+    #frame {
+      width: 100%;
+      height: 99%;
+    }
+    #frame td {
+      padding: 10px;
+      height: 100%;
+    }
+    #error {
+      color: red;
+    }
 
-        #data {
-            width: 100%;
-            height: 100%;
-            border: 1px solid #d3d3d3;
-        }
+    #data {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #d3d3d3;
+    }
 
-        #mygraph {
-            float: left;
-            width: 100%;
-            height: 100%;
-            border: 1px solid #d3d3d3;
-            box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            overflow: hidden;
-        }
+    #mygraph {
+      float: left;
+      width: 100%;
+      height: 100%;
+      border: 1px solid #d3d3d3;
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      overflow: hidden;
+    }
 
-        textarea.example {
-            display: none;
-        }
-    </style>
+    textarea.example {
+      display: none;
+    }
+  </style>
 </head>
 <body onload="drawExample('example1')">
 
 <table id="frame">
-    <col width="50%">
-    <col width="50%">
-    <tr>
-        <td colspan="2" style="height: 50px;">
-            <h1>DOT language playground</h1>
-            <div>
-                <a href="javascript: drawExample('example1')">example 1</a>
-                <a href="javascript: drawExample('example2')">example 2</a>
-                <a href="javascript: drawExample('example3')">example 3</a>
-            </div>
-            <div>
-                <br>
-                <button id="draw">Draw</button>
-                <span id="error"></span>
-            </div>
-        </td>
-    </tr>
-    <tr>
-        <td>
-            <textarea id="data"></textarea>
-        </td>
-        <td>
-            <div id="mygraph"></div>
-        </td>
-    </tr>
+  <col width="50%">
+  <col width="50%">
+  <tr>
+    <td colspan="2" style="height: 50px;">
+      <h1>DOT language playground</h1>
+      <div>
+        <a href="javascript: drawExample('example1')">example 1</a>
+        <a href="javascript: drawExample('example2')">example 2</a>
+        <a href="javascript: drawExample('example3')">example 3</a>
+      </div>
+      <div>
+        <br>
+        <button id="draw">Draw</button>
+        <span id="error"></span>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <textarea id="data"></textarea>
+    </td>
+    <td>
+      <div id="mygraph"></div>
+    </td>
+  </tr>
 </table>
 
 <script type="text/javascript">
-    var graph, data;
-
-    var btnDraw = document.getElementById('draw');
-    var txtData = document.getElementById('data');
-    var txtError = document.getElementById('error');
-    btnDraw.onclick = draw;
-
-    // resize the graph when window resizes
-    window.onresize = function () {
-        graph.redraw()
-    };
-
-    // parse and draw the data
-    function draw () {
-        try {
-            txtError.innerHTML = '';
-
-            // Provide a string with data in DOT language
-            data = {
-                dot: txtData.value
-            };
-
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var options = {};
-            graph = new vis.Graph(container, data, options);
-        }
-        catch (err) {
-            // set the cursor at the position where the error occurred
-            var match = /\(char (.*)\)/.exec(err);
-            if (match) {
-                var pos = Number(match[1]);
-                if(txtData.setSelectionRange) {
-                    txtData.focus();
-                    txtData.setSelectionRange(pos, pos);
-                }
-            }
-
-            // show an error message
-            txtError.innerHTML =  err.toString();
-        }
+  var graph, data;
+
+  var btnDraw = document.getElementById('draw');
+  var txtData = document.getElementById('data');
+  var txtError = document.getElementById('error');
+  btnDraw.onclick = draw;
+
+  // resize the graph when window resizes
+  window.onresize = function () {
+    graph.redraw()
+  };
+
+  // parse and draw the data
+  function draw () {
+    try {
+      txtError.innerHTML = '';
+
+      // Provide a string with data in DOT language
+      data = {
+        dot: txtData.value
+      };
+
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var options = {};
+      graph = new vis.Graph(container, data, options);
     }
+    catch (err) {
+      // set the cursor at the position where the error occurred
+      var match = /\(char (.*)\)/.exec(err);
+      if (match) {
+        var pos = Number(match[1]);
+        if(txtData.setSelectionRange) {
+          txtData.focus();
+          txtData.setSelectionRange(pos, pos);
+        }
+      }
 
-    /**
-     * Draw an example
-     * @param {String} id HTML id of the textarea containing the example code
-     */
-    function drawExample(id) {
-        txtData.value = document.getElementById(id).value;
-        draw();
+      // show an error message
+      txtError.innerHTML =  err.toString();
     }
+  }
+
+  /**
+   * Draw an example
+   * @param {String} id HTML id of the textarea containing the example code
+   */
+  function drawExample(id) {
+    txtData.value = document.getElementById(id).value;
+    draw();
+  }
 </script>
 
 <textarea id="example1" class="example">
-digraph {
-    node [shape=circle fontSize=16]
-    edge [length=100, color=gray, fontColor=black]
-
-    A -> A[label=0.5];
-    B -> B[label=1.2] -> C[label=0.7] -- A;
-    B -> D;
-    D -> {B; C}
-    D -> E[label=0.2];
-    F -> F;
-    A [
-        fontColor=white,
-        color=red,
-    ]
-}
+  digraph {
+  node [shape=circle fontSize=16]
+  edge [length=100, color=gray, fontColor=black]
+
+  A -> A[label=0.5];
+  B -> B[label=1.2] -> C[label=0.7] -- A;
+  B -> D;
+  D -> {B; C}
+  D -> E[label=0.2];
+  F -> F;
+  A [
+  fontColor=white,
+  color=red,
+  ]
+  }
 </textarea>
 
 <textarea id="example2" class="example">
-digraph topology
-{
-    node[shape=circle fontSize=12]
-    edge[length=170 fontSize=12]
-    "10.0.255.1" -> "10.0.255.3"[label="1.000"];
-    "10.0.255.1" -> "10.0.255.2"[label="1.000"];
-    "10.0.255.1" -> "10.0.255.2"[label="1.000"];
-    "10.0.255.1" -> "10.0.255.3"[label="1.000"];
-    "10.0.255.2" -> "10.0.255.1"[label="1.000"];
-    "10.0.255.2" -> "10.0.255.3"[label="1.000"];
-    "10.0.255.3" -> "10.0.255.1"[label="1.000"];
-    "10.0.255.3" -> "10.0.255.2"[label="1.000"];
-    "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
-    "10.0.3.0/24"[shape=box];
-    "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
-    "10.0.2.0/24"[shape=box];
-    "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
-    "10.0.1.0/24"[shape=box];
-}
+  digraph topology
+  {
+  node[shape=circle fontSize=12]
+  edge[length=170 fontSize=12]
+  "10.0.255.1" -> "10.0.255.3"[label="1.000"];
+  "10.0.255.1" -> "10.0.255.2"[label="1.000"];
+  "10.0.255.1" -> "10.0.255.2"[label="1.000"];
+  "10.0.255.1" -> "10.0.255.3"[label="1.000"];
+  "10.0.255.2" -> "10.0.255.1"[label="1.000"];
+  "10.0.255.2" -> "10.0.255.3"[label="1.000"];
+  "10.0.255.3" -> "10.0.255.1"[label="1.000"];
+  "10.0.255.3" -> "10.0.255.2"[label="1.000"];
+  "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
+  "10.0.3.0/24"[shape=box];
+  "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
+  "10.0.2.0/24"[shape=box];
+  "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
+  "10.0.1.0/24"[shape=box];
+  }
 </textarea>
 
 <textarea id="example3" class="example">
-digraph G  {
-    // note: not all attributes are recognized and supported by Network
-    //       unrecognized attributes are ignored
-
-    node[width=.25,height=.375,fontsize=15]
-    node [shape=filled fillcolor=#F1AAF0]
-    0-> 0 ;
-    1-> 1 ;
-    2-> 2 ;
-    3-> 3 ;
-    4-> 4 ;
-    5-> 5 ;
-    6-> 6 ;
-    7-> 5 ;
-    8-> 8 ;
-    9-> 9 ;
-    10-> 10 ;
-    11-> 10 ;
-    12-> 12 ;
-    13-> 5 ;
-    14-> 10 ;
-    15-> 0 ;
-}
+  digraph G  {
+  // note: not all attributes are recognized and supported by Network
+  //       unrecognized attributes are ignored
+
+  node[width=.25,height=.375,fontsize=15]
+  node [shape=filled fillcolor=#F1AAF0]
+  0-> 0 ;
+  1-> 1 ;
+  2-> 2 ;
+  3-> 3 ;
+  4-> 4 ;
+  5-> 5 ;
+  6-> 6 ;
+  7-> 5 ;
+  8-> 8 ;
+  9-> 9 ;
+  10-> 10 ;
+  11-> 10 ;
+  12-> 12 ;
+  13-> 5 ;
+  14-> 10 ;
+  15-> 0 ;
+  }
 </textarea>
 
 </body>

examples/graph/16_dynamic_data.html

@@ -1,264 +1,264 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | DataSet</title>
+  <title>Graph | DataSet</title>
 
-    <style type="text/css">
-        html, body {
-            font: 11pt arial;
-        }
+  <style type="text/css">
+    html, body {
+      font: 11pt arial;
+    }
 
-        h1 {
-            font-size: 150%;
-            margin: 5px 0;
-        }
+    h1 {
+      font-size: 150%;
+      margin: 5px 0;
+    }
 
-        h2 {
-            font-size: 100%;
-            margin: 5px 0;
-        }
+    h2 {
+      font-size: 100%;
+      margin: 5px 0;
+    }
 
-        table.view {
-            width: 100%;
-        }
+    table.view {
+      width: 100%;
+    }
 
-        table td {
-            vertical-align: top;
-        }
+    table td {
+      vertical-align: top;
+    }
 
-        table table {
-            background-color: #f5f5f5;
-            border: 1px solid #e5e5e5;
-        }
+    table table {
+      background-color: #f5f5f5;
+      border: 1px solid #e5e5e5;
+    }
 
-        table table td {
-            vertical-align: middle;
-        }
+    table table td {
+      vertical-align: middle;
+    }
 
-        input[type=text], pre {
-            border: 1px solid lightgray;
-        }
+    input[type=text], pre {
+      border: 1px solid lightgray;
+    }
 
-        pre {
-            margin: 0;
-            padding: 5px;
-            font-size: 10pt;
-        }
+    pre {
+      margin: 0;
+      padding: 5px;
+      font-size: 10pt;
+    }
 
-        #graph {
-            width: 100%;
-            height: 400px;
-            border: 1px solid lightgray;
-        }
-    </style>
+    #graph {
+      width: 100%;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-    <script type="text/javascript" src="../../vis.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+  <script type="text/javascript" src="../../dist/vis.js"></script>
 
-    <script type="text/javascript">
-        var nodes, edges, graph;
+  <script type="text/javascript">
+    var nodes, edges, graph;
 
-        // convenience method to stringify a JSON object
-        function toJSON (obj) {
-            return JSON.stringify(obj, null, 4);
-        }
+    // convenience method to stringify a JSON object
+    function toJSON (obj) {
+      return JSON.stringify(obj, null, 4);
+    }
 
-        $(window).load(function () {
-            // attach actions to the node buttons
-            $('#node-add').click(function () {
-                try {
-                    nodes.add({
-                        id: $('#node-id').val(),
-                        label: $('#node-label').val()
-                    });
-                }
-                catch (err) {
-                    alert(err);
-                }
-            });
-            $('#node-update').click(function () {
-                try {
-                    nodes.update({
-                        id: $('#node-id').val(),
-                        label: $('#node-label').val()
-                    });
-                }
-                catch (err) {
-                    alert(err);
-                }
-            });
-            $('#node-remove').click(function () {
-                try {
-                    var id = $('#node-id').val();
-                    nodes.remove(id);
-                }
-                catch (err) {
-                    alert(err);
-                }
-            });
+    $(window).load(function () {
+      // attach actions to the node buttons
+      $('#node-add').click(function () {
+        try {
+          nodes.add({
+            id: $('#node-id').val(),
+            label: $('#node-label').val()
+          });
+        }
+        catch (err) {
+          alert(err);
+        }
+      });
+      $('#node-update').click(function () {
+        try {
+          nodes.update({
+            id: $('#node-id').val(),
+            label: $('#node-label').val()
+          });
+        }
+        catch (err) {
+          alert(err);
+        }
+      });
+      $('#node-remove').click(function () {
+        try {
+          var id = $('#node-id').val();
+          nodes.remove(id);
+        }
+        catch (err) {
+          alert(err);
+        }
+      });
 
-            // attach actions to the edge buttons
-            $('#edge-add').click(function () {
-                try {
-                    edges.add({
-                        id: $('#edge-id').val(),
-                        from: $('#edge-from').val(),
-                        to: $('#edge-to').val()
-                    });
-                }
-                catch (err) {
-                    alert(err);
-                }
-            });
-            $('#edge-update').click(function () {
-                try {
-                    edges.update({
-                        id: $('#edge-id').val(),
-                        from: $('#edge-from').val(),
-                        to: $('#edge-to').val()
-                    });
-                }
-                catch (err) {
-                    alert(err);
-                }
-            });
-            $('#edge-remove').click(function () {
-                try {
-                    var id = $('#edge-id').val();
-                    edges.remove(id);
-                }
-                catch (err) {
-                    alert(err);
-                }
-            });
+      // attach actions to the edge buttons
+      $('#edge-add').click(function () {
+        try {
+          edges.add({
+            id: $('#edge-id').val(),
+            from: $('#edge-from').val(),
+            to: $('#edge-to').val()
+          });
+        }
+        catch (err) {
+          alert(err);
+        }
+      });
+      $('#edge-update').click(function () {
+        try {
+          edges.update({
+            id: $('#edge-id').val(),
+            from: $('#edge-from').val(),
+            to: $('#edge-to').val()
+          });
+        }
+        catch (err) {
+          alert(err);
+        }
+      });
+      $('#edge-remove').click(function () {
+        try {
+          var id = $('#edge-id').val();
+          edges.remove(id);
+        }
+        catch (err) {
+          alert(err);
+        }
+      });
 
-            // create an array with nodes
-            nodes = new vis.DataSet();
-            nodes.subscribe('*', function () {
-                $('#nodes').html(toJSON(nodes.get()));
-            });
-            nodes.add([
-                {id: '1', label: 'Node 1'},
-                {id: '2', label: 'Node 2'},
-                {id: '3', label: 'Node 3'},
-                {id: '4', label: 'Node 4'},
-                {id: '5', label: 'Node 5'}
-            ]);
+      // create an array with nodes
+      nodes = new vis.DataSet();
+      nodes.subscribe('*', function () {
+        $('#nodes').html(toJSON(nodes.get()));
+      });
+      nodes.add([
+        {id: '1', label: 'Node 1'},
+        {id: '2', label: 'Node 2'},
+        {id: '3', label: 'Node 3'},
+        {id: '4', label: 'Node 4'},
+        {id: '5', label: 'Node 5'}
+      ]);
 
-            // create an array with edges
-            edges = new vis.DataSet();
-            edges.subscribe('*', function () {
-                $('#edges').html(toJSON(edges.get()));
-            });
-            edges.add([
-                {id: '1', from: '1', to: '2'},
-                {id: '2', from: '1', to: '3'},
-                {id: '3', from: '2', to: '4'},
-                {id: '4', from: '2', to: '5'}
-            ]);
+      // create an array with edges
+      edges = new vis.DataSet();
+      edges.subscribe('*', function () {
+        $('#edges').html(toJSON(edges.get()));
+      });
+      edges.add([
+        {id: '1', from: '1', to: '2'},
+        {id: '2', from: '1', to: '3'},
+        {id: '3', from: '2', to: '4'},
+        {id: '4', from: '2', to: '5'}
+      ]);
 
-            // create a graph
-            var container = $('#graph').get(0);
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {};
-            graph = new vis.Graph(container, data, options);
-        });
-    </script>
+      // create a graph
+      var container = $('#graph').get(0);
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {};
+      graph = new vis.Graph(container, data, options);
+    });
+  </script>
 </head>
 
 <body>
 
 <p>
-    This example demonstrates dynamically adding, updating and removing nodes
-    and edges using a DataSet.
+  This example demonstrates dynamically adding, updating and removing nodes
+  and edges using a DataSet.
 </p>
 
 <h1>Adjust</h1>
 <table>
-    <tr>
-        <td>
-            <h2>Node</h2>
-            <table>
-                <tr>
-                    <td></td>
-                    <td><label for="node-id">Id</label></td>
-                    <td><input id="node-id" type="text" value="6"></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td><label for="node-label">Label</label></td>
-                    <td><input id="node-label" type="text" value="Node 6"></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td>Action</td>
-                    <td>
-                        <button id="node-add">Add</button>
-                        <button id="node-update">Update</button>
-                        <button id="node-remove">Remove</button>
-                    </td>
-                </tr>
-            </table>
-        </td>
-        <td>
-            <h2>Edge</h2>
-            <table>
-                <tr>
-                    <td></td>
-                    <td><label for="edge-id">Id</label></td>
-                    <td><input id="edge-id" type="text" value="5"></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td><label for="edge-from">From</label></td>
-                    <td><input id="edge-from" type="text" value="3"></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td><label for="edge-to">To</label></td>
-                    <td><input id="edge-to" type="text" value="4"></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td>Action</td>
-                    <td>
-                        <button id="edge-add">Add</button>
-                        <button id="edge-update">Update</button>
-                        <button id="edge-remove">Remove</button>
-                    </td>
-                </tr>
-            </table>
-        </td>
-    </tr>
+  <tr>
+    <td>
+      <h2>Node</h2>
+      <table>
+        <tr>
+          <td></td>
+          <td><label for="node-id">Id</label></td>
+          <td><input id="node-id" type="text" value="6"></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td><label for="node-label">Label</label></td>
+          <td><input id="node-label" type="text" value="Node 6"></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>Action</td>
+          <td>
+            <button id="node-add">Add</button>
+            <button id="node-update">Update</button>
+            <button id="node-remove">Remove</button>
+          </td>
+        </tr>
+      </table>
+    </td>
+    <td>
+      <h2>Edge</h2>
+      <table>
+        <tr>
+          <td></td>
+          <td><label for="edge-id">Id</label></td>
+          <td><input id="edge-id" type="text" value="5"></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td><label for="edge-from">From</label></td>
+          <td><input id="edge-from" type="text" value="3"></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td><label for="edge-to">To</label></td>
+          <td><input id="edge-to" type="text" value="4"></td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>Action</td>
+          <td>
+            <button id="edge-add">Add</button>
+            <button id="edge-update">Update</button>
+            <button id="edge-remove">Remove</button>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
 
 </table>
 
 <h1>View</h1>
 <table class="view">
-    <colgroup>
-        <col width="25%">
-        <col width="25%">
-        <col width="50%">
-    </colgroup>
-    <tr>
-        <td>
-            <h2>Nodes</h2>
-            <pre id="nodes"></pre>
-        </td>
+  <colgroup>
+    <col width="25%">
+    <col width="25%">
+    <col width="50%">
+  </colgroup>
+  <tr>
+    <td>
+      <h2>Nodes</h2>
+      <pre id="nodes"></pre>
+    </td>
 
-        <td>
-            <h2>Edges</h2>
-            <pre id="edges"></pre>
-        </td>
+    <td>
+      <h2>Edges</h2>
+      <pre id="edges"></pre>
+    </td>
 
-        <td>
-            <h2>Graph</h2>
-            <div id="graph"></div>
-        </td>
-    </tr>
+    <td>
+      <h2>Graph</h2>
+      <div id="graph"></div>
+    </td>
+  </tr>
 </table>
 
 </body>

examples/graph/17_network_info.html

@@ -1,149 +1,149 @@
 <!DOCTYPE html>
 <!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-    <title>Graph | Images</title>
-
-    <style type="text/css">
-        body {
-            font: 10pt arial;
-            padding: 0;
-            margin: 0;
-            overflow: hidden;
+  <title>Graph | Images</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+    #mygraph {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.min.js"></script>
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var graph = null;
+
+    var LENGTH_MAIN = 350,
+        LENGTH_SERVER = 150,
+        LENGTH_SUB = 50,
+        WIDTH_SCALE = 2,
+        GREEN = 'green',
+        RED = '#C5000B',
+        ORANGE = 'orange',
+    //GRAY = '#666666',
+        GRAY = 'gray',
+        BLACK = '#2B1B17';
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // Create a data table with nodes.
+      nodes = [];
+
+      // Create a data table with links.
+      edges = [];
+
+      nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
+      nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
+      nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
+      edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'});
+      edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
+
+      // group around 2
+      for (var i = 100; i <= 104; i++) {
+        var value = 1;
+        var width = WIDTH_SCALE * 2;
+        var color = GRAY;
+        var label = null;
+
+        if (i === 103) {
+          value = 5;
+          width = 3;
         }
-        #mygraph {
-            width: 100%;
-            height: 100%;
-            box-sizing: border-box;
+        if (i === 102) {
+          color = RED;
+          label = 'error';
         }
-    </style>
-
-    <script type="text/javascript" src="../../vis.min.js"></script>
-
-    <script type="text/javascript">
-        var nodes = null;
-        var edges = null;
-        var graph = null;
-
-        var LENGTH_MAIN = 350,
-            LENGTH_SERVER = 150,
-            LENGTH_SUB = 50,
-            WIDTH_SCALE = 2,
-            GREEN = 'green',
-            RED = '#C5000B',
-            ORANGE = 'orange',
-            //GRAY = '#666666',
-            GRAY = 'gray',
-            BLACK = '#2B1B17';
-
-        // Called when the Visualization API is loaded.
-        function draw() {
-            // Create a data table with nodes.
-            nodes = [];
-
-            // Create a data table with links.
-            edges = [];
-
-            nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
-            nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
-            nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
-            edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'});
-            edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
-
-            // group around 2
-            for (var i = 100; i <= 104; i++) {
-                var value = 1;
-                var width = WIDTH_SCALE * 2;
-                var color = GRAY;
-                var label = null;
-
-                if (i === 103) {
-                    value = 5;
-                    width = 3;
-                }
-                if (i === 102) {
-                    color = RED;
-                    label = 'error';
-                }
-
-                nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
-                edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
-            }
-            nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
-            edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE});
-
-            // group around 3
-            nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
-            edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2});
-            for (var i = 230; i <= 231; i++ ) {
-                nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
-                edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE});
-            }
-
-            // group around 1
-            nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
-            edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'});
-            nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
-            edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'});
-            nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
-            edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'});
-
-            nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
-            edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
-
-
-            // legend
-            var mygraph = document.getElementById('mygraph');
-            var x = - mygraph.clientWidth / 2 + 50;
-            var y = - mygraph.clientHeight / 2 + 50;
-            var step = 70;
-            nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
-            nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
-            nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
-            nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
-            nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
-
-            // create a graph
-            var container = document.getElementById('mygraph');
-            var data = {
-                nodes: nodes,
-                edges: edges
-            };
-            var options = {
-                stabilize: false,   // stabilize positions before displaying
-                nodes: {
-                    radiusMin: 16,
-                    radiusMax: 32,
-                    fontColor: BLACK
-                },
-                edges: {
-                    color: GRAY
-                },
-                groups: {
-                    'switch': {
-                        shape: 'triangle',
-                        color: '#FF9900' // orange
-                    },
-                    desktop: {
-                        shape: 'dot',
-                        color: "#2B7CE9" // blue
-                    },
-                    mobile: {
-                        shape: 'dot',
-                        color: "#5A1E5C" // purple
-                    },
-                    server: {
-                        shape: 'square',
-                        color: "#C5000B" // red
-                    },
-                    internet: {
-                        shape: 'square',
-                        color: "#109618" // green
-                    }
-                }
-            };
-            graph = new vis.Graph(container, data, options);
+
+        nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
+        edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
+      }
+      nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
+      edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE});
+
+      // group around 3
+      nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
+      edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2});
+      for (var i = 230; i <= 231; i++ ) {
+        nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
+        edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE});
+      }
+
+      // group around 1
+      nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
+      edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'});
+      nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
+      edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'});
+      nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
+      edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'});
+
+      nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
+      edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
+
+
+      // legend
+      var mygraph = document.getElementById('mygraph');
+      var x = - mygraph.clientWidth / 2 + 50;
+      var y = - mygraph.clientHeight / 2 + 50;
+      var step = 70;
+      nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
+      nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
+      nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
+      nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
+      nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
+
+      // create a graph
+      var container = document.getElementById('mygraph');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        stabilize: false,   // stabilize positions before displaying
+        nodes: {
+          radiusMin: 16,
+          radiusMax: 32,
+          fontColor: BLACK
+        },
+        edges: {
+          color: GRAY
+        },
+        groups: {
+          'switch': {
+            shape: 'triangle',
+            color: '#FF9900' // orange
+          },
+          desktop: {
+            shape: 'dot',
+            color: "#2B7CE9" // blue
+          },
+          mobile: {
+            shape: 'dot',
+            color: "#5A1E5C" // purple
+          },
+          server: {
+            shape: 'square',
+            color: "#C5000B" // red
+          },
+          internet: {
+            shape: 'square',
+            color: "#109618" // green
+          }
         }
-    </script>
+      };
+      graph = new vis.Graph(container, data, options);
+    }
+  </script>
 </head>
 
 <body onload="draw()">

examples/graph/graphviz/graphviz_gallery.html

@@ -1,86 +1,86 @@
 <html>
 <head>
-    <title>Graph | Graphviz Gallery</title>
+  <title>Graph | Graphviz Gallery</title>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
-    <script type="text/javascript" src="../../../vis.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
 
-    <style type="text/css">
-        p {
-            width: 600px;
-        }
-        html, body, select {
-            font: 11pt arial;
-        }
-        #mygraph {
-            width: 100%;
-            height: 600px;
-            border: 1px solid lightgray;
-        }
-    </style>
+  <style type="text/css">
+    p {
+      width: 600px;
+    }
+    html, body, select {
+      font: 11pt arial;
+    }
+    #mygraph {
+      width: 100%;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
 </head>
 <body>
 
 <script>
-    if (location.href.substr(0, 5) == 'file:') {
-        document.write(
-            '<p style="color: red;">' +
-                'Error: Cannot fetch the example data because of security ' +
-                'restrictions in JavaScript. Run the example from a server ' +
-                'instead of as a local file to resolve this problem. ' +
-                'Alternatively, you can load DOT graphs in ' +
-                'the <a href="../15_dot_language_playground.html" ' +
-                'style="color:red;">playground</a>.' +
+  if (location.href.substr(0, 5) == 'file:') {
+    document.write(
+        '<p style="color: red;">' +
+            'Error: Cannot fetch the example data because of security ' +
+            'restrictions in JavaScript. Run the example from a server ' +
+            'instead of as a local file to resolve this problem. ' +
+            'Alternatively, you can load DOT graphs in ' +
+            'the <a href="../15_dot_language_playground.html" ' +
+            'style="color:red;">playground</a>.' +
             '</p>');
-    }
+  }
 </script>
 
 <p>
-    The following examples are unmodified copies from the
-    <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
+  The following examples are unmodified copies from the
+  <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
 </p>
 <p>
-    Note that some style attributes of Graphviz are not supported by vis.js,
-    and that vis.js offers options not supported by Graphviz (which could make
-    some examples look much nicer).
+  Note that some style attributes of Graphviz are not supported by vis.js,
+  and that vis.js offers options not supported by Graphviz (which could make
+  some examples look much nicer).
 </p>
 
 <p>
-    <label for="url">Select an example:</label>
-    <select id="url" onchange="loadData()">
-        <option value="data/fsm.gv.txt">fsm</option>
-        <option value="data/hello.gv.txt">hello</option>
-        <option value="data/process.gv.txt">process</option>
-        <option value="data/siblings.gv.txt">siblings</option>
-        <option value="data/softmaint.gv.txt">softmaint</option>
-        <option value="data/traffic_lights.gv.txt">traffic_lights</option>
-        <option value="data/transparency.gv.txt">transparency</option>
-        <option value="data/twopi2.gv.txt">twopi2</option>
-        <option value="data/unix.gv.txt">unix</option>
-        <option value="data/world.gv.txt">world</option>
-    </select>
+  <label for="url">Select an example:</label>
+  <select id="url" onchange="loadData()">
+    <option value="data/fsm.gv.txt">fsm</option>
+    <option value="data/hello.gv.txt">hello</option>
+    <option value="data/process.gv.txt">process</option>
+    <option value="data/siblings.gv.txt">siblings</option>
+    <option value="data/softmaint.gv.txt">softmaint</option>
+    <option value="data/traffic_lights.gv.txt">traffic_lights</option>
+    <option value="data/transparency.gv.txt">transparency</option>
+    <option value="data/twopi2.gv.txt">twopi2</option>
+    <option value="data/unix.gv.txt">unix</option>
+    <option value="data/world.gv.txt">world</option>
+  </select>
 </p>
 
 <div id="mygraph"></div>
 <script type="text/javascript">
-    var container = document.getElementById('mygraph');
-    var url = document.getElementById('url');
-    var graph = new vis.Graph(container);
+  var container = document.getElementById('mygraph');
+  var url = document.getElementById('url');
+  var graph = new vis.Graph(container);
 
-    function loadData () {
-        $.ajax({
-            type: "GET",
-            url: url.value
-        }).done(function(data) {
-            graph.setOptions({
-                stabilize: false
-            });
-            graph.setData( {
-                dot: data
-            });
+  function loadData () {
+    $.ajax({
+      type: "GET",
+      url: url.value
+    }).done(function(data) {
+          graph.setOptions({
+            stabilize: false
+          });
+          graph.setData( {
+            dot: data
+          });
         });
-    }
-    loadData();
+  }
+  loadData();
 </script>
 </body>
 </html>

examples/graph/index.html

@@ -2,34 +2,34 @@
 <html>
 
 <head>
-    <title>vis.js | graph examples</title>
+  <title>vis.js | graph examples</title>
 
-    <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
+  <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
 </head>
 
 <body>
 <div id="container">
 
-    <h1>vis.js graph examples</h1>
+  <h1>vis.js graph examples</h1>
 
-    <p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
-    <p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
-    <p><a href="03_images.html">03_images.html</a></p>
-    <p><a href="04_shapes.html">04_shapes.html</a></p>
-    <p><a href="05_social_network.html">05_social_network.html</a></p>
-    <p><a href="06_groups.html">06_groups.html</a></p>
-    <p><a href="07_selections.html">07_selections.html</a></p>
-    <p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
-    <p><a href="09_sizing.html">09_sizing.html</a></p>
-    <p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
-    <p><a href="11_custom_style.html">11_custom_style.html</a></p>
-    <p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
-    <p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
-    <p><a href="14_dot_language.html">14_dot_language.html</a></p>
-    <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
-    <p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
-    <p><a href="17_network_info.html">17_network_info.html</a></p>
-    <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
+  <p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
+  <p><a href="02_random_nodes.html">02_random_nodes.html</a></p>
+  <p><a href="03_images.html">03_images.html</a></p>
+  <p><a href="04_shapes.html">04_shapes.html</a></p>
+  <p><a href="05_social_network.html">05_social_network.html</a></p>
+  <p><a href="06_groups.html">06_groups.html</a></p>
+  <p><a href="07_selections.html">07_selections.html</a></p>
+  <p><a href="08_mobile_friendly.html">08_mobile_friendly.html</a></p>
+  <p><a href="09_sizing.html">09_sizing.html</a></p>
+  <p><a href="10_multiline_text.html">10_multiline_text.html</a></p>
+  <p><a href="11_custom_style.html">11_custom_style.html</a></p>
+  <p><a href="12_scalable_images.html">12_scalable_images.html</a></p>
+  <p><a href="13_dashed_lines.html">13_dashed_lines.html</a></p>
+  <p><a href="14_dot_language.html">14_dot_language.html</a></p>
+  <p><a href="15_dot_language_playground.html">15_dot_language_playground.html</a></p>
+  <p><a href="16_dynamic_data.html">16_dynamic_data.html</a></p>
+  <p><a href="17_network_info.html">17_network_info.html</a></p>
+  <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>
 </body>

examples/timeline/01_basic.html

@@ -1,31 +1,32 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline | Basic demo</title>
+  <title>Timeline | Basic demo</title>
 
-    <style type="text/css">
-        body, html {
-            font-family: sans-serif;
-        }
-    </style>
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
 
-    <script src="../../vis.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="visualization"></div>
 
 <script type="text/javascript">
-    var container = document.getElementById('visualization');
-    var items = [
-        {id: 1, content: 'item 1', start: '2013-04-20'},
-        {id: 2, content: 'item 2', start: '2013-04-14'},
-        {id: 3, content: 'item 3', start: '2013-04-18'},
-        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
-        {id: 5, content: 'item 5', start: '2013-04-25'},
-        {id: 6, content: 'item 6', start: '2013-04-27'}
-    ];
-    var options = {};
-    var timeline = new vis.Timeline(container, items, options);
+  var container = document.getElementById('visualization');
+  var items = [
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ];
+  var options = {};
+  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>

examples/timeline/02_dataset.html

@@ -1,60 +1,62 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline | Dataset example</title>
-
-    <style>
-        body, html {
-            font-family: arial, sans-serif;
-            font-size: 11pt;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-        }
-
-        #visualization {
-            box-sizing: border-box;
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-
-    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
-
-    <script src="../../vis.js"></script>
+  <title>Timeline | Dataset example</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    #visualization {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="visualization"></div>
 
 <script>
-    var now = moment().minutes(0).seconds(0).milliseconds(0);
-
-    // create a dataset with items
-    var items = new vis.DataSet({
-        convert: {
-            start: 'Date',
-            end: 'Date'
-        }
-    });
-    items.add([
-        {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
-        {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
-        {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
-        {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
-        {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
-        {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
-    ]);
-
-    var container = document.getElementById('visualization');
-    var options = {
-        start: now.clone().add('days', -3),
-        end: now.clone().add('days', 7),
-        orientation: 'top',
-        height: '100%'
-    };
-
-    var timeline = new vis.Timeline(container, items, options);
+  var now = moment().minutes(0).seconds(0).milliseconds(0);
+
+  // create a dataset with items
+  var items = new vis.DataSet({
+    convert: {
+      start: 'Date',
+      end: 'Date'
+    }
+  });
+  items.add([
+    {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4)},
+    {id: 2, content: 'item 2', start: now.clone().add('days', -2)},
+    {id: 3, content: 'item 3', start: now.clone().add('days', 2)},
+    {id: 4, content: 'item 4', start: now.clone().add('days', 0), end: now.clone().add('days', 3).toDate()},
+    {id: 5, content: 'item 5', start: now.clone().add('days', 9), type:'point'},
+    {id: 6, content: 'item 6', start: now.clone().add('days', 11)}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    start: now.clone().add('days', -3),
+    end: now.clone().add('days', 7),
+    orientation: 'top',
+    height: '100%',
+    showCurrentTime: true
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
 
 </script>
 </body>

examples/timeline/03_much_data.html

@@ -13,7 +13,8 @@
     <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
     <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
 
-    <script src="../../vis.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h1>

examples/timeline/04_html_data.html

@@ -1,69 +1,74 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline | HTML data</title>
+  <title>Timeline | HTML data</title>
 
-    <style>
-        body, html {
-            font-family: arial, sans-serif;
-            font-size: 11pt;
-        }
-        span {
-            color: red;
-        }
-        span.large {
-            font-size: 200%;
-        }
-    </style>
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+    span {
+      color: red;
+    }
+    span.large {
+      font-size: 200%;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 
-    <script src="../../vis.js"></script>
 </head>
 <body>
 <p>
-    Load HTML contents in the Timeline
+  Load HTML contents in the Timeline
 </p>
 <div id="visualization"></div>
 
 <script>
-    // create a couple of HTML items in various ways
+  // create a couple of HTML items in various ways
+
+  var item1 = document.createElement('div');
+  item1.appendChild(document.createTextNode('item 1'));
 
-    var item1 = document.createElement('div');
-    item1.appendChild(document.createTextNode('item 1'));
+  var item2 = document.createElement('div');
+  item2.innerHTML = '<span>item 2</span>';
 
-    var item2 = document.createElement('div');
-    item2.innerHTML = '<span>item 2</span>';
+  var item3 = document.createElement('div');
+  var span3 = document.createElement('span');
+  span3.className = 'large';
+  span3.appendChild(document.createTextNode('item 3'));
+  item3.appendChild(span3);
 
-    var item3 = document.createElement('div');
-    var span3 = document.createElement('span');
-    span3.className = 'large';
-    span3.appendChild(document.createTextNode('item 3'));
-    item3.appendChild(span3);
+  var item4 = 'item <span class="large">4</span>';
 
-    var item4 = 'item <span class="large">4</span>';
+  var item5 = document.createElement('div');
+  item5.appendChild(document.createTextNode('item 5'));
+  item5.appendChild(document.createElement('br'));
+  var img5 = document.createElement('img');
+  img5.src = 'img/attachment-icon.png';
+  img5.style.width = '48px';
+  img5.style.height = '48px';
+  item5.appendChild(img5);
 
-    var item5 = document.createElement('div');
-    item5.appendChild(document.createTextNode('item 5'));
-    item5.appendChild(document.createElement('br'));
-    var img5 = document.createElement('img');
-    img5.src = 'img/attachment-icon.png';
-    img5.style.width = '48px';
-    img5.style.height = '48px';
-    item5.appendChild(img5);
+  var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
 
-    var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
+  var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';
 
-    // create data and a Timeline
-    var container = document.getElementById('visualization');
-    var items = [
-        {id: 1, content: item1, start: '2013-04-20'},
-        {id: 2, content: item2, start: '2013-04-14'},
-        {id: 3, content: item3, start: '2013-04-18'},
-        {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
-        {id: 5, content: item5, start: '2013-04-25'},
-        {id: 6, content: item6, start: '2013-04-27'}
-    ];
-    var options = {};
-    var timeline = new vis.Timeline(container, items, options);
+  // create data and a Timeline
+  var container = document.getElementById('visualization');
+  var items = [
+    {id: 1, content: item1, start: '2013-04-20'},
+    {id: 2, content: item2, start: '2013-04-14'},
+    {id: 3, content: item3, start: '2013-04-18'},
+    {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: item5, start: '2013-04-25'},
+    {id: 6, content: item6, start: '2013-04-27'},
+    {id: 7, content: item7, start: '2013-04-21'}
+  ];
+  var options = {};
+  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>

examples/timeline/05_groups.html

@@ -1,71 +1,72 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline | Group example</title>
+  <title>Timeline | Group example</title>
 
-    <style>
-        body, html {
-            font-family: arial, sans-serif;
-            font-size: 11pt;
-        }
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
 
-        #visualization {
-            box-sizing: border-box;
-            width: 100%;
-            height: 300px;
-        }
-    </style>
+    #visualization {
+      box-sizing: border-box;
+      width: 100%;
+      height: 300px;
+    }
+  </style>
 
-    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
+  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.3.1/moment.min.js"></script>
 
-    <script src="../../vis.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <p>
-    This example demonstrate using groups. Note that a DataSet is used for both
-    items and groups, allowing to dynamically add, update or remove both items
-    and groups via the DataSet.
+  This example demonstrate using groups. Note that a DataSet is used for both
+  items and groups, allowing to dynamically add, update or remove both items
+  and groups via the DataSet.
 </p>
 <div id="visualization"></div>
 
 <script>
-    var now = moment().minutes(0).seconds(0).milliseconds(0);
-    var groupCount = 3;
-    var itemCount = 20;
+  var now = moment().minutes(0).seconds(0).milliseconds(0);
+  var groupCount = 3;
+  var itemCount = 20;
 
-    // create a data set with groups
-    var names = ['John', 'Alston', 'Lee', 'Grant'];
-    var groups = new vis.DataSet();
-    for (var g = 0; g < groupCount; g++) {
-        groups.add({id: g, content: names[g]});
-    }
+  // create a data set with groups
+  var names = ['John', 'Alston', 'Lee', 'Grant'];
+  var groups = new vis.DataSet();
+  for (var g = 0; g < groupCount; g++) {
+    groups.add({id: g, content: names[g]});
+  }
 
-    // create a dataset with items
-    var items = new vis.DataSet();
-    for (var i = 0; i < itemCount; i++) {
-        var start = now.clone().add('hours', Math.random() * 200);
-        var group = Math.floor(Math.random() * groupCount);
-        items.add({
-            id: i,
-            group: group,
-            content: 'item ' + i +
-                    ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
-            start: start,
-            type: 'box'
-        });
-    }
+  // create a dataset with items
+  var items = new vis.DataSet();
+  for (var i = 0; i < itemCount; i++) {
+    var start = now.clone().add('hours', Math.random() * 200);
+    var group = Math.floor(Math.random() * groupCount);
+    items.add({
+      id: i,
+      group: group,
+      content: 'item ' + i +
+          ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
+      start: start,
+      type: 'box'
+    });
+  }
 
-    // create visualization
-    var container = document.getElementById('visualization');
-    var options = {
-        groupsOrder: 'content'
-    };
+  // create visualization
+  var container = document.getElementById('visualization');
+  var options = {
+    groupOrder: 'content'
+  };
 
-    var timeline = new vis.Timeline(container);
-    timeline.setOptions(options);
-    timeline.setGroups(groups);
-    timeline.setItems(items);
+  var timeline = new vis.Timeline(container);
+  timeline.setOptions(options);
+  timeline.setGroups(groups);
+  timeline.setItems(items);
 
 </script>
 </body>

examples/timeline/index.html

@@ -2,21 +2,21 @@
 <html>
 
 <head>
-    <title>vis.js | timeline examples</title>
+  <title>vis.js | timeline examples</title>
 
-    <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
+  <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
 </head>
 
 <body>
 <div id="container">
 
-    <h1>vis.js timeline examples</h1>
+  <h1>vis.js timeline examples</h1>
 
-    <p><a href="01_basic.html">01_basic.html</a></p>
-    <p><a href="02_dataset.html">02_dataset.html</a></p>
-    <p><a href="03_much_data.html">03_much_data.html</a></p>
-    <p><a href="04_html_data.html">04_html_data.html</a></p>
-    <p><a href="05_groups.html">05_groups.html</a></p>
+  <p><a href="01_basic.html">01_basic.html</a></p>
+  <p><a href="02_dataset.html">02_dataset.html</a></p>
+  <p><a href="03_much_data.html">03_much_data.html</a></p>
+  <p><a href="04_html_data.html">04_html_data.html</a></p>
+  <p><a href="05_groups.html">05_groups.html</a></p>
 
 </div>
 </body>

examples/timeline/requirejs/requirejs_example.html

@@ -1,11 +1,13 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline requirejs demo</title>
+  <title>Timeline requirejs demo</title>
 
-    <script data-main="scripts/main" src="scripts/require.js"></script>
+  <script data-main="scripts/main" src="scripts/require.js"></script>
+
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-    <div id="visualization"></div>
+<div id="visualization"></div>
 </body>
 </html>

examples/timeline/requirejs/scripts/main.js

@@ -1,19 +1,19 @@
 require.config({
-    paths: {
-        vis: '../../../../vis'
-    }
+  paths: {
+    vis: '../../../../dist/vis'
+  }
 });
 
 require(['vis'], function (vis) {
-    var container = document.getElementById('visualization');
-    var data = [
-        {id: 1, content: 'item 1', start: '2013-04-20'},
-        {id: 2, content: 'item 2', start: '2013-04-14'},
-        {id: 3, content: 'item 3', start: '2013-04-18'},
-        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
-        {id: 5, content: 'item 5', start: '2013-04-25'},
-        {id: 6, content: 'item 6', start: '2013-04-27'}
-    ];
-    var options = {};
-    var timeline = new vis.Timeline(container, data, options);
+  var container = document.getElementById('visualization');
+  var data = [
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ];
+  var options = {};
+  var timeline = new vis.Timeline(container, data, options);
 });

index.html

@@ -72,26 +72,8 @@ bower install vis
 
 <h3>download</h3>
 
-<table class="download">
-  <tr>
-    <td>
-      <a href="vis.js" target="_blank">Development
-        (version <span class="version">0.2.0</span>)</a>
-    </td>
-    <td>
-      <span id="development-size">441 kB</span>, uncompressed with comments
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="vis.min.js" target="_blank">Production
-        (version <span class="version">0.2.0</span>)</a>
-    </td>
-    <td>
-      <span id="production-size">39 kB</span>, minified and gzipped
-    </td>
-  </tr>
-</table>
+<a href="download/vis.zip">Click here to download vis.js</a>
+(version <span class="version">0.3.0</span>)
 
 
 <h2 id="example">Example</h2>
@@ -104,30 +86,31 @@ bower install vis
 <pre class="prettyprint lang-html">&lt;!doctype html&gt;
 &lt;html&gt;
 &lt;head&gt;
-    &lt;title&gt;Timeline | Basic demo&lt;/title&gt;
-    &lt;script src="http://visjs.org/vis.js"&gt;&lt;/script&gt;
-
-    &lt;style type="text/css"&gt;
-        body, html {
-            font-family: sans-serif;
-        }
-    &lt;/style&gt;
+  &lt;title&gt;Timeline | Basic demo&lt;/title&gt;
+  &lt;script src="http://visjs.org/dist/vis.js"&gt;&lt;/script&gt;
+  &lt;link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
+
+  &lt;style type="text/css"&gt;
+    body, html {
+      font-family: sans-serif;
+    }
+  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="mytimeline"&gt;&lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
-    var container = document.getElementById('mytimeline');
-    var data = [
-        {id: 1, content: 'item 1', start: '2013-04-20'},
-        {id: 2, content: 'item 2', start: '2013-04-14'},
-        {id: 3, content: 'item 3', start: '2013-04-18'},
-        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
-        {id: 5, content: 'item 5', start: '2013-04-25'},
-        {id: 6, content: 'item 6', start: '2013-04-27'}
-    ];
-    var options = {};
-    var timeline = new vis.Timeline(container, data, options);
+  var container = document.getElementById('mytimeline');
+  var data = [
+    {id: 1, content: 'item 1', start: '2013-04-20'},
+    {id: 2, content: 'item 2', start: '2013-04-14'},
+    {id: 3, content: 'item 3', start: '2013-04-18'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 5, content: 'item 5', start: '2013-04-25'},
+    {id: 6, content: 'item 6', start: '2013-04-27'}
+  ];
+  var options = {};
+  var timeline = new vis.Timeline(container, data, options);
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
@@ -304,7 +287,7 @@ The source code of the examples can be found in the
 <h2 id="license">License</h2>
 
 <p>
-  Copyright (C) 2010-2013 Almende B.V.
+  Copyright (C) 2010-2014 Almende B.V.
 </p>
 
 <p>

updateversion.js

@@ -1,48 +1,14 @@
-// Update the version numbers and library sizes in index.md
+// Update the version numbers and library sizes in index.html
 
 var fs = require('fs'),
     zlib = require('zlib');
 
-var VIS = 'vis.js',
-    VIS_MIN = 'vis.min.js',
+var VIS_ZIP = './dist/vis.js',
     INDEX = 'index.html';
 
-// get development size
-function developmentSize(callback) {
-  fs.readFile(VIS, function (err, data) {
-    if (!err) {
-      var size = Math.round(data.length / 1024) + ' kB';
-      callback(null, size);
-    }
-    else {
-      callback(err);
-    }
-  });
-}
-
-// get (gzipped) production size
-function productionSize(callback) {
-  fs.readFile(VIS_MIN, function (err, data) {
-    if (!err) {
-      zlib.gzip(data, function (err, data) {
-        if (!err) {
-          var size = Math.round(data.length / 1024) + ' kB';
-          callback(null, size)
-        }
-        else {
-          callback(err);
-        }
-      });
-    }
-    else {
-      callback(err);
-    }
-  });
-}
-
-// get version
+// read version from dist/vis.js
 function version(callback) {
-  fs.readFile(VIS_MIN, function (err, data) {
+  fs.readFile(VIS_ZIP, function (err, data) {
     if (!err) {
       var match = /@version\s*([\w\.-]*)/i.exec(data);
       var version = undefined;
@@ -58,15 +24,10 @@ function version(callback) {
 }
 
 // update version and library sizes in index.md
-function updateVersion(developmentSize, productionSize, version, callback) {
+function updateVersion(version, callback) {
   fs.readFile(INDEX, function (err, data) {
     if (!err) {
       data = String(data);
-      data = data.replace(/<span id="development-size">([\w\s]*)<\/span>/g,
-          '<span id="development-size">' + developmentSize + '</span>');
-
-      data = data.replace(/<span id="production-size">([\w\s]*)<\/span>/g,
-          '<span id="production-size">' + productionSize + '</span>');
 
       data = data.replace(/<span class="version">([\w\.-]*)<\/span>/g,
           '<span class="version">' + version + '</span>');
@@ -79,24 +40,19 @@ function updateVersion(developmentSize, productionSize, version, callback) {
   });
 }
 
-developmentSize(function (err, devSize) {
-  console.log('development size: ' + devSize);
-  productionSize(function (err, prodSize) {
-    console.log('production size: ' + prodSize);
-    version(function (err, version) {
-      console.log('version: ' + version);
-      if (devSize && prodSize && version) {
-        updateVersion(devSize, prodSize, version, function (err, res) {
-          if (err) {
-            console.log(err);
-          }
-          else {
-            console.log('done');
-          }
-        });
+
+version(function (err, version) {
+  console.log('version: ' + version);
+  if (version) {
+    updateVersion(version, function (err, res) {
+      if (err) {
+        console.log(err);
       }
       else {
+        console.log('done');
       }
     });
-  });
-});
+  }
+  else {
+  }
+});