Released version 3.4.0

dist/vis.css

@@ -145,6 +145,7 @@
   width: 100%;
   height: 0;
   left: 0;
+  z-index: 1;
 }
 
 .vis.timeline  .foreground .group {
@@ -208,14 +209,28 @@
   box-sizing: border-box;
 }
 
+.vis.timeline .item.background {
+  overflow: hidden;
+  border: none;
+  background-color: rgba(213, 221, 246, 0.4);
+  box-sizing: border-box;
+  top: 0;
+  bottom: 0;
+}
+
 .vis.timeline .item.range .content {
   position: relative;
   display: inline-block;
+  overflow: hidden;
+  max-width: 100%;
 }
 
-.vis.timeline .item.range .content {
+.vis.timeline .item.background .content {
+  position: absolute;
+  display: inline-block;
   overflow: hidden;
   max-width: 100%;
+  margin: 5px;
 }
 
 .vis.timeline .item.line {
@@ -555,14 +570,12 @@ div.network-manipulation-editMode {
 
 div.network-manipulation-closeDiv {
   position:absolute;
-  left: 0;
+  right: 0;
   top: 0;
   width: 30px;
   height: 30px;
 
-  margin-top: 3px;
-  margin-left: 590px;
-  background-position: 0px 0px;
+  background-position: 20px 3px;
   background-repeat: no-repeat;
   background-image: url("img/network/cross.png");
   cursor: pointer;
@@ -574,6 +587,10 @@ div.network-manipulation-closeDiv {
   user-select: none;
 }
 
+div.network-manipulation-closeDiv:hover {
+  opacity: 0.6;
+}
+
 span.network-manipulationUI {
   font-family: verdana;
   font-size: 12px;
@@ -615,7 +632,7 @@ span.network-manipulationUI.none:active {
   box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
 }
 span.network-manipulationUI.none {
-  padding: 0px 0px 0px 0px;
+  padding: 0;
 }
 span.network-manipulationUI.notification{
   margin: 2px;

docs/graph2d.html

@@ -400,6 +400,30 @@ The options colored in green can also be used as options for the groups. All opt
   <td>'square'</td>
   <td>Determine the shape of the data points. The options are 'square' or 'circle'.</td>
 </tr>
+<tr>
+    <td>dataAxis.customRange.left.min</td>
+    <td>Number</td>
+    <td>undefined</td>
+    <td>Set the minimum value of the left y-Axis.</td>
+</tr>
+<tr>
+    <td>dataAxis.customRange.left.max</td>
+    <td>Number</td>
+    <td>undefined</td>
+    <td>Set the maximum value of the left y-Axis.</td>
+</tr>
+<tr>
+    <td>dataAxis.customRange.right.min</td>
+    <td>Number</td>
+    <td>undefined</td>
+    <td>Set the minimum value of the right y-Axis.</td>
+</tr>
+<tr>
+    <td>dataAxis.customRange.right.max</td>
+    <td>Number</td>
+    <td>undefined</td>
+    <td>Set the maximum value of the right y-Axis.</td>
+</tr>
 <tr>
   <td>dataAxis.showMinorLabels</td>
   <td>Boolean</td>

docs/timeline.html

@@ -43,6 +43,7 @@
   <li><a href="#Methods">Methods</a></li>
   <li><a href="#Events">Events</a></li>
   <li><a href="#Editing_Items">Editing Items</a></li>
+  <li><a href="#Templates">Templates</a></li>
   <li><a href="#Localization">Localization</a></li>
   <li><a href="#Styles">Styles</a></li>
   <li><a href="#Data_Policy">Data Policy</a></li>
@@ -242,8 +243,8 @@ var items = [
     <td>type</td>
     <td>String</td>
     <td>'box'</td>
-    <td>The type of the item. Can be 'box' (default), 'point', or 'range'.
-      Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
+    <td>The type of the item. Can be 'box' (default), 'point', 'range', or 'background'.
+      Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
     </td>
   </tr>
 </table>
@@ -360,7 +361,7 @@ var options = {
     <td>align</td>
     <td>String</td>
     <td>"center"</td>
-    <td>Alignment of items with type 'box' and 'range'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
+    <td>Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.</td>
 </tr>
 
 <tr>
@@ -378,6 +379,14 @@ var options = {
     When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.</td>
 </tr>
 
+<tr>
+  <td>dataAttributes</td>
+  <td>Array[String]</td>
+  <td>false</td>
+  <td>An array of fields optionally defined on the timeline items that will be appended as <code>data-</code> attributes to the DOM element of the items.</td>
+</tr>
+
+
 <tr>
     <td>editable</td>
     <td>Boolean | Object</td>
@@ -554,6 +563,14 @@ var options = {
     </td>
 </tr>
 
+<tr>
+    <td>onMoving</td>
+    <td>Function</td>
+    <td>none</td>
+    <td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
+    </td>
+</tr>
+
 <tr>
     <td>onRemove</td>
     <td>Function</td>
@@ -656,11 +673,18 @@ var options = {
         If not provided, the earliest date present in the events is taken as start date.</td>
 </tr>
 
+<tr>
+    <td>template</td>
+    <td>Function</td>
+    <td>none</td>
+    <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+</tr>
+
 <tr>
     <td>type</td>
     <td>String</td>
     <td>none</td>
-    <td>Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
+    <td>Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created. Items of type 'background' are not editable.
     </td>
 </tr>
 
@@ -1060,6 +1084,80 @@ var options = {
 
 A full example is available here: <a href="../examples/timeline/08_edit_items.html">08_edit_items.html</a>.
 
+
+<h2 id="Templates">Templates</h2>
+
+<p>
+  Timeline supports templates to format item contents. Any template engine (such as <a href="http://handlebarsjs.com/">handlebars</a> or <a href="http://mustache.github.io/">mustache</a>) can be used, and one can also manually build HTML. In the options, one can provide a template handler. This handler is a function accepting an items data as argument, and outputs formatted HTML:
+</p>
+
+<pre class="prettyprint lang-js">var options = {
+  template: function (item) {
+    var html = ... // generate HTML markup for this item
+    return html;
+  }
+};
+</pre>
+
+<h3>Create HTML manually</h3>
+
+The HTML for an item can be created manually:
+
+<pre class="prettyprint lang-js">var options = {
+  template: function (item) {
+    return '&lt;h1&gt;' + item.header + '&lt;/h1&gt;&lt;p&gt;' + item.description + '&lt;/p&gt;';
+  }
+};
+</pre>
+
+<h3>Using a template engine</h3>
+
+Using <a href="http://handlebarsjs.com/">handlebars</a>, one can write the template in HTML:
+
+<pre class="prettyprint lang-html">
+&lt;script id="item-template" type="text/x-handlebars-template"&gt;
+  &lt;h1&gt;{{header}}&lt;/h1&gt;
+  &lt;p&gt;{{description}}&lt;/p&gt;
+&lt;/script&gt;
+</pre>
+
+Compile the template:
+
+<pre class="prettyprint lang-js">
+var source = document.getElementById('item-template').innerHTML;
+var template = Handlebars.compile(source);
+</pre>
+
+And then specify the template in the Timeline options
+
+<pre class="prettyprint lang-js">var options = {
+  template: template
+};
+</pre>
+
+<h3>Multiple templates</h3>
+
+In order to support multiple templates, the template handler can be extended to switch between different templates, depending on a specific item property:
+
+<pre class="prettyprint lang-js">
+var templates = {
+  template1: Handlebars.compile(...),
+  template2: Handlebars.compile(...),
+  template2: Handlebars.compile(...),
+  ...
+};
+
+var options = {
+  template: function (item) {
+    var template = templates[item.template];  // choose the right template
+    return template(item);                    // execute the template
+  }
+};
+</pre>
+
+Now the items can be extended with a property <code>template</code>, specifying which template to use for the item.
+
+
 <h2 id="Localization">Localization</h2>
 <p>
   Timeline can be localized. For localization, Timeline depends largely on the localization of <a href="http://momentjs.com">moment.js</a>. Locales are not included in vis.js by default. To enable localization, moment.js must be loaded with locales. Moment.js offers a bundle named "moment-with-locales.min.js" for this and there are various alternative ways to load locales.

examples/graph2d/12_customRange.html

@@ -29,7 +29,7 @@ var options = {
             right: {
                 min:-5
             }
-        },
+        }
     }
 };
 </pre>

examples/graph2d/13_localization.html

@@ -13,7 +13,7 @@
     }
   </style>
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment-with-langs.min.js"></script>
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>

examples/graph2d/15_streaming_data.html

@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Streaming data</title>
+
+  <style type="text/css">
+    body, html, select {
+      font: 10pt sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h2>Graph2d | Streaming data</h2>
+<p style="max-width: 700px;">
+  This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
+</p>
+
+<p>
+  <label for="strategy">Strategy:</label>
+  <select id="strategy">
+    <option value="continuous" selected>Continuous (CPU intensive)</option>
+    <option value="discrete">Discrete</option>
+    <option value="static">Static</option>
+  </select>
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var DELAY = 1000; // delay in ms to add new data points
+
+  var strategy = document.getElementById('strategy');
+
+  // create a graph2d with an (currently empty) dataset
+  var container = document.getElementById('visualization');
+  var dataset = new vis.DataSet();
+  var now = vis.moment();
+
+  // added initial set so you don't think the graph is empty
+  dataset.add({x: now-2000,y: y((now-2000) / 1000)});
+  dataset.add({x: now-1000,y: y((now-1000) / 1000)});
+  dataset.add({x: now,y: y((now) / 1000)});
+  dataset.add({x: now+1000,y: y((now+1000) / 1000)});
+
+  var options = {
+    start: vis.moment().add(-30, 'seconds'), // changed so its faster
+    end: vis.moment(),
+    dataAxis: {
+      customRange: {
+        left: {
+          min:-10, max: 10
+        }
+      }
+    }
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+
+  // a function to generate data points
+  function y(x) {
+    return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
+  }
+
+  function renderStep() {
+    // move the window (you can think of different strategies).
+    var now = vis.moment();
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    switch (strategy.value) {
+      case 'continuous':
+        // continuously move the window
+        graph2d.setWindow(now - interval, now, {animate: false});
+        requestAnimationFrame(renderStep);
+        break;
+
+      case 'discrete':
+        graph2d.setWindow(now - interval, now, {animate: false});
+        setTimeout(renderStep, DELAY);
+        break;
+
+      default: // 'static'
+        // move the window 90% to the left when now is larger than the end of the window
+        if (now > range.end) {
+          graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
+        }
+        setTimeout(renderStep, DELAY);
+        break;
+    }
+  }
+  renderStep();
+
+  /**
+   * Add a new datapoint to the graph
+   */
+  function addDataPoint() {
+    // add a new data point to the dataset
+    var now = vis.moment();
+    dataset.add({
+      x: now+2000, // changed so you dont see them appearing
+      y: y(now / 1000)
+    });
+
+    // remove all data points which are no longer visible
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    var oldIds = dataset.getIds({
+      filter: function (item) {
+        return item.x < range.start - interval; // changed so you don't see them disappearing
+      }
+    });
+    dataset.remove(oldIds);
+
+    setTimeout(addDataPoint, DELAY);
+  }
+  addDataPoint();
+</script>
+</body>
+</html>

examples/graph2d/index.html

@@ -21,6 +21,7 @@
   <p><a href="12_customRange.html">12_customRange.html</a></p>
   <p><a href="13_localization.html">13_localization.html</a></p>
   <p><a href="14_toggleGroups.html">14_toggleGroups.html</a></p>
+  <p><a href="15_streaming_data.html">15_streaming_data.html</a></p>
 
 </div>
 </body>

examples/network/02_random_nodes.html

@@ -8,8 +8,8 @@
       font: 10pt sans;
     }
     #mynetwork {
-      width: 600px;
-      height: 600px;
+        width: 600px;
+        height: 600px;
       border: 1px solid lightgray;
     }
   </style>
@@ -76,11 +76,7 @@
         nodes: nodes,
         edges: edges
       };
-
-      var options = {
-        edges: {
-        }
-      };
+      var options = {};
       network = new vis.Network(container, data, options);
 
       // add event listeners
@@ -90,7 +86,9 @@
       network.on('stabilized', function (params) {
           document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
       });
+
     }
+
   </script>
 </head>
 

examples/network/10_multiline_text.html

@@ -29,8 +29,8 @@
       var edges = [
         {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible
         {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}
+        {from: 1, to: 4, style: 'line', width: 1, length: 200, label:'I\'m an edge!'},
+        {from: 1, to: 5, style: 'arrow', width: 3, length: 200, label:'arrows\nare cool'}
       ];
 
       // create a network

examples/network/31_localization.html

@@ -9,7 +9,7 @@
     }
     #mynetwork {
       position:relative;
-      width: 600px;
+      width: 800px;
       height: 600px;
       border: 1px solid lightgray;
     }

examples/network/33_animation.html

@@ -0,0 +1,319 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Animation</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+        width: 600px;
+        height: 600px;
+      border: 1px solid lightgray;
+    }
+
+      div.left {
+          position:relative;
+          float:left;
+          width:300px;
+          border: 1px #c7c7c7 solid;
+          height:590px;
+          padding:5px;
+      }
+
+      div.right {
+          padding-left:10px;
+          float:left;
+          width:600px;
+      }
+
+      div.bottom {
+          position:absolute;
+          bottom:5px;
+      }
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    var doButton, focusButton, showButton;
+    var statusUpdateSpan;
+    var finishMessage = "";
+
+
+    function draw() {
+      statusUpdateSpan = document.getElementById("statusUpdate");
+      doButton = document.getElementById("btnDo");
+      focusButton = document.getElementById("btnFocus");
+      showButton = document.getElementById("btnShow");
+      nodes = [];
+      edges = [];
+      var connectionCount = [];
+
+      // randomly create some nodes and edges
+      var nodeCount = 25;
+      for (var i = 0; i < nodeCount; i++) {
+        nodes.push({
+          id: i,
+          label: String(i)
+        });
+
+        connectionCount[i] = 0;
+
+        // create edges in a scale-free-network 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]++;
+        }
+      }
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {stabilizationIterations:1200};
+      network = new vis.Network(container, data, options);
+
+      // add event listeners
+      network.on('select', function(params) {
+        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+      });
+      network.on('stabilized', function (params) {
+          document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
+      });
+      network.on("animationFinished", function() {
+          statusUpdateSpan.innerHTML = finishMessage;
+      })
+
+    }
+
+    function zoomExtentAnimated() {
+        var offsetx = parseInt(document.getElementById("offsetx").value);
+        var offsety = parseInt(document.getElementById("offsety").value);
+        var duration = parseInt(document.getElementById("duration").value);
+        var easingFunction = document.getElementById("easingFunction").value;
+
+        var options = {offset: {x:offsetx,y:offsety},
+            duration: duration,
+            easingFunction: easingFunction
+        }
+        statusUpdateSpan.innerHTML = "Doing ZoomExtent() Animation.";
+        finishMessage = "Animation finished."
+        network.zoomExtent(options);
+    }
+
+    function doDefaultAnimation() {
+        var offsetx = parseInt(document.getElementById("offsetx").value);
+        var offsety = parseInt(document.getElementById("offsety").value);
+        var scale = parseFloat(document.getElementById("scale").value);
+        var positionx = parseInt(document.getElementById("positionx").value);
+        var positiony = parseInt(document.getElementById("positiony").value);
+        var easingFunction = document.getElementById("easingFunction").value;
+
+        var options = {
+            position: {x:positionx,y:positiony},
+            scale: scale,
+            offset: {x:offsetx,y:offsety},
+            animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad.
+        }
+        statusUpdateSpan.innerHTML = "Doing Animation.";
+        finishMessage = "Animation finished."
+        network.moveTo(options);
+    }
+
+    function doAnimation() {
+        var offsetx = parseInt(document.getElementById("offsetx").value);
+        var offsety = parseInt(document.getElementById("offsety").value);
+        var duration = parseInt(document.getElementById("duration").value);
+        var scale = parseFloat(document.getElementById("scale").value);
+        var positionx = parseInt(document.getElementById("positionx").value);
+        var positiony = parseInt(document.getElementById("positiony").value);
+        var easingFunction = document.getElementById("easingFunction").value;
+
+        var options = {
+            position: {x:positionx,y:positiony},
+            scale: scale,
+            offset: {x:offsetx,y:offsety},
+            animation: {
+                duration: duration,
+                easingFunction: easingFunction
+            }
+        }
+        statusUpdateSpan.innerHTML = "Doing Animation.";
+        finishMessage = "Animation finished."
+        network.moveTo(options);
+    }
+
+    function focusRandom() {
+        var nodeId = Math.floor(Math.random() * 25);
+        var offsetx = parseInt(document.getElementById("offsetx").value);
+        var offsety = parseInt(document.getElementById("offsety").value);
+        var duration = parseInt(document.getElementById("duration").value);
+        var scale = parseFloat(document.getElementById("scale").value);
+        var easingFunction = document.getElementById("easingFunction").value;
+
+        var options = {
+            // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
+            scale: scale,
+            offset: {x:offsetx,y:offsety},
+            animation: {
+                duration: duration,
+                easingFunction: easingFunction
+            }
+        }
+        statusUpdateSpan.innerHTML = "Focusing on node: " + nodeId;
+        finishMessage = "Node: " + nodeId + " in focus.";
+        network.focusOnNode(nodeId, options);
+    }
+
+
+    var showInterval = false;
+    var showPhase = 1;
+    function startShow() {
+        if (showInterval !== false) {
+            showInterval = false;
+            showButton.value = "Start a show!";
+            network.zoomExtent();
+        }
+        else {
+            showButton.value = "Stop the show!";
+            var duration = parseInt(document.getElementById("duration").value);
+            focusRandom();
+            window.setTimeout(doTheShow, duration);
+            showInterval = true;
+        }
+    }
+
+    function doTheShow() {
+        if (showInterval == true) {
+            var duration = parseInt(document.getElementById("duration").value);
+            if (showPhase == 0) {
+                focusRandom();
+                showPhase = 1;
+            }
+            else {
+                zoomExtentAnimated();
+                showPhase = 0;
+            }
+            window.setTimeout(doTheShow, duration);
+        }
+    }
+  </script>
+</head>
+
+<body onload="draw();">
+<h2>Camera animations</h2>
+<div style="width:700px; font-size:14px;">
+    You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
+    also be (partially) supplied to the .zoomExtent() and .focusOnNode() methods. These are explained in the docs.
+    <br /><br/>
+    The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
+    the default animation values for duration and easing function. The focusOnNode takes everything except the position and the zoomExtent takes only the duration and easing function.
+    <br/><br/>
+    Here you can see a full description of the options you can supply to moveTo:
+</div>
+<pre>
+var moveToOptions = {
+    position: {x:x, y:x},    // position to animate to (Numbers)
+    scale: 1.0,              // scale to animate to  (Number)
+    offset: {x:x, y:y},      // offset from the center in DOM pixels (Numbers)
+    animation: {             // animation object, can also be Boolean
+      duration: 1000,                 // animation duration in milliseconds (Number)
+      easingFunction: "easeInOutQuad" // Animation easing function, available are:
+    }                                   // linear, easeInQuad, easeOutQuad, easeInOutQuad,
+}                                       // easeInCubic, easeOutCubic, easeInOutCubic,
+                                        // easeInQuart, easeOutQuart, easeInOutQuart,
+                                        // easeInQuint, easeOutQuint, easeInOutQuint
+</pre>
+<div class="left">
+    <table>
+        <tr>
+            <td>position x</td><td><input type="text" value="300" id="positionx" style="width:170px;"></td>
+        </tr>
+        <tr>
+            <td>position y</td><td><input type="text" value="300" id="positiony" style="width:170px;"></td>
+        </tr>
+        <tr>
+            <td>scale</td><td><input type="text" value="1.0" id="scale" style="width:170px;"></td>
+        </tr>
+        <tr>
+            <td>offset x</td><td><input type="text" value="0" id="offsetx" style="width:170px;"> px</td>
+        </tr>
+        <tr>
+            <td>offset y</td><td><input type="text" value="0" id="offsety" style="width:170px;"> px</td>
+        </tr>
+        <tr>
+            <td>duration</td><td><input type="text" value="2500" id="duration" style="width:170px;"> ms</td>
+        </tr>
+        <tr>
+            <td>easingFunction</td><td>
+            <select id="easingFunction" style="width:174px;">
+                <option value="linear">linear</option>
+                <option value="easeInQuad">easeInQuad</option>
+                <option value="easeOutQuad">easeOutQuad</option>
+                <option value="easeInOutQuad" selected="selected">easeInOutQuad</option>
+                <option value="easeInCubic">easeInCubic</option>
+                <option value="easeOutCubic">easeOutCubic</option>
+                <option value="easeInOutCubic">easeInOutCubic</option>
+                <option value="easeInQuart">easeInQuart</option>
+                <option value="easeOutQuart">easeOutQuart</option>
+                <option value="easeInOutQuart">easeInOutQuart</option>
+                <option value="easeInQuint">easeInQuint</option>
+                <option value="easeOutQuint">easeOutQuint</option>
+                <option value="easeInOutQuint">easeInOutQuint</option>
+            </select>
+        </td>
+        </tr>
+    </table>
+    <div class="bottom">
+        <span id="statusUpdate"></span><br />
+        Examples:
+        <input type="button" onclick="doAnimation();" value="Animate with above settings." style="width:300px;" id="btnDo"> <br/>
+        <input type="button" onclick="doDefaultAnimation();" value="Animate with default settings." style="width:300px;" id="btnDoDefault"> <br/>
+        <input type="button" onclick="zoomExtentAnimated();" value="Animated ZoomExtent()." style="width:300px;" id="btnZoom"> <br/>
+        <input type="button" onclick="focusRandom();" value="Focus on random node." style="width:300px;" id="btnFocus"><br/>
+        <input type="button" onclick="startShow();" value="Start a show!" style="width:300px;" id="btnShow"><br/>
+    </div>
+</div>
+<div class="right">
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+<p id="stabilization"></p>
+</div>
+</body>
+</html>

examples/network/index.html

@@ -43,6 +43,8 @@
   <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
   <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
   <p><a href="31_localization.html">31_localization.html</a></p>
+  <p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
+  <p><a href="33_animation.html">33_animation.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

examples/timeline/19_localization.html

@@ -10,7 +10,7 @@
     }
   </style>
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
   <script src="../../dist/vis.js"></script>
   <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>

examples/timeline/23_data_attributes.html

@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Basic demo</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<p>
+  In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>.
+</p>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
+    {id: 2, content: 'item 2', start: '2014-04-14'},
+    {id: 3, content: 'item 3', start: '2014-04-18'},
+    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
+    {id: 5, content: 'item 5', start: '2014-04-25'},
+    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point', tooltip: 'This is item 6'}
+  ]);
+
+  // Configuration for the Timeline
+  var options = {dataAttributes: ['tooltip', 'id']};
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>

