Released version 4.13.0

dist/vis.css

@@ -32,6 +32,11 @@ div.vis-configuration-wrapper {
     width:700px;
 }
 
+div.vis-configuration-wrapper::after {
+  clear: both;
+  content: "";
+  display: block;
+}
 
 div.vis-configuration.vis-config-option-container{
     display:block;
@@ -133,7 +138,7 @@ input.vis-configuration.vis-config-rangeinput{
     position:relative;
     top:-5px;
     width:60px;
-    height:13px;
+    /*height:13px;*/
     padding:1px;
     margin:0;
     pointer-events:none;

docs/data/dataset.html

@@ -104,7 +104,7 @@
     Vis.js comes with a flexible DataSet, which can be used to hold and
     manipulate unstructured data and listen for changes in the data.
     The DataSet is key/value based. Data items can be added, updated and
-    removed from the DatSet, and one can subscribe to changes in the DataSet.
+    removed from the DataSet, and one can subscribe to changes in the DataSet.
     The data in the DataSet can be filtered and ordered, and fields (like
     dates) can be converted to a specific type. Data can be normalized when
     appending it to the DataSet as well.

docs/graph2d/index.html

@@ -434,7 +434,7 @@ var options = {
             <td class="greenField indent">barChart.sideBySide</td>
             <td>Boolean</td>
             <td>false</td>
-            <td>If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side.
+            <td>If two datapoints of a barchart overlap, they are drawn over eachother by default. If sideBySide is set to true, they will be drawn side by side, within the same width as a single bar..
                 See <a href="../../examples/graph2d/10_barsSideBySide.html">example 10</a> for more information.
                 When using groups, see <a href="../../examples/graph2d/11_barsSideBySideGroups.html">example 11</a>.
             </td>
@@ -445,7 +445,12 @@ var options = {
             <td>50</td>
             <td>The width of the bars.</td>
         </tr>
-
+        <tr parent="barChart" class="hidden">
+            <td class="greenField indent">barChart.minWidth</td>
+            <td>Number</td>
+            <td></td>
+            <td>The minimum width of the bars in pixels: by default the bars get smaller while zooming out to prevent overlap, this value is the minimum width of the bar. Default behavior (when minWidth is not set) is 10% of the bar width.</td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('g2dOptions','dataAxis', this);">
             <td><span parent="dataAxis" class="right-caret"></span> dataAxis</td>
             <td>Object</td>
@@ -470,12 +475,11 @@ var options = {
             <td>Function</td>
             <td></td>
             <td>Insert a custom function on how to format the label. The function will receive a numeric value and has to return a string. Default function is:
-            <pre class="code">
+            <pre class="prettyprint lang-js">
 function (value) {
-  return value;
-}
-            </pre>
-            which does nothing to it.</td>
+  return ''+value.toPrecision(3);
+}</pre>
+            </td>
         </tr>
         <tr parent="dataAxis" class="hidden">
             <td class="indent2">dataAxis.left.range.min</td>
@@ -1331,7 +1335,14 @@ Graph2d.off('rangechanged', onChange);
             <td>Fired when double clicked inside the Graph2d.
             </td>
         </tr>
-
+        <tr>
+            <td>changed</td>
+            <td>
+                Has no properties.
+            </td>
+            <td>Fired once after each graph redraw.
+            </td>
+        </tr>
         <tr>
             <td>rangechange</td>
             <td>
@@ -1355,6 +1366,7 @@ Graph2d.off('rangechanged', onChange);
             <td>Fired once after the user has dragged the Graph2d window.
             </td>
         </tr>
+
         <tr>
             <td>timechange</td>
             <td>

docs/network/edges.html

@@ -119,6 +119,7 @@ var options = {
       middle: {enabled: false, scaleFactor:1},
       from:   {enabled: false, scaleFactor:1}
     },
+    arrowStrikethrough: true,
     color: {
       color:'#848484',
       highlight:'#848484',
@@ -254,6 +255,12 @@ network.setOptions(options);
             <td><code>Object</code></td>
             <td>Exactly the same as the to object but with an arrowhead at the from node of the edge.</td>
         </tr>
+        <tr>
+            <td class="indent">arrowStrikethrough</td>
+            <td>Boolean</td>
+            <td><code>true</code></td>
+            <td>When false, the edge stops at the arrow. This can be useful if you have thick lines and you want the arrow to end in a point. Middle arrows are not affected by this.</td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
             <td><span parent="color" class="right-caret"></span> color</td>
             <td>Object or String</td>

docs/network/layout.html

@@ -105,8 +105,12 @@ var options = {
     hierarchical: {
       enabled:false,
       levelSeparation: 150,
-      direction: 'UD',   // UD, DU, LR, RL
-      sortMethod: 'hubsize' // hubsize, directed
+      nodeSpacing: 100,
+      treeSpacing: 200,
+      blockShifting: true,
+      edgeMinimization: true,
+      direction: 'UD',        // UD, DU, LR, RL
+      sortMethod: 'hubsize'   // hubsize, directed
     }
   }
 }
@@ -132,6 +136,12 @@ network.setOptions(options);
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','hierarchical', this);"><td><span parent="repulsion" class="right-caret"></span> hierarchical</td><td>Object or Boolean</td><td><code>Object</code></td>      <td>When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.</td></tr>
         <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.enabled</td><td>Boolean</td><td><code>false</code></td>        <td>Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.</td></tr>
         <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.levelSeparation</td><td>Number</td><td><code>150</code></td>   <td>The distance between the different levels.</td></tr>
+        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.nodeSpacing</td><td>Number</td><td><code>100</code></td>       <td>Minimum distance between nodes on the free axis. This is only for the initial layout. If you enable physics, the node distance there will be the effective node distance.</td></tr>
+        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.treeSpacing</td><td>Number</td><td><code>200</code></td>       <td>Distance between different trees (independent networks). This is only for the initial layout. If you enable physics, the repulsion model will denote the distance between the trees.</td></tr>
+        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.blockShifting</td><td>Boolean</td><td><code>true</code></td>    <td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift
+            it's branch along with it for as far as it can, respecting the nodeSpacing on any level. This is mainly for the initial layout. If you enable physics, they layout will be determined by the physics. This will greatly speed up the stabilization time though!</td></tr>
+        <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.edgeMinimization</td><td>Boolean</td><td><code>true</code></td> <td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process.
+            Each node will try to move along its free axis to reduce the total length of it's edges. This is mainly for the initial layout. If you enable physics, they layout will be determined by the physics. This will greatly speed up the stabilization time though!</td></tr>
         <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.direction</td><td>String</td><td><code>'UD'</code></td>        <td>The direction of the hierarchical layout. The available options are: <code>UD, DU, LR, RL</code>. To simplify: up-down, down-up, left-right, right-left.</td></tr>
         <tr parent="hierarchical" class="hidden"><td class="indent">hierarchical.sortMethod</td><td>String</td><td><code>'hubsize'</code></td>  <td>The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: <code>hubsize, directed</code>. <br><br>
             Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated. <br><br>

docs/network/nodes.html

@@ -108,7 +108,7 @@
 var options = {
   nodes:{
     borderWidth: 1,
-    borderWidthSelected: undefined,
+    borderWidthSelected: 2,
     brokenImage:undefined,
     color: {
       border: '#2B7CE9',
@@ -227,8 +227,8 @@ network.setOptions(options);
         <tr>
             <td>borderWidthSelected</td>
             <td>Number</td>
-            <td><code>undefined</code></td>
-            <td>The width of the border of the node when it is selected. When undefined, the borderWidth is used</td>
+            <td><code>2</code></td>
+            <td>The width of the border of the node when it is selected. When undefined, the borderWidth * 2 is used.</td>
         </tr>
         <tr>
             <td>brokenImage</td>

docs/timeline/index.html

@@ -1381,8 +1381,16 @@ timeline.off('select', onSelect);
       </td>
       <td>Fired after the dragging of a group is finished.
       </td>
-    </tr>    
+    </tr>
 
+    <tr>
+      <td>changed</td>
+      <td>
+        Has no properties.
+      </td>
+      <td>Fired once after each graph redraw.
+      </td>
+    </tr>
     <tr>
       <td>rangechange</td>
       <td>

examples/network/exampleUtil.js

@@ -75,11 +75,15 @@ function seededRandom() {
   return x - Math.floor(x);
 }
 
-function getScaleFreeNetworkSeeded(nodeCount) {
+function getScaleFreeNetworkSeeded(nodeCount, seed) {
+  if (seed) {
+    randomSeed = Number(seed);
+  }
   var nodes = [];
   var edges = [];
   var connectionCount = [];
-  randomSeed = 764;
+  var edgesId = 0;
+
 
   // randomly create some nodes and edges
   for (var i = 0; i < nodeCount; i++) {
@@ -95,6 +99,7 @@ function getScaleFreeNetworkSeeded(nodeCount) {
       var from = i;
       var to = 0;
       edges.push({
+        id: edgesId++,
         from: from,
         to: to
       });
@@ -115,6 +120,7 @@ function getScaleFreeNetworkSeeded(nodeCount) {
       var from = i;
       var to = j;
       edges.push({
+        id: edgesId++,
         from: from,
         to: to
       });

examples/network/layout/hierarchicalLayoutMethods.html

@@ -19,7 +19,7 @@
 
   <script type="text/javascript">
     var network = null;
-    var layoutMethod = "hubsize";
+    var layoutMethod = "directed";
 
     function destroy() {
       if (network !== null) {

examples/network/layout/hierarchicalLayoutUserdefined.html

@@ -1,120 +1,125 @@
 <!doctype html>
 <html>
 <head>
-  <title>Network | Hierarchical Layout, userDefined</title>
-
-  <style type="text/css">
-    body {
-      font: 10pt sans;
-    }
-    #mynetwork {
-      width: 600px;
-      height: 600px;
-      border: 1px solid lightgray;
-    }
-  </style>
+    <title>Network | Hierarchical Layout, userDefined</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+        }
+    </style>
     <script type="text/javascript" src="../../../dist/vis.js"></script>
-    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
 
 
-  <script type="text/javascript">
-    var nodes = null;
-    var edges = null;
-    var network = null;
-    var directionInput = document.getElementById("direction");
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+        var directionInput = document.getElementById("direction");
 
-    function destroy() {
-        if (network !== null) {
-            network.destroy();
-            network = null;
-        }
-    }
-
-    function draw() {
-      destroy();
-      nodes = [];
-      edges = [];
-      var connectionCount = [];
-
-      // randomly create some nodes and edges
-      for (var i = 0; i < 15; i++) {
-          nodes.push({id: i,label: String(i)});
-      }
-      edges.push({from: 0, to: 1 });
-      edges.push({from: 0, to: 6 });
-      edges.push({from: 0, to: 13});
-      edges.push({from: 0, to: 11});
-      edges.push({from: 1, to: 2 });
-      edges.push({from: 2, to: 3 });
-      edges.push({from: 2, to: 4 });
-      edges.push({from: 3, to: 5 });
-      edges.push({from: 1, to: 10});
-      edges.push({from: 1, to: 7 });
-      edges.push({from: 2, to: 8 });
-      edges.push({from: 2, to: 9 });
-      edges.push({from: 3, to: 14});
-      edges.push({from: 1, to: 12});
-      nodes[0]["level"] = 0;
-      nodes[1]["level"] = 1;
-      nodes[2]["level"] = 3;
-      nodes[3]["level"] = 4;
-      nodes[4]["level"] = 4;
-      nodes[5]["level"] = 5;
-      nodes[6]["level"] = 1;
-      nodes[7]["level"] = 2;
-      nodes[8]["level"] = 4;
-      nodes[9]["level"] = 4;
-      nodes[10]["level"] = 2;
-      nodes[11]["level"] = 1;
-      nodes[12]["level"] = 2;
-      nodes[13]["level"] = 1;
-      nodes[14]["level"] = 5;
-
-      // create a network
-      var container = document.getElementById('mynetwork');
-      var data = {
-        nodes: nodes,
-        edges: edges
-      };
-
-    var options = {
-        edges: {
-            smooth: {
-                type:'cubicBezier',
-                forceDirection: (directionInput.value == "UD" || directionInput.value == "DU") ? 'vertical' : 'horizontal',
-                roundness: 0.4
-            }
-        },
-        layout: {
-            hierarchical:{
-                direction: directionInput.value
+        function destroy() {
+            if (network !== null) {
+                network.destroy();
+                network = null;
             }
         }
-    };
-      network = new vis.Network(container, data, options);
 
-      // add event listeners
-      network.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-      });
-    }
+        function draw() {
+            destroy();
+            nodes = [];
+            edges = [];
+            var connectionCount = [];
 
-  </script>
-  <script src="../../googleAnalytics.js"></script>
+            // randomly create some nodes and edges
+            for (var i = 0; i < 15; i++) {
+                nodes.push({id: i, label: String(i)});
+            }
+            edges.push({from: 0, to: 1});
+            edges.push({from: 0, to: 6});
+            edges.push({from: 0, to: 13});
+            edges.push({from: 0, to: 11});
+            edges.push({from: 1, to: 2});
+            edges.push({from: 2, to: 3});
+            edges.push({from: 2, to: 4});
+            edges.push({from: 3, to: 5});
+            edges.push({from: 1, to: 10});
+            edges.push({from: 1, to: 7});
+            edges.push({from: 2, to: 8});
+            edges.push({from: 2, to: 9});
+            edges.push({from: 3, to: 14});
+            edges.push({from: 1, to: 12});
+            nodes[0]["level"] = 0;
+            nodes[1]["level"] = 1;
+            nodes[2]["level"] = 3;
+            nodes[3]["level"] = 4;
+            nodes[4]["level"] = 4;
+            nodes[5]["level"] = 5;
+            nodes[6]["level"] = 1;
+            nodes[7]["level"] = 2;
+            nodes[8]["level"] = 4;
+            nodes[9]["level"] = 4;
+            nodes[10]["level"] = 2;
+            nodes[11]["level"] = 1;
+            nodes[12]["level"] = 2;
+            nodes[13]["level"] = 1;
+            nodes[14]["level"] = 5;
+
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+
+            var options = {
+                edges: {
+                    smooth: {
+                        type: 'cubicBezier',
+                        forceDirection: (directionInput.value == "UD" || directionInput.value == "DU") ? 'vertical' : 'horizontal',
+                        roundness: 0.4
+                    }
+                },
+                layout: {
+                    hierarchical: {
+                        direction: directionInput.value
+                    }
+                },
+                physics:false
+            };
+            network = new vis.Network(container, data, options);
+
+            // add event listeners
+            network.on('select', function (params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+
+    </script>
+    <script src="../../googleAnalytics.js"></script>
 </head>
 
 <body onload="draw();">
 <h2>Hierarchical Layout - User-defined</h2>
+
 <div style="width:700px; font-size:14px; text-align: justify;">
-    This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
+    This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for
+    all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
     If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
 </div>
 <p>
-  <input type="button" id="btn-UD" value="Up-Down">
-  <input type="button" id="btn-DU" value="Down-Up">
-  <input type="button" id="btn-LR" value="Left-Right">
-  <input type="button" id="btn-RL" value="Right-Left">
-  <input type="hidden" id='direction' value="UD">
+    <input type="button" id="btn-UD" value="Up-Down">
+    <input type="button" id="btn-DU" value="Down-Up">
+    <input type="button" id="btn-LR" value="Left-Right">
+    <input type="button" id="btn-RL" value="Right-Left">
+    <input type="hidden" id='direction' value="UD">
 </p>
 
 <div id="mynetwork"></div>
@@ -123,22 +128,22 @@
 <script language="JavaScript">
     var directionInput = document.getElementById("direction");
     var btnUD = document.getElementById("btn-UD");
-    btnUD.onclick = function() {
+    btnUD.onclick = function () {
         directionInput.value = "UD";
         draw();
     };
     var btnDU = document.getElementById("btn-DU");
-    btnDU.onclick = function() {
+    btnDU.onclick = function () {
         directionInput.value = "DU";
         draw();
     };
     var btnLR = document.getElementById("btn-LR");
-    btnLR.onclick = function() {
+    btnLR.onclick = function () {
         directionInput.value = "LR";
         draw();
     };
     var btnRL = document.getElementById("btn-RL");
-    btnRL.onclick = function() {
+    btnRL.onclick = function () {
         directionInput.value = "RL";
         draw();
     };

examples/network/layout/hierarchicalLayoutWithoutPhysics.html

@@ -0,0 +1,85 @@
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Hierarchical Layout without Physics</title>
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+    <style type="text/css">
+        #network{
+            width: 1000px;
+            height: 400px;
+            border: 1px solid lightgray;
+        }
+
+        td {
+            vertical-align:top;
+        }
+        table {
+            width:800px;
+        }
+    </style>
+</head>
+<body>
+<h1>Hierarchical Layout without Physics</h1>
+The hierarchical layout can now be controlled without the use of physics. This is much quicker. The options for this are: <br /><br />
+
+<table>
+    <tr>
+        <td width="150px"><code>levelSeparation</code></td>
+        <td width="400px">Distance between levels.</td>
+    </tr>
+    <tr>
+        <td><code>nodeSpacing</code></td>
+        <td>Minimum distance between nodes on the free axis.</td>
+    </tr>
+    <tr>
+        <td><code>treeSpacing</code></td>
+        <td>Distance between different trees (independent networks).</td>
+    </tr>
+    <tr>
+        <td><code>blockShifting</code></td>
+        <td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift
+            it's branch along with it for as far as it can, respecting the nodeSpacing on any level.</td>
+    </tr>
+    <tr>
+        <td><code>edgeMinimization</code></td>
+        <td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process.
+            Each node will try to move along its free axis to reduce the total length of it's edges.</td>
+    </tr>
+</table>
+<br /><br />
+Play with the settings below the network and see how the layout changes!
+<div id="network"></div>
+<script>
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    // create a network
+    var container = document.getElementById('network');
+    var options = {
+        layout: {
+            hierarchical: {
+                direction: "UD",
+                sortMethod: "directed"
+            }
+        },
+        interaction: {dragNodes :false},
+        physics: {
+            enabled: false
+        },
+        configure: {
+          filter: function (option, path) {
+              if (path.indexOf('hierarchical') !== -1) {
+                  return true;
+              }
+              return false;
+          },
+          showButton:false
+        }
+    };
+    var network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>

examples/network/other/configuration.html

@@ -52,6 +52,15 @@
         configure: true
       };
       network = new vis.Network(container, data, options);
+      
+      network.on("configChange", function() {
+        // this will immediately fix the height of the configuration
+        // wrapper to prevent unecessary scrolls in chrome.
+        // see https://github.com/almende/vis/issues/1568
+        var div = container.getElementsByClassName('vis-configuration-wrapper')[0];
+        div.style["height"] = div.getBoundingClientRect().height + "px";
+      });
+      
     }
   </script>
   <script src="../../googleAnalytics.js"></script>
@@ -64,6 +73,8 @@
   You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
   this in the network.
 </p>
+<p><b>Note:</b> The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code).
+</p>
 <br />
 <div id="mynetwork"></div>
 

index.html

@@ -28,7 +28,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.13.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -36,7 +36,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.12.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
+                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.13.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
                 document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
                 document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
             }
@@ -210,13 +210,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.js" target="_blank">vis.min.js</a> <br>
-                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.13.0/vis.min.js" target="_blank">vis.min.js</a> <br>
+                        <a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.13.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="download/vis.zip">vis.zip (version <span class="version">4.12.0</span>)</a>
+                        <a href="download/vis.zip">vis.zip (version <span class="version">4.13.0</span>)</a>
                     </p>
                 </div>
             </div>

network_examples.html

@@ -101,6 +101,7 @@
     <a class='exampleLink' href="examples/network/layout/hierarchicalLayout.html">hierarchical layout</a><br />
     <a class='exampleLink' href="examples/network/layout/hierarchicalLayoutMethods.html">hierarchical layout - different methods</a><br />
     <a class='exampleLink' href="examples/network/layout/hierarchicalLayoutUserdefined.html">hierarchical layout - user defined</a><br />
+    <a class='exampleLink' href="examples/network/layout/hierarchicalLayoutWithoutPhysics.html">hierarchical layout - without physics</a><br />
     <a class='exampleLink' href="examples/network/layout/randomSeed.html">set the random seed so every network will be the same</a><br />
 
     <h3>events</h3>