diff --git a/examples/graph/02_random_nodes.html b/examples/graph/02_random_nodes.html
index a3de91a5..b048a69d 100755
--- a/examples/graph/02_random_nodes.html
+++ b/examples/graph/02_random_nodes.html
@@ -88,7 +88,7 @@
             // add event listeners
             vis.events.addListener(graph, 'select', function(params) {
                 document.getElementById('selection').innerHTML =
-                        'Selection: ' + JSON.stringify(graph.getSelection());
+                        'Selection: ' + graph.getSelection();
             });
         }
     </script>
diff --git a/examples/graph/07_selections.html b/examples/graph/07_selections.html
index 25c761e2..421c3794 100644
--- a/examples/graph/07_selections.html
+++ b/examples/graph/07_selections.html
@@ -52,24 +52,13 @@
 
     // add event listener
     function onSelect() {
-        var selection = graph.getSelection();
-
-        var info = 'selection: ';
-        selection.forEach(function (s) {
-            info += s.row + ' ';
-        });
-
-        document.getElementById('info').innerHTML += info + '<br>';
+        document.getElementById('info').innerHTML +=
+                'selection: ' + graph.getSelection().join(', ') + '<br>';
     }
     vis.events.addListener(graph, 'select', onSelect);
 
-    // set initial selection (row based, zero-based)
-    var selection = [
-        {'row': 2},
-        {'row': 3},
-        {'row': 4}
-    ];
-    graph.setSelection(selection);
+    // set initial selection (id's of some nodes)
+    graph.setSelection([3, 4, 5]);
 </script>
 
 </body>
diff --git a/examples/graph/15_dot_language_playground.html b/examples/graph/15_dot_language_playground.html
index a6e96c86..bf757cd8 100644
--- a/examples/graph/15_dot_language_playground.html
+++ b/examples/graph/15_dot_language_playground.html
@@ -48,7 +48,7 @@
         }
     </style>
 </head>
-<body>
+<body onload="drawExample('example1')">
 
 <table id="frame">
     <col width="50%">
@@ -140,8 +140,7 @@ digraph {
     A -> A[label=0.5];
     B -> B[label=1.2] -> C[label=0.7] -- A;
     B -> D;
-    D -> B;
-    D -> C;
+    D -> {B; C}
     D -> E[label=0.2];
     F -> F;
     A [
@@ -199,11 +198,5 @@ digraph G  {
 }
 </textarea>
 
-<script>
-
-    // draw example1 now
-    drawExample('example1');
-</script>
-
 </body>
 </html>
diff --git a/examples/graph/16_dynamic_data.html b/examples/graph/16_dynamic_data.html
new file mode 100644
index 00000000..b4ccb596
--- /dev/null
+++ b/examples/graph/16_dynamic_data.html
@@ -0,0 +1,265 @@
+<!doctype html>
+<html>
+<head>
+    <title>Graph | DataSet</title>
+
+    <style type="text/css">
+        html, body {
+            font: 11pt arial;
+        }
+
+        h1 {
+            font-size: 150%;
+            margin: 5px 0;
+        }
+
+        h2 {
+            font-size: 100%;
+            margin: 5px 0;
+        }
+
+        table.view {
+            width: 100%;
+        }
+
+        table td {
+            vertical-align: top;
+        }
+
+        table table {
+            background-color: #f5f5f5;
+            border: 1px solid #e5e5e5;
+        }
+
+        table table td {
+            vertical-align: middle;
+        }
+
+        input[type=text], pre {
+            border: 1px solid lightgray;
+        }
+
+        pre {
+            margin: 0;
+            padding: 5px;
+            font-size: 10pt;
+        }
+
+        #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 type="text/javascript">
+        var nodes, edges, graph;
+
+        // 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);
+                }
+            });
+
+            // 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 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>
+</head>
+
+<body>
+
+<p>
+    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>
+
+</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>
+
+        <td>
+            <h2>Edges</h2>
+            <pre id="edges"></pre>
+        </td>
+
+        <td>
+            <h2>Graph</h2>
+            <div id="graph"></div>
+        </td>
+    </tr>
+</table>
+
+</body>
+</html>
diff --git a/examples/graph/graphviz/graphviz_gallery.html b/examples/graph/graphviz/graphviz_gallery.html
index c5d96ed2..3260187d 100644
--- a/examples/graph/graphviz/graphviz_gallery.html
+++ b/examples/graph/graphviz/graphviz_gallery.html
@@ -57,9 +57,7 @@
         <option value="data/transparency.gv.txt">transparency</option>
         <option value="data/twopi2.gv.txt">twopi2</option>
         <option value="data/unix.gv.txt">unix</option>
-        <!-- TODO: get example world working (needs some extension of the DOT parser)
         <option value="data/world.gv.txt">world</option>
-        -->
     </select>
 </p>
 
diff --git a/examples/timeline/02_dataset.html b/examples/timeline/02_dataset.html
index 81c1d0dd..c1987abd 100644
--- a/examples/timeline/02_dataset.html
+++ b/examples/timeline/02_dataset.html
@@ -7,12 +7,15 @@
         body, html {
             font-family: arial, sans-serif;
             font-size: 11pt;
+            height: 100%;
+            margin: 0;
+            padding: 0;
         }
 
         #visualization {
             box-sizing: border-box;
             width: 100%;
-            height: 300px;
+            height: 100%;
         }
     </style>
 
@@ -26,7 +29,7 @@
 
     // create a dataset with items
     var items = new vis.DataSet({
-        fieldTypes: {
+        convert: {
             start: 'Date',
             end: 'Date'
         }
@@ -44,6 +47,7 @@
     var options = {
         start: now.clone().add('days', -3),
         end: now.clone().add('days', 7),
+        orientation: 'top',
         height: '100%'
     };
 
diff --git a/examples/timeline/03_much_data.html b/examples/timeline/03_much_data.html
index 36221ad7..5d778975 100644
--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_much_data.html
@@ -27,7 +27,7 @@
     // create a dataset with items
     var now = moment().minutes(0).seconds(0).milliseconds(0);
     var items = new vis.DataSet({
-        fieldTypes: {
+        convert: {
             start: 'Date',
             end: 'Date'
         }
diff --git a/examples/timeline/05_groups.html b/examples/timeline/05_groups.html
index 42ae2d1c..880a7326 100644
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@@ -19,6 +19,11 @@
     <script src="../../vis.js"></script>
 </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.
+</p>
 <div id="visualization"></div>
 
 <script>
@@ -26,7 +31,7 @@
     var groupCount = 3;
     var itemCount = 20;
 
-    // create a dataset with groups
+    // create a data set with groups
     var names = ['John', 'Alston', 'Lee', 'Grant'];
     var groups = new vis.DataSet();
     for (var g = 0; g < groupCount; g++) {
diff --git a/img/gallery/graph/16_dynamic_data.png b/img/gallery/graph/16_dynamic_data.png
new file mode 100644
index 00000000..c60ccf38
Binary files /dev/null and b/img/gallery/graph/16_dynamic_data.png differ
diff --git a/index.html b/index.html
index 04617259..479b818a 100644
--- a/index.html
+++ b/index.html
@@ -264,6 +264,12 @@ bower install vis
                 <div>playground</div>
             </a>
         </div>
+        <div class="thumb">
+            <a href="examples/graph/16_dynamic_data.html">
+                <img src="img/gallery/graph/16_dynamic_data.png">
+                <div>dynamic data</div>
+            </a>
+        </div>
         <div class="thumb">
             <a href="examples/graph/graphviz/graphviz_gallery.html">
                 <img src="img/gallery/graph/graphviz_gallery.png">