examples/timeline/24_background_areas.html

@@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Background areas</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+
+    .vis.timeline .item.background.negative {
+      background-color: rgba(255, 0, 0, 0.2);
+    }
+    .vis.timeline .item.background.marker {
+      border-left: 2px solid green;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+
+<p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>
+
+<div id="visualization"></div>
+
+<script>
+  // create a dataset with items
+  // we specify the type of the fields `start` and `end` here to be strings
+  // containing an ISO date. The fields will be outputted as ISO dates
+  // automatically getting data from the DataSet via items.get().
+  var items = new vis.DataSet({
+    type: { start: 'ISODate', end: 'ISODate' }
+  });
+
+  // add items to the DataSet
+  items.add([
+    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
+    {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
+    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
+    {id: 2, content: 'item 2', start: '2014-01-18'},
+    {id: 3, content: 'item 3', start: '2014-01-21'},
+    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
+    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
+    {id: 6, content: 'item 6', start: '2014-01-26'}
+  ]);
+
+  var container = document.getElementById('visualization');
+  var options = {
+    start: '2014-01-10',
+    end: '2014-02-10',
+    editable: true
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+
+</script>
+</body>
+</html>

examples/timeline/25_templates.html

@@ -0,0 +1,250 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Templates</title>
+
+  <!-- load handlebars for templating, and create a template -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
+  <script id="item-template" type="text/x-handlebars-template">
+    <table class="score">
+      <tr>
+        <td colspan="3" class="description">{{description}}</td>
+      </tr>
+      <tr>
+        <td>{{player1}}</td>
+        <th>{{score1}} - {{score2}}</th>
+        <td>{{player2}}</td>
+      </tr>
+      <tr>
+        <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
+        <th></th>
+        <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
+      </tr>
+    </table>
+  </script>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      font-size: 10pt;
+    }
+
+    .vis.timeline .item {
+      border-color: #acacac;
+      background-color: #efefef;
+      box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
+    }
+
+    table .description {
+      font-style: italic;
+    }
+
+    #visualization {
+      position: relative;
+      overflow: hidden;
+    }
+
+    .logo {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+    .logo img {
+      width: 120px;
+    }
+  </style>
+
+</head>
+<body>
+<h1>WK 2014</h1>
+<p style="max-width: 600px;">
+  This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
+</p>
+
+<div id="visualization">
+  <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
+</div>
+
+<script type="text/javascript">
+  // create a handlebars template
+  var source   = document.getElementById('item-template').innerHTML;
+  var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
+
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('visualization');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    // round of 16
+    {
+      player1: 'Brazil',
+      abbr1: 'br',
+      score1: '1 (3)',
+      player2: 'Chile',
+      abbr2: 'cl',
+      score2: '1 (2)',
+      description: 'round of 16',
+      start: '2014-06-28 13:00'
+    },
+    {
+      player1: 'Colombia',
+      abbr1: 'co',
+      score1: 2,
+      player2: 'Uruguay',
+      abbr2: 'uy',
+      score2: 0,
+      description: 'round of 16',
+      start: '2014-06-28 17:00'
+    },
+    {
+      player1: 'Netherlands',
+      abbr1: 'nl',
+      score1: 2,
+      player2: 'Mexico',
+      abbr2: 'mx',
+      score2: 1,
+      description: 'round of 16',
+      start: '2014-06-29 13:00'
+    },
+    {
+      player1: 'Costa Rica',
+      abbr1: 'cr',
+      score1: '1 (5)',
+      player2: 'Greece',
+      abbr2: 'gr',
+      score2: '1 (3)',
+      description: 'round of 16',
+      start: '2014-06-29 17:00'
+    },
+    {
+      player1: 'France',
+      abbr1: 'fr',
+      score1: 2,
+      player2: 'Nigeria',
+      abbr2: 'ng',
+      score2: 0,
+      description: 'round of 16',
+      start: '2014-06-30 13:00'
+    },
+    {
+      player1: 'Germany',
+      abbr1: 'de',
+      score1: 2,
+      player2: 'Algeria',
+      abbr2: 'dz',
+      score2: 1,
+      description: 'round of 16',
+      start: '2014-06-30 17:00'
+    },
+    {
+      player1: 'Argentina',
+      abbr1: 'ar',
+      score1: 1,
+      player2: 'Switzerland',
+      abbr2: 'ch',
+      score2: 0,
+      description: 'round of 16',
+      start: '2014-07-01 13:00'
+    },
+    {
+      player1: 'Belgium',
+      abbr1: 'be',
+      score1: 2,
+      player2: 'USA',
+      abbr2: 'us',
+      score2: 1,
+      description: 'round of 16',
+      start: '2014-07-01 17:00'
+    },
+
+    // quarter-finals
+    {
+      player1: 'France',
+      abbr1: 'fr',
+      score1: 0,
+      player2: 'Germany',
+      abbr2: 'de',
+      score2: 1,
+      description: 'quarter-finals',
+      start: '2014-07-04 13:00'
+    },
+    {
+      player1: 'Brazil',
+      abbr1: 'br',
+      score1: 2,
+      player2: 'Colombia',
+      abbr2: 'co',
+      score2: 1,
+      description: 'quarter-finals',
+      start: '2014-07-04 17:00'
+    },
+    {
+      player1: 'Argentina',
+      abbr1: 'ar',
+      score1: 1,
+      player2: 'Belgium',
+      abbr2: 'be',
+      score2: 0,
+      description: 'quarter-finals',
+      start: '2014-07-05 13:00'
+    },
+    {
+      player1: 'Netherlands',
+      abbr1: 'nl',
+      score1: '0 (4)',
+      player2: 'Costa Rica',
+      abbr2: 'cr',
+      score2: '0 (3)',
+      description: 'quarter-finals',
+      start: '2014-07-05 17:00'
+    },
+
+    // semi-finals
+    {
+      player1: 'Brazil',
+      abbr1: 'br',
+      score1: 1,
+      player2: 'Germany',
+      abbr2: 'de',
+      score2: 7,
+      description: 'semi-finals',
+      start: '2014-07-08 17:00'
+    },
+    {
+      player1: 'Netherlands',
+      abbr1: 'nl',
+      score1: '0 (2)',
+      player2: 'Argentina',
+      abbr2: 'ar',
+      score2: '0 (4)',
+      description: 'semi-finals',
+      start: '2014-07-09 17:00'
+    },
+
+    // final
+    {
+      player1: 'Germany',
+      score1: 1,
+      abbr1: 'de',
+      player2: 'Argentina',
+      abbr2: 'ar',
+      score2: 0,
+      description: 'final',
+      start: '2014-07-13 16:00'
+    }
+  ]);
+
+  // Configuration for the Timeline
+  var options = {
+    // specify a template for the items
+    template: template
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>

examples/timeline/26_external_data.html

@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | External data</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+    }
+  </style>
+
+  <!-- Load jquery for ajax support -->
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h1>Load external data</h1>
+<p>
+  This demo shows how to load external data via an ajax call.
+</p>
+<div id="visualization"></div>
+<div id="loading">loading...</div>
+
+<script type="text/javascript">
+  // load data via an ajax request. When the data is in, load the timeline
+  $.ajax({
+    url: 'data/basic.json',
+    success: function (data) {
+      // hide the "loading..." message
+      document.getElementById('loading').style.display = 'none';
+
+      // DOM element where the Timeline will be attached
+      var container = document.getElementById('visualization');
+
+      // Create a DataSet (allows two way data-binding)
+      var items = new vis.DataSet(data);
+
+      // Configuration for the Timeline
+      var options = {};
+
+      // Create a Timeline
+      var timeline = new vis.Timeline(container, items, options);
+    },
+    error: function (err) {
+      console.log('Error', err);
+      if (err.status === 0) {
+        alert('Failed to load data/basic.json.\nPlease run this example on a server.');
+      }
+      else {
+        alert('Failed to load data/basic.json.');
+      }
+    }
+  });
+</script>
+</body>
+</html>

examples/timeline/data/basic.json

@@ -0,0 +1,34 @@
+[
+  {
+    "id": 1,
+    "content": "item 1",
+    "start": "2014-04-20"
+  },
+  {
+    "id": 2,
+    "content": "item 2",
+    "start": "2014-04-14"
+  },
+  {
+    "id": 3,
+    "content": "item 3",
+    "start": "2014-04-18"
+  },
+  {
+    "id": 4,
+    "content": "item 4",
+    "start": "2014-04-16",
+    "end": "2014-04-19"
+  },
+  {
+    "id": 5,
+    "content": "item 5",
+    "start": "2014-04-25"
+  },
+  {
+    "id": 6,
+    "content": "item 6",
+    "start": "2014-04-27",
+    "type": "point"
+  }
+]

examples/timeline/data/wk2014.json

@@ -0,0 +1,152 @@
+[
+  {
+    "player1": "Brazil",
+    "abbr1": "br",
+    "score1": "1 (3)",
+    "player2": "Chile",
+    "abbr2": "cl",
+    "score2": "1 (2)",
+    "description": "round of 16",
+    "start": "2014-06-28 13:00"
+  },
+  {
+    "player1": "Colombia",
+    "abbr1": "co",
+    "score1": 2,
+    "player2": "Uruguay",
+    "abbr2": "uy",
+    "score2": 0,
+    "description": "round of 16",
+    "start": "2014-06-28 17:00"
+  },
+  {
+    "player1": "Netherlands",
+    "abbr1": "nl",
+    "score1": 2,
+    "player2": "Mexico",
+    "abbr2": "mx",
+    "score2": 1,
+    "description": "round of 16",
+    "start": "2014-06-29 13:00"
+  },
+  {
+    "player1": "Costa Rica",
+    "abbr1": "cr",
+    "score1": "1 (5)",
+    "player2": "Greece",
+    "abbr2": "gr",
+    "score2": "1 (3)",
+    "description": "round of 16",
+    "start": "2014-06-29 17:00"
+  },
+  {
+    "player1": "France",
+    "abbr1": "fr",
+    "score1": 2,
+    "player2": "Nigeria",
+    "abbr2": "ng",
+    "score2": 0,
+    "description": "round of 16",
+    "start": "2014-06-30 13:00"
+  },
+  {
+    "player1": "Germany",
+    "abbr1": "de",
+    "score1": 2,
+    "player2": "Algeria",
+    "abbr2": "dz",
+    "score2": 1,
+    "description": "round of 16",
+    "start": "2014-06-30 17:00"
+  },
+  {
+    "player1": "Argentina",
+    "abbr1": "ar",
+    "score1": 1,
+    "player2": "Switzerland",
+    "abbr2": "ch",
+    "score2": 0,
+    "description": "round of 16",
+    "start": "2014-07-01 13:00"
+  },
+  {
+    "player1": "Belgium",
+    "abbr1": "be",
+    "score1": 2,
+    "player2": "USA",
+    "abbr2": "us",
+    "score2": 1,
+    "description": "round of 16",
+    "start": "2014-07-01 17:00"
+  },
+  {
+    "player1": "France",
+    "abbr1": "fr",
+    "score1": 0,
+    "player2": "Germany",
+    "abbr2": "de",
+    "score2": 1,
+    "description": "quarter-finals",
+    "start": "2014-07-04 13:00"
+  },
+  {
+    "player1": "Brazil",
+    "abbr1": "br",
+    "score1": 2,
+    "player2": "Colombia",
+    "abbr2": "co",
+    "score2": 1,
+    "description": "quarter-finals",
+    "start": "2014-07-04 17:00"
+  },
+  {
+    "player1": "Argentina",
+    "abbr1": "ar",
+    "score1": 1,
+    "player2": "Belgium",
+    "abbr2": "be",
+    "score2": 0,
+    "description": "quarter-finals",
+    "start": "2014-07-05 13:00"
+  },
+  {
+    "player1": "Netherlands",
+    "abbr1": "nl",
+    "score1": "0 (4)",
+    "player2": "Costa Rica",
+    "abbr2": "cr",
+    "score2": "0 (3)",
+    "description": "quarter-finals",
+    "start": "2014-07-05 17:00"
+  },
+  {
+    "player1": "Brazil",
+    "abbr1": "br",
+    "score1": 1,
+    "player2": "Germany",
+    "abbr2": "de",
+    "score2": 7,
+    "description": "semi-finals",
+    "start": "2014-07-08 17:00"
+  },
+  {
+    "player1": "Netherlands",
+    "abbr1": "nl",
+    "score1": "0 (2)",
+    "player2": "Argentina",
+    "abbr2": "ar",
+    "score2": "0 (4)",
+    "description": "semi-finals",
+    "start": "2014-07-09 17:00"
+  },
+  {
+    "player1": "Germany",
+    "score1": 1,
+    "abbr1": "de",
+    "player2": "Argentina",
+    "abbr2": "ar",
+    "score2": 0,
+    "description": "final",
+    "start": "2014-07-13 16:00"
+  }
+]

examples/timeline/index.html

@@ -14,7 +14,7 @@
 
   <p><a href="01_basic.html">01_basic.html</a></p>
   <p><a href="02_interactive.html">02_dataset.html</a></p>
-  <p><a href="03_a_lot_of_data.html">03_a_lot_of_data.html</a></p>
+  <p><a href="03_performance.html">03_performance.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="06_event_listeners.html">06_event_listeners.html</a></p>
@@ -25,7 +25,7 @@
   <p><a href="11_points.html">11_points.html</a></p>
   <p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
   <p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
-  <p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
+  <p><a href="14_group_performance.html">14_group_performance.html</a></p>
   <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
   <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
   <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
@@ -34,6 +34,10 @@
   <p><a href="20_click_to_use.html">20_click_to_use.html</a></p>
   <p><a href="21_set_selection.html">21_set_selection.html</a></p>
   <p><a href="22_window_adjustment.html">22_window_adjustment.html</a></p>
+  <p><a href="23_data_attributes.html">23_data_attributes.html</a></p>
+  <p><a href="24_background_areas.html">24_background_areas.html</a></p>
+  <p><a href="25_templates.html">25_templates.html</a></p>
+  <p><a href="26_external_data.html">26_external_data.html</a></p>
 
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 

index.html

@@ -74,7 +74,7 @@ bower install vis
 <h3>download</h3>
 
 <a href="download/vis.zip">Click here to download vis.js</a>
-(version <span class="version">3.3.0</span>)
+(version <span class="version">3.4.0</span>)
 
 
 <h2 id="example">Example</h2>
@@ -260,6 +260,30 @@ The source code of the examples can be found in the
       <div>window adjustment</div>
     </a>
   </div>
+  <div class="thumb">
+    <a href="examples/timeline/23_data_attributes.html">
+      <img src="img/gallery/timeline/23_data_attributes.png">
+      <div>data attributes</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/timeline/24_background_areas.html">
+      <img src="img/gallery/timeline/24_background_areas.png">
+      <div>background areas</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/timeline/25_templates.html">
+      <img src="img/gallery/timeline/25_templates.png">
+      <div>templates</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/timeline/26_external_data.html">
+      <img src="img/gallery/timeline/26_external_data.png">
+      <div>external data</div>
+    </a>
+  </div>
 </div>
 
 <h3 id="network">Network</h3>
@@ -455,6 +479,18 @@ The source code of the examples can be found in the
       <div>localization</div>
     </a>
   </div>
+  <div class="thumb">
+    <a href="examples/network/32_hierarchicaLayoutMethods.html">
+      <img src="img/gallery/network/32_hierarchicalLayoutMethods.png">
+      <div>hierarchical layout methods</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/network/33_animation.html">
+      <img src="img/gallery/network/33_animation.png">
+      <div>animation</div>
+    </a>
+  </div>
   <div class="thumb">
     <a href="examples/network/graphviz/graphviz_gallery.html">
       <img src="img/gallery/network/graphviz_gallery.png">
@@ -554,6 +590,12 @@ The source code of the examples can be found in the
       <div>toggle groups</div>
     </a>
   </div>
+  <div class="thumb">
+    <a href="examples/graph2d/15_streaming_data.html">
+      <img src="img/gallery/graph2d/15_streaming_data.png">
+      <div>streaming data</div>
+    </a>
+  </div>
 </div>