fixed alot of bugs, expanded configurator, added more examples, updated docs, updated update interval

9 years ago · d404798174
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/docs/network/configure.html
+++ b/docs/network/configure.html
@ -100,7 +100,8 @@ var options = {
  configure: {
    enabled: true,
    filter: 'nodes,edges',
    container: undefined
    container: undefined,
    showButton: true
  }
 }

@ -154,6 +155,12 @@ function (option, path) {
            <td><code>undefined</code></td>
            <td>This allows you to put the configure list in another HTML container than below the network.</td>
        </tr>
        <tr>
            <td>showButton</td>
            <td>Boolean</td>
            <td><code>true</code></td>
            <td>Show the generate options button at the bottom of the configurator.</td>
        </tr>
    </table>

 </div>
--- a/docs/network/physics.html
+++ b/docs/network/physics.html
@ -184,7 +184,7 @@ network.setOptions(options);
        <tr class='toggle collapsible' onclick="toggleTable('optionTable','stabilization', this);"><td><span parent="stabilization" class="right-caret"></span> stabilization</td>                          <td>Object | Boolean</td><td><code>Object</code></td>    <td>When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.enabled</td>                  <td>Boolean</td>        <td><code>true</code></td>       <td>Toggle the stabilization. This is an optional property. If undefined, it is automatically set to true when any of the properties of this object are defined.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.iterations</td>               <td>Number</td>         <td><code>1000</code></td>       <td>The physics module tries to stabilize the network on load up til a maximum number of iterations defined here. If the network stabilized with less, you are finished before the maximum number.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td>           <td>Number</td>         <td><code>100</code></td>        <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.updateInterval</td>           <td>Number</td>         <td><code>50</code></td>         <td>When stabilizing, the DOM can freeze. You can chop the stabilization up into pieces to show a loading bar for instance. The interval determines after how many iterations the <code>stabilizationProgress</code> event is triggered.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.onlyDynamicEdges</td>         <td>Boolean</td>        <td><code>false</code></td>      <td>If you have predefined the position of all nodes and only want to stabilize the dynamic smooth edges, set this to true. It freezes all nodes except the invisible dynamic smooth curve support nodes. If you want the visible nodes to move and stabilize, do not use this.</td></tr>
        <tr parent="stabilization" class="hidden"><td class="indent">stabilization.fit</td>                      <td>Boolean</td>        <td><code>true</code></td>       <td>Toggle whether or not you want the view to zoom to fit all nodes when the stabilization is finished.</td></tr>
        <tr><td>timestep</td>                               <td>Number</td>         <td><code>0.5</code></td>        <td>The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.</td></tr>
--- a/examples/network/categories/02_random_nodes.html
+++ b/examples/network/categories/02_random_nodes.html
@ -1,65 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Random nodes</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" />

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }

    function draw() {
      destroy();


      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        physics: { stabilization: true }
      };
      network = new vis.Network(container, data, options);
    }


  </script>
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body onload="draw();">
 <p>
  Generate a random network with nodes and edges.
 </p>
 <p>
  <label for="nodeCount">Number of nodes:</label>
  <input id="nodeCount" type="text" value="25" style="width: 50px;">
  <input type="submit" value="Go" onclick="draw()">
 </p>

 <div id="mynetwork"></div>

 </body>
 </html>
--- a/examples/network/categories/07_selections.html
+++ b/examples/network/categories/07_selections.html
@ -1,69 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Selections</title>

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

  <style type="text/css">
    #mynetwork {
      width: 400px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them.
 </p>
 <div id="mynetwork"></div>
 <pre id="info"></pre>

 <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 network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    nodes: {
      shape: 'box'
    }
  };
  network = new vis.Network(container, data, options);

  // add event listener
  network.on('select', function(properties) {
    console.log('select', properties);
    delete properties.event;
    document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>';
  });

  // set initial selection (id's of some nodes)
  network.selectNodes([3, 4, 5]);
 </script>

 </body>
 </html>
--- a/examples/network/categories/11_styling.html
+++ b/examples/network/categories/11_styling.html
@ -1,145 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Custom style</title>

  <style type="text/css">
    #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" />

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var options = null;
    var network = 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'}
      ];

      // 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}
      ];

      // specify options
      options = {
        physics: {
          stabilization: false,
          barnesHut: {
            springLength:200
          }
        },
        edges: {
          width: 2,
          arrows: 'to',
          color: 'gray'
        },
        nodes: {
          // default for all nodes
          font: {
            face: 'times'
          },
          shape: 'circle',
          color: {
            border: 'orange',
            background: 'yellow',
            highlight: {
              border: 'darkorange',
              background: 'gold'
            }
          }
        },
        groups: {
          black: {
            // defaults for nodes in this group
            size: 15,
            color: 'black',
            font: {
              color: 'white',
              size: 18,
              face: 'courier'
            },
            shape: 'box'
          },
          gray: {
            color: {
              border: 'black',
              background: 'gray',
              highlight: {
                border: 'black',
                background: 'lightgray'
              }
            },
            font: {
              size: 18,
              face: 'arial'
            },
            shape: 'circle'
          },
          white: {
            color: {
              border: 'black',
              background: 'white'
            },
            font: {
              color: 'red'
            },
            shape: 'image',
            image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png'
          }
        }
      };

      // create the network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
 </head>

 <p>
  Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges.
 </p>
 <body onload="draw()">
 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/12_arrows.html
+++ b/examples/network/categories/12_arrows.html
@ -1,69 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Arrows</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" />

  <script type="text/javascript">
    // Called on page load
    function draw() {
      var nodes = [
        {id: 1, label: 'arrows\nexamples'},
        {id: 2, label: 'none'},
        {id: 3, label: '"to"'},
        {id: 4, label: '"from, to"'},
        {id: 5, label: '"middle"'},
        {id: 6, label: '{to: {scaleFactor: 2}}'}
      ];
      var edges = [
        {from: 1, to: 2},
        {from: 1, to: 3, arrows: 'to'},
        {from: 1, to: 4, arrows: 'from, to'},
        {from: 1, to: 5, arrows: 'middle'},
        {from: 1, to: 6, arrows: {to: {scaleFactor: 2}}}
      ];

      // create the network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {
          shape: 'box'
        },
        physics: {
          barnesHut: {
            springLength: 150
          },
          stabilization: false
        }
      };
      var network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">
 <p>
  This example shows the different options for arrows.
 </p>

 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/13_dashed_lines.html
+++ b/examples/network/categories/13_dashed_lines.html
@ -1,69 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Dashed lines</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" />

  <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: 'dashes: [20, 20]'},
        {id: 4, label: 'dashes: [20, 5]'},
        {id: 5, label: 'dashes: [5, 20]'},
        {id: 6, label: 'dashes: [20, 5, 5, 5]'}
      ];
      var edges = [
        {from: 1, to: 2, dashes: true},
        {from: 1, to: 3, dashes: [20, 20]},
        {from: 1, to: 4, dashes: [20, 5]},
        {from: 1, to: 5, dashes: [5, 20]},
        {from: 1, to: 6, dashes: [20, 5, 5, 5]}
      ];

      // create the network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        nodes: {
          shape: 'box'
        },
        physics: {
          barnesHut: {
            springLength: 150
          },
          stabilization: false
        }
      };
      var network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">
 <p>
  This example shows the different options for dashed lines.
 </p>

 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/18_fully_random_nodes_clustering.html
+++ b/examples/network/categories/18_fully_random_nodes_clustering.html
@ -1,111 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Fully random nodes clustering</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" />

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }

    function draw() {
      destroy();

      nodes = [];
      edges = [];
      // randomly create some nodes and edges
      var nodeCount = parseInt(document.getElementById('nodeCount').value);

      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: String(i)
        });
      }
      for (var i = 0; i < nodeCount; i++) {
        var from = i;
        var to = i;
        to = i;
        while (to == i) {
          to = Math.floor(Math.random() * (nodeCount));
        }
        edges.push({
          from: from,
          to: to
        });
      }
      // create a network
      var clusteringOn = document.getElementById('clustering').checked;
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
        clustering: {
          enabled: clusteringOn
        },
        stabilize: 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>Clustering - Fully random network</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
  This example shows a fully randomly generated set of nodes and connected edges.
  By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
  a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
  <br />
  <br />
  Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
  will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
  <br />
  <br />
  Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
 </div>
 <br />
 <form onsubmit="draw(); return false;">
  <label for="nodeCount">Number of nodes:</label>
  <input id="nodeCount" type="text" value="50" style="width: 50px;">
  <label for="clustering">Enable Clustering:</label>
  <input id="clustering" type="checkbox" onChange="draw()" checked="true">
  <input type="submit" value="Go">
 </form>
 <br>

 <div id="mynetwork"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/network/categories/19_scale_free_graph_clustering.html
+++ b/examples/network/categories/19_scale_free_graph_clustering.html
@ -1,138 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Scale free network clustering</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" />

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }

    function draw() {
      destroy();

      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)
        });

        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 clusteringOn = document.getElementById('clustering').checked;
      var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
    var options = {
    clustering: {
        enabled: clusteringOn,
        clusterEdgeThreshold: clusterEdgeThreshold
    },
    stabilize: 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>Clustering - Scale-Free-Network</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
    By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
    a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
    <br />
    <br />
    Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance
    will be created and the cluster contents will only be simulated in there. Double click will also open a cluster.
    <br />
    <br />
    Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset.
    Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked).
 </div>
 <br />
 <form onsubmit="draw(); return false;">
  <label for="nodeCount">Number of nodes:</label>
  <input id="nodeCount" type="text" value="125" style="width: 50px;">
  <label for="clustering">Enable Clustering:</label>
  <input id="clustering" type="checkbox" onChange="draw()" checked="true">
  <label for="clusterEdgeThreshold">clusterEdgeThreshold:</label>
  <input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;">
  <input type="submit" value="Go">
 </form>
 <br>

 <div id="mynetwork"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/network/categories/22_les_miserables.html
+++ b/examples/network/categories/22_les_miserables.html
@ -1,386 +0,0 @@
 <!doctype html>
 <html>
 <head>
    <title>Network | Les miserables</title>

    <style type="text/css">
        #mynetwork {
            width: 900px;
            height: 900px;
            border: 1px solid lightgray;
        }
    </style>

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

    <script type="text/javascript">
        function draw() {
            // create some nodes
            var nodes = [
                        {id:0,"label":"Myriel","group":1},
                        {id:1,"label":"Napoleon","group":1},
                        {id:2,"label":"Mlle.Baptistine","group":1},
                        {id:3,"label":"Mme.Magloire","group":1},
                        {id:4,"label":"CountessdeLo","group":1},
                        {id:5,"label":"Geborand","group":1},
                        {id:6,"label":"Champtercier","group":1},
                        {id:7,"label":"Cravatte","group":1},
                        {id:8,"label":"Count","group":1},
                        {id:9,"label":"OldMan","group":1},
                        {id:10,"label":"Labarre","group":2},
                        {id:11,"label":"Valjean","group":2},
                        {id:12,"label":"Marguerite","group":3},
                        {id:13,"label":"Mme.deR","group":2},
                        {id:14,"label":"Isabeau","group":2},
                        {id:15,"label":"Gervais","group":2},
                        {id:16,"label":"Tholomyes","group":3},
                        {id:17,"label":"Listolier","group":3},
                        {id:18,"label":"Fameuil","group":3},
                        {id:19,"label":"Blacheville","group":3},
                        {id:20,"label":"Favourite","group":3},
                        {id:21,"label":"Dahlia","group":3},
                        {id:22,"label":"Zephine","group":3},
                        {id:23,"label":"Fantine","group":3},
                        {id:24,"label":"Mme.Thenardier","group":4},
                        {id:25,"label":"Thenardier","group":4},
                        {id:26,"label":"Cosette","group":5},
                        {id:27,"label":"Javert","group":4},
                        {id:28,"label":"Fauchelevent","group":0},
                        {id:29,"label":"Bamatabois","group":2},
                        {id:30,"label":"Perpetue","group":3},
                        {id:31,"label":"Simplice","group":2},
                        {id:32,"label":"Scaufflaire","group":2},
                        {id:33,"label":"Woman1","group":2},
                        {id:34,"label":"Judge","group":2},
                        {id:35,"label":"Champmathieu","group":2},
                        {id:36,"label":"Brevet","group":2},
                        {id:37,"label":"Chenildieu","group":2},
                        {id:38,"label":"Cochepaille","group":2},
                        {id:39,"label":"Pontmercy","group":4},
                        {id:40,"label":"Boulatruelle","group":6},
                        {id:41,"label":"Eponine","group":4},
                        {id:42,"label":"Anzelma","group":4},
                        {id:43,"label":"Woman2","group":5},
                        {id:44,"label":"MotherInnocent","group":0},
                        {id:45,"label":"Gribier","group":0},
                        {id:46,"label":"Jondrette","group":7},
                        {id:47,"label":"Mme.Burgon","group":7},
                        {id:48,"label":"Gavroche","group":8},
                        {id:49,"label":"Gillenormand","group":5},
                        {id:50,"label":"Magnon","group":5},
                        {id:51,"label":"Mlle.Gillenormand","group":5},
                        {id:52,"label":"Mme.Pontmercy","group":5},
                        {id:53,"label":"Mlle.Vaubois","group":5},
                        {id:54,"label":"Lt.Gillenormand","group":5},
                        {id:55,"label":"Marius","group":8},
                        {id:56,"label":"BaronessT","group":5},
                        {id:57,"label":"Mabeuf","group":8},
                        {id:58,"label":"Enjolras","group":8},
                        {id:59,"label":"Combeferre","group":8},
                        {id:60,"label":"Prouvaire","group":8},
                        {id:61,"label":"Feuilly","group":8},
                        {id:62,"label":"Courfeyrac","group":8},
                        {id:63,"label":"Bahorel","group":8},
                        {id:64,"label":"Bossuet","group":8},
                        {id:65,"label":"Joly","group":8},
                        {id:66,"label":"Grantaire","group":8},
                        {id:67,"label":"MotherPlutarch","group":9},
                        {id:68,"label":"Gueulemer","group":4},
                        {id:69,"label":"Babet","group":4},
                        {id:70,"label":"Claquesous","group":4},
                        {id:71,"label":"Montparnasse","group":4},
                        {id:72,"label":"Toussaint","group":5},
                        {id:73,"label":"Child1","group":10},
                        {id:74,"label":"Child2","group":10},
                        {id:75,"label":"Brujon","group":4},
                        {id:76,"label":"Mme.Hucheloup","group":8}
                    ];

            // create some edges
            var edges = [
                {"from":1,"to":0},
                {"from":2,"to":0},
                {"from":3,"to":0},
                {"from":3,"to":2},
                {"from":4,"to":0},
                {"from":5,"to":0},
                {"from":6,"to":0},
                {"from":7,"to":0},
                {"from":8,"to":0},
                {"from":9,"to":0},
                {"from":11,"to":10},
                {"from":11,"to":3},
                {"from":11,"to":2},
                {"from":11,"to":0},
                {"from":12,"to":11},
                {"from":13,"to":11},
                {"from":14,"to":11},
                {"from":15,"to":11},
                {"from":17,"to":16},
                {"from":18,"to":16},
                {"from":18,"to":17},
                {"from":19,"to":16},
                {"from":19,"to":17},
                {"from":19,"to":18},
                {"from":20,"to":16},
                {"from":20,"to":17},
                {"from":20,"to":18},
                {"from":20,"to":19},
                {"from":21,"to":16},
                {"from":21,"to":17},
                {"from":21,"to":18},
                {"from":21,"to":19},
                {"from":21,"to":20},
                {"from":22,"to":16},
                {"from":22,"to":17},
                {"from":22,"to":18},
                {"from":22,"to":19},
                {"from":22,"to":20},
                {"from":22,"to":21},
                {"from":23,"to":16},
                {"from":23,"to":17},
                {"from":23,"to":18},
                {"from":23,"to":19},
                {"from":23,"to":20},
                {"from":23,"to":21},
                {"from":23,"to":22},
                {"from":23,"to":12},
                {"from":23,"to":11},
                {"from":24,"to":23},
                {"from":24,"to":11},
                {"from":25,"to":24},
                {"from":25,"to":23},
                {"from":25,"to":11},
                {"from":26,"to":24},
                {"from":26,"to":11},
                {"from":26,"to":16},
                {"from":26,"to":25},
                {"from":27,"to":11},
                {"from":27,"to":23},
                {"from":27,"to":25},
                {"from":27,"to":24},
                {"from":27,"to":26},
                {"from":28,"to":11},
                {"from":28,"to":27},
                {"from":29,"to":23},
                {"from":29,"to":27},
                {"from":29,"to":11},
                {"from":30,"to":23},
                {"from":31,"to":30},
                {"from":31,"to":11},
                {"from":31,"to":23},
                {"from":31,"to":27},
                {"from":32,"to":11},
                {"from":33,"to":11},
                {"from":33,"to":27},
                {"from":34,"to":11},
                {"from":34,"to":29},
                {"from":35,"to":11},
                {"from":35,"to":34},
                {"from":35,"to":29},
                {"from":36,"to":34},
                {"from":36,"to":35},
                {"from":36,"to":11},
                {"from":36,"to":29},
                {"from":37,"to":34},
                {"from":37,"to":35},
                {"from":37,"to":36},
                {"from":37,"to":11},
                {"from":37,"to":29},
                {"from":38,"to":34},
                {"from":38,"to":35},
                {"from":38,"to":36},
                {"from":38,"to":37},
                {"from":38,"to":11},
                {"from":38,"to":29},
                {"from":39,"to":25},
                {"from":40,"to":25},
                {"from":41,"to":24},
                {"from":41,"to":25},
                {"from":42,"to":41},
                {"from":42,"to":25},
                {"from":42,"to":24},
                {"from":43,"to":11},
                {"from":43,"to":26},
                {"from":43,"to":27},
                {"from":44,"to":28},
                {"from":44,"to":11},
                {"from":45,"to":28},
                {"from":47,"to":46},
                {"from":48,"to":47},
                {"from":48,"to":25},
                {"from":48,"to":27},
                {"from":48,"to":11},
                {"from":49,"to":26},
                {"from":49,"to":11},
                {"from":50,"to":49},
                {"from":50,"to":24},
                {"from":51,"to":49},
                {"from":51,"to":26},
                {"from":51,"to":11},
                {"from":52,"to":51},
                {"from":52,"to":39},
                {"from":53,"to":51},
                {"from":54,"to":51},
                {"from":54,"to":49},
                {"from":54,"to":26},
                {"from":55,"to":51},
                {"from":55,"to":49},
                {"from":55,"to":39},
                {"from":55,"to":54},
                {"from":55,"to":26},
                {"from":55,"to":11},
                {"from":55,"to":16},
                {"from":55,"to":25},
                {"from":55,"to":41},
                {"from":55,"to":48},
                {"from":56,"to":49},
                {"from":56,"to":55},
                {"from":57,"to":55},
                {"from":57,"to":41},
                {"from":57,"to":48},
                {"from":58,"to":55},
                {"from":58,"to":48},
                {"from":58,"to":27},
                {"from":58,"to":57},
                {"from":58,"to":11},
                {"from":59,"to":58},
                {"from":59,"to":55},
                {"from":59,"to":48},
                {"from":59,"to":57},
                {"from":60,"to":48},
                {"from":60,"to":58},
                {"from":60,"to":59},
                {"from":61,"to":48},
                {"from":61,"to":58},
                {"from":61,"to":60},
                {"from":61,"to":59},
                {"from":61,"to":57},
                {"from":61,"to":55},
                {"from":62,"to":55},
                {"from":62,"to":58},
                {"from":62,"to":59},
                {"from":62,"to":48},
                {"from":62,"to":57},
                {"from":62,"to":41},
                {"from":62,"to":61},
                {"from":62,"to":60},
                {"from":63,"to":59},
                {"from":63,"to":48},
                {"from":63,"to":62},
                {"from":63,"to":57},
                {"from":63,"to":58},
                {"from":63,"to":61},
                {"from":63,"to":60},
                {"from":63,"to":55},
                {"from":64,"to":55},
                {"from":64,"to":62},
                {"from":64,"to":48},
                {"from":64,"to":63},
                {"from":64,"to":58},
                {"from":64,"to":61},
                {"from":64,"to":60},
                {"from":64,"to":59},
                {"from":64,"to":57},
                {"from":64,"to":11},
                {"from":65,"to":63},
                {"from":65,"to":64},
                {"from":65,"to":48},
                {"from":65,"to":62},
                {"from":65,"to":58},
                {"from":65,"to":61},
                {"from":65,"to":60},
                {"from":65,"to":59},
                {"from":65,"to":57},
                {"from":65,"to":55},
                {"from":66,"to":64},
                {"from":66,"to":58},
                {"from":66,"to":59},
                {"from":66,"to":62},
                {"from":66,"to":65},
                {"from":66,"to":48},
                {"from":66,"to":63},
                {"from":66,"to":61},
                {"from":66,"to":60},
                {"from":67,"to":57},
                {"from":68,"to":25},
                {"from":68,"to":11},
                {"from":68,"to":24},
                {"from":68,"to":27},
                {"from":68,"to":48},
                {"from":68,"to":41},
                {"from":69,"to":25},
                {"from":69,"to":68},
                {"from":69,"to":11},
                {"from":69,"to":24},
                {"from":69,"to":27},
                {"from":69,"to":48},
                {"from":69,"to":41},
                {"from":70,"to":25},
                {"from":70,"to":69},
                {"from":70,"to":68},
                {"from":70,"to":11},
                {"from":70,"to":24},
                {"from":70,"to":27},
                {"from":70,"to":41},
                {"from":70,"to":58},
                {"from":71,"to":27},
                {"from":71,"to":69},
                {"from":71,"to":68},
                {"from":71,"to":70},
                {"from":71,"to":11},
                {"from":71,"to":48},
                {"from":71,"to":41},
                {"from":71,"to":25},
                {"from":72,"to":26},
                {"from":72,"to":27},
                {"from":72,"to":11},
                {"from":73,"to":48},
                {"from":74,"to":48},
                {"from":74,"to":73},
                {"from":75,"to":69},
                {"from":75,"to":68},
                {"from":75,"to":25},
                {"from":75,"to":48},
                {"from":75,"to":41},
                {"from":75,"to":70},
                {"from":75,"to":71},
                {"from":76,"to":64},
                {"from":76,"to":65},
                {"from":76,"to":66},
                {"from":76,"to":63},
                {"from":76,"to":62},
                {"from":76,"to":48},
                {"from":76,"to":58}
            ];

            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
              nodes:   {
                shape: 'dot',
                size: 16
              },
              physics: {
                stabilization: false
              }
            };
            var network = new vis.Network(container, data, options);

        }
    </script>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw()">
 <p>
  Relations between the characters of "Les miserables".
 </p>
 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/26_staticSmoothCurves.html
+++ b/examples/network/categories/26_staticSmoothCurves.html
@ -1,115 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Static smooth curves</title>

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

  <style type="text/css">
    #mynetwork {
      width: 400px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body>

 <h2>Static smooth curves</h2>
 <div style="width:700px; font-size:14px; text-align: justify;">
    All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
    support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
    solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
    nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
    types. <br /> <br />
    Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
    recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
    that the direction (the from and to) of the curve matters.
    <br /> <br />
 </div>

 <p>
  Smooth curve type:
  <select id="dropdownID">
    <option value="continuous" selected="selected">continuous</option>
    <option value="discrete">discrete</option>
    <option value="diagonalCross">diagonalCross</option>
    <option value="straightCross">straightCross</option>
    <option value="horizontal">horizontal</option>
    <option value="vertical">vertical</option>
    <option value="curvedCW">curvedCW</option>
    <option value="curvedCCW">curvedCCW</option>
  </select>
 </p>
 <p>
  Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
 </p>

 <div id="mynetwork"></div>

 <script type="text/javascript">

  var dropdown = document.getElementById("dropdownID");
  dropdown.onchange = update;
  var roundnessSlider = document.getElementById("roundnessSlider");
  roundnessSlider.onchange = update;

  var roundnessScreen = document.getElementById("roundnessScreen");
  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
  ];

  // create an array with edges
  var edges = [
    {from: 1, to: 2, style:"arrow"}
  ];

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    physics:{
      barnesHut: {
        gravitationalConstant:0,
        springConstant:0,
        centralGravity: 0
      }
    },
    edges: {
      smooth: {
        dynamic: false,
        type: '1'
      }
    }
  };
  var network = new vis.Network(container, data, options);

  function update() {
    var type = dropdown.value;
    var roundness = parseFloat(roundnessSlider.value);
    roundnessScreen.value = roundness;
    var options = {
      edges: {
        smooth: {
          type: type,
          roundness: roundness
        }
      }
    };

    network.setOptions(options);
  }

  update();
 </script>

 </body>
 </html>
--- a/examples/network/categories/27_world_cup_network.html
+++ b/examples/network/categories/27_world_cup_network.html
@ -1,156 +0,0 @@
 <!doctype html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
 <html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>Network | Static smooth curves - World Cup Network</title>

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

  <script src="./data/WorldCup2014.js"></script>

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body>

 <h2>Static smooth curves - World Cup Network</h2>

 <div style="width:700px; font-size:14px;">
  The static smooth curves are based only on the positions of the connected
  nodes.
  There are multiple ways to determine the way this curve is drawn.
  This example shows the effect of the different types on a large network.
  <br/> <br/>
  Also shown in this example is the inheritColor option of the edges as well as
  the roundness factor. <br/>
  <br/><br/>
  To improve performance, the physics have been disabled with:
  <br/><code>{barnesHut: {gravitationalConstant: 0, centralGravity: 0,
  springConstant: 0}}</code><br/> and we have enabled
  the toggle hideEdgesOnDrag.
  <br/><br/>
 </div>

 Smooth curve type:
 <select id="dropdownID">
  <option value="continuous">continuous</option>
  <option value="discrete">discrete</option>
  <option value="diagonalCross">diagonalCross</option>
  <option value="straightCross">straightCross</option>
  <option value="horizontal">horizontal</option>
  <option value="vertical">vertical</option>
  <option value="curvedCW">curvedCW</option>
  <option value="curvedCCW">curvedCCW</option>
 </select><br/>
 inheritColor option:
 <select id="inheritColor">
  <option value="from">from / true</option>
  <option value="to">to</option>
  <option value="false">false</option>
 </select><br/>
 Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05"
                         style="width:200px" id="roundnessSlider"> <input
    id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0
 for the others)
 <br/>
 Hide edges on drag: <input type="checkbox" checked="checked"
                           id="hideEdgesOnDrag" /><br/>
 Hide nodes on drag: <input type="checkbox" id="hideNodesOnDrag" />

 <div id="mynetwork"></div>

 <script type="text/javascript">
  var dropdown = document.getElementById("dropdownID");
  dropdown.onchange = update;

  var roundnessSlider = document.getElementById("roundnessSlider");
  roundnessSlider.onchange = update;

  var roundnessScreen = document.getElementById("roundnessScreen");
  var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
  hideEdgesOnDrag.onchange = update;
  var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
  hideNodesOnDrag.onchange = update;
  var inheritColor = document.getElementById("inheritColor");
  inheritColor.onchange = redrawAll;

  var network;


  function redrawAll() {
    network = null;

    var inheritColorVal = inheritColor.value;

    var container = document.getElementById('mynetwork');
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 10,
          max: 30
        },
        font: {
          size: 12,
          face: 'Tahoma'
        }
      },
      edges: {
        width: 0.15,
        color: {
          inherit: (inheritColorVal == 'false') ? false : inheritColorVal
        },
        smooth: {
          dynamic: false,
          type: 'continuous'
        }
      },
      interaction: {
        tooltipDelay: 200
      },
      rendering: {
        hideEdgesOnDrag: true
      },
      physics: false
    };

    // Note: data is coming from ./data/WorldCup2014.js
    network = new vis.Network(container, data, options);
  }

  function update() {
    var type = dropdown.value;
    var roundness = parseFloat(roundnessSlider.value);
    roundnessScreen.value = roundness;

    var options = {
      edges: {
        smooth: {
          type: type,
          roundness: roundness
        }
      },
      rendering: {
        hideEdgesOnDrag: hideEdgesOnDrag.checked,
        hideNodesOnDrag: hideNodesOnDrag.checked
      }
    };

    network.setOptions(options);
  }

  redrawAll()

 </script>

 </body>
 </html>
--- a/examples/network/categories/29_neighbourhood_highlight.html
+++ b/examples/network/categories/29_neighbourhood_highlight.html
@ -1,222 +0,0 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
 <html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>Network |  Static smooth curves - World Cup Network</title>

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

  <script src="./data/WorldCup2014.js"></script>

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body>

 <h2>Dynamic Data - Neighbourhood Highlight</h2>
 <div style="width:800px; font-size:14px;">
  This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
  In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
  they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..).
  <br /><br />
 </div>

 <div id="mynetwork"></div>

 <script type="text/javascript">
  var network;

  var nodes = new vis.DataSet();
  var edges = new vis.DataSet();

  function redrawAll() {
    nodes.clear();
    edges.clear();

    network = null;

    var container = document.getElementById('mynetwork');
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 10,
          max: 30,
          label: {
            min: 8,
            max: 20,
            drawThreshold: 12,
            maxVisible: 20
          }
        },
        font: {
          size: 12,
          face: 'Tahoma'
        }
      },
      edges: {
        width: 0.15,
        color: {inherit: 'from'},
        smooth: {
          dynamic: false,
          type: 'continuous'
        }
      },
      physics: false,
      interaction: {
        tooltipDelay: 200
      },
      rendering: {
        hideEdgesOnDrag: true
      }
    };

    // Note: data is coming from ./data/WorldCup2014.js
    network = new vis.Network(container, data, options);
    network.on("click",onClick);
  }


  function onClick(selectedItems) {
    var nodeId;
    var degrees = 2;
    // we get all data from the dataset once to avoid updating multiple times.
    var allNodes = nodes.get({returnType:"Object"});
    if (selectedItems.nodes.length == 0) {
      // restore on unselect
      for (nodeId in allNodes) {
        if (allNodes.hasOwnProperty(nodeId)) {
          allNodes[nodeId].color = undefined;
          if (allNodes[nodeId].oldLabel !== undefined) {
            allNodes[nodeId].label = allNodes[nodeId].oldLabel;
            allNodes[nodeId].oldLabel = undefined;
          }
          allNodes[nodeId]['levelOfSeperation'] = undefined;
          allNodes[nodeId]['inConnectionList'] = undefined;
        }
      }
    }
    else {
      // we clear the level of separation in all nodes.
      clearLevelOfSeperation(allNodes);

      // we will now start to collect all the connected nodes we want to highlight.
      var connectedNodes = selectedItems.nodes;

      // we can store them into levels of separation and we could then later use this to define a color per level
      // any data can be added to a node, this is just stored in the nodeObject.
      storeLevelOfSeperation(connectedNodes,0, allNodes);
      for (var i = 1; i < degrees + 1; i++) {
        appendConnectedNodes(connectedNodes);
        storeLevelOfSeperation(connectedNodes, i, allNodes);
      }
      for (nodeId in allNodes) {
        if (allNodes.hasOwnProperty(nodeId)) {
          if (allNodes[nodeId]['inConnectionList'] == true) {
            if (allNodes[nodeId]['levelOfSeperation'] !== undefined) {
              if (allNodes[nodeId]['levelOfSeperation'] >= 2) {
                allNodes[nodeId].color = 'rgba(150,150,150,0.75)';
              }
              else {
                allNodes[nodeId].color = undefined;
              }
            }
            else {
              allNodes[nodeId].color = undefined;
            }
            if (allNodes[nodeId].oldLabel !== undefined) {
              allNodes[nodeId].label = allNodes[nodeId].oldLabel;
              allNodes[nodeId].oldLabel = undefined;
            }
          }
          else {
            allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
            if (allNodes[nodeId].oldLabel === undefined) {
              allNodes[nodeId].oldLabel = allNodes[nodeId].label;
              allNodes[nodeId].label = '';
            }
          }
        }
      }
    }
    var updateArray = [];
    for (nodeId in allNodes) {
      if (allNodes.hasOwnProperty(nodeId)) {
        updateArray.push(allNodes[nodeId]);
      }
    }
    nodes.update(updateArray);
  }


  /**
   * update the allNodes object with the level of separation.
   * Arrays are passed by reference, we do not need to return them because we are working in the same object.
   */
  function storeLevelOfSeperation(connectedNodes, level, allNodes) {
    for (var i = 0; i < connectedNodes.length; i++) {
      var nodeId = connectedNodes[i];
      if (allNodes[nodeId]['levelOfSeperation'] === undefined) {
        allNodes[nodeId]['levelOfSeperation'] = level;
      }
      allNodes[nodeId]['inConnectionList'] = true;
    }
  }

  function clearLevelOfSeperation(allNodes) {
    for (var nodeId in allNodes) {
      if (allNodes.hasOwnProperty(nodeId)) {
        allNodes[nodeId]['levelOfSeperation'] = undefined;
        allNodes[nodeId]['inConnectionList'] = undefined;
      }
    }
  }

  /**
   * Add the connected nodes to the list of nodes we already have
   *
   *
   */
  function appendConnectedNodes(sourceNodes) {
    var tempSourceNodes = [];
    // first we make a copy of the nodes so we do not extend the array we loop over.
    for (var i = 0; i < sourceNodes.length; i++) {
      tempSourceNodes.push(sourceNodes[i])
    }

    for (var i = 0; i < tempSourceNodes.length; i++) {
      var nodeId = tempSourceNodes[i];
      if (sourceNodes.indexOf(nodeId) == -1) {
        sourceNodes.push(nodeId);
      }
      var connectedNodes = network.getConnectedNodes(nodeId);
      addUnique(connectedNodes,sourceNodes);
    }
    tempSourceNodes = null;
  }

  /**
   * Join two arrays without duplicates
   * @param fromArray
   * @param toArray
   */
  function addUnique(fromArray, toArray) {
    for (var i = 0; i < fromArray.length; i++) {
      if (toArray.indexOf(fromArray[i]) == -1) {
        toArray.push(fromArray[i]);
      }
    }
  }

  redrawAll()

 </script>

 </body></html>
--- a/examples/network/categories/01_basic_usage.html
+++ b/examples/network/categories/01_basic_usage.html
@ -3,8 +3,8 @@
 <head>
  <title>Network | Basic usage</title>

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

  <style type="text/css">
    #mynetwork {
@ -50,6 +50,6 @@
  var network = new vis.Network(container, data, options);
 </script>

 <script src="../googleAnalytics.js"></script>
 <script src="../../googleAnalytics.js"></script>
 </body>
 </html>
--- a/examples/network/categories/edgeStyles/smoothWorldCup.html
+++ b/examples/network/categories/edgeStyles/smoothWorldCup.html
@ -0,0 +1,97 @@
 <!doctype html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
 <html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>Network | Static smooth curves - World Cup Network</title>

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

  <script src="../../data/WorldCup2014.js"></script>

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }
    #optionsContainer {
      height:280px;
    }
  </style>
  <script src="../../../googleAnalytics.js"></script>
 </head>

 <body>

 <h2>Static smooth curves - World Cup Network</h2>

 <div style="width:700px; font-size:14px;">
  The static smooth curves are based only on the positions of the connected
  nodes.
  There are multiple ways to determine the way this curve is drawn.
  This example shows the effect of the different types on a large network.
  <br/> <br/>
  Also shown in this example is the inheritColor option of the edges as well as
  the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here.
 </div>

 <div id="optionsContainer"></div>

 <div id="mynetwork"></div>

 <script type="text/javascript">
  var network;

  function redrawAll() {
    var container = document.getElementById('mynetwork');
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 10,
          max: 30
        },
        font: {
          size: 12,
          face: 'Tahoma'
        }
      },
      edges: {
        color:{inherit:true},
        width: 0.15,
        smooth: {
          type: 'continuous'
        }
      },
      interaction: {
        hideEdgesOnDrag: true,
        tooltipDelay: 200
      },
      configure: {
        filter: function (option, path) {
          if (option === 'inherit') {return true;}
          if (option === 'type' && path.indexOf("smooth") !== -1) {return true;}
          if (option === 'roundness') {return true;}
          if (option === 'hideEdgesOnDrag') {return true;}
          if (option === 'hideNodesOnDrag') {return true;}
          return false;
        },
        container: document.getElementById('optionsContainer'),
        showButton: false
      },
      physics: false
    };

    var data = {nodes:nodes, edges:edges};
    // Note: data is coming from ./data/WorldCup2014.js
    network = new vis.Network(container, data, options);
  }

  redrawAll()

 </script>

 </body>
 </html>
--- a/examples/network/categories/exampleApplications/les_miserables.html
+++ b/examples/network/categories/exampleApplications/les_miserables.html
@ -0,0 +1,396 @@
 <!doctype html>
 <html>
 <head>
    <title>Network | Les miserables</title>

    <style type="text/css">
        #mynetwork {
            width: 900px;
            height: 900px;
            border: 1px solid lightgray;
        }
    </style>

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

    <script type="text/javascript">
        function draw() {
            // create some nodes
            var nodes = [
                {id: 0, "label": "Myriel", "group": 1},
                {id: 1, "label": "Napoleon", "group": 1},
                {id: 2, "label": "Mlle.Baptistine", "group": 1},
                {id: 3, "label": "Mme.Magloire", "group": 1},
                {id: 4, "label": "CountessdeLo", "group": 1},
                {id: 5, "label": "Geborand", "group": 1},
                {id: 6, "label": "Champtercier", "group": 1},
                {id: 7, "label": "Cravatte", "group": 1},
                {id: 8, "label": "Count", "group": 1},
                {id: 9, "label": "OldMan", "group": 1},
                {id: 10, "label": "Labarre", "group": 2},
                {id: 11, "label": "Valjean", "group": 2},
                {id: 12, "label": "Marguerite", "group": 3},
                {id: 13, "label": "Mme.deR", "group": 2},
                {id: 14, "label": "Isabeau", "group": 2},
                {id: 15, "label": "Gervais", "group": 2},
                {id: 16, "label": "Tholomyes", "group": 3},
                {id: 17, "label": "Listolier", "group": 3},
                {id: 18, "label": "Fameuil", "group": 3},
                {id: 19, "label": "Blacheville", "group": 3},
                {id: 20, "label": "Favourite", "group": 3},
                {id: 21, "label": "Dahlia", "group": 3},
                {id: 22, "label": "Zephine", "group": 3},
                {id: 23, "label": "Fantine", "group": 3},
                {id: 24, "label": "Mme.Thenardier", "group": 4},
                {id: 25, "label": "Thenardier", "group": 4},
                {id: 26, "label": "Cosette", "group": 5},
                {id: 27, "label": "Javert", "group": 4},
                {id: 28, "label": "Fauchelevent", "group": 0},
                {id: 29, "label": "Bamatabois", "group": 2},
                {id: 30, "label": "Perpetue", "group": 3},
                {id: 31, "label": "Simplice", "group": 2},
                {id: 32, "label": "Scaufflaire", "group": 2},
                {id: 33, "label": "Woman1", "group": 2},
                {id: 34, "label": "Judge", "group": 2},
                {id: 35, "label": "Champmathieu", "group": 2},
                {id: 36, "label": "Brevet", "group": 2},
                {id: 37, "label": "Chenildieu", "group": 2},
                {id: 38, "label": "Cochepaille", "group": 2},
                {id: 39, "label": "Pontmercy", "group": 4},
                {id: 40, "label": "Boulatruelle", "group": 6},
                {id: 41, "label": "Eponine", "group": 4},
                {id: 42, "label": "Anzelma", "group": 4},
                {id: 43, "label": "Woman2", "group": 5},
                {id: 44, "label": "MotherInnocent", "group": 0},
                {id: 45, "label": "Gribier", "group": 0},
                {id: 46, "label": "Jondrette", "group": 7},
                {id: 47, "label": "Mme.Burgon", "group": 7},
                {id: 48, "label": "Gavroche", "group": 8},
                {id: 49, "label": "Gillenormand", "group": 5},
                {id: 50, "label": "Magnon", "group": 5},
                {id: 51, "label": "Mlle.Gillenormand", "group": 5},
                {id: 52, "label": "Mme.Pontmercy", "group": 5},
                {id: 53, "label": "Mlle.Vaubois", "group": 5},
                {id: 54, "label": "Lt.Gillenormand", "group": 5},
                {id: 55, "label": "Marius", "group": 8},
                {id: 56, "label": "BaronessT", "group": 5},
                {id: 57, "label": "Mabeuf", "group": 8},
                {id: 58, "label": "Enjolras", "group": 8},
                {id: 59, "label": "Combeferre", "group": 8},
                {id: 60, "label": "Prouvaire", "group": 8},
                {id: 61, "label": "Feuilly", "group": 8},
                {id: 62, "label": "Courfeyrac", "group": 8},
                {id: 63, "label": "Bahorel", "group": 8},
                {id: 64, "label": "Bossuet", "group": 8},
                {id: 65, "label": "Joly", "group": 8},
                {id: 66, "label": "Grantaire", "group": 8},
                {id: 67, "label": "MotherPlutarch", "group": 9},
                {id: 68, "label": "Gueulemer", "group": 4},
                {id: 69, "label": "Babet", "group": 4},
                {id: 70, "label": "Claquesous", "group": 4},
                {id: 71, "label": "Montparnasse", "group": 4},
                {id: 72, "label": "Toussaint", "group": 5},
                {id: 73, "label": "Child1", "group": 10},
                {id: 74, "label": "Child2", "group": 10},
                {id: 75, "label": "Brujon", "group": 4},
                {id: 76, "label": "Mme.Hucheloup", "group": 8}
            ];

            // create some edges
            var edges = [
                {"from": 1, "to": 0},
                {"from": 2, "to": 0},
                {"from": 3, "to": 0},
                {"from": 3, "to": 2},
                {"from": 4, "to": 0},
                {"from": 5, "to": 0},
                {"from": 6, "to": 0},
                {"from": 7, "to": 0},
                {"from": 8, "to": 0},
                {"from": 9, "to": 0},
                {"from": 11, "to": 10},
                {"from": 11, "to": 3},
                {"from": 11, "to": 2},
                {"from": 11, "to": 0},
                {"from": 12, "to": 11},
                {"from": 13, "to": 11},
                {"from": 14, "to": 11},
                {"from": 15, "to": 11},
                {"from": 17, "to": 16},
                {"from": 18, "to": 16},
                {"from": 18, "to": 17},
                {"from": 19, "to": 16},
                {"from": 19, "to": 17},
                {"from": 19, "to": 18},
                {"from": 20, "to": 16},
                {"from": 20, "to": 17},
                {"from": 20, "to": 18},
                {"from": 20, "to": 19},
                {"from": 21, "to": 16},
                {"from": 21, "to": 17},
                {"from": 21, "to": 18},
                {"from": 21, "to": 19},
                {"from": 21, "to": 20},
                {"from": 22, "to": 16},
                {"from": 22, "to": 17},
                {"from": 22, "to": 18},
                {"from": 22, "to": 19},
                {"from": 22, "to": 20},
                {"from": 22, "to": 21},
                {"from": 23, "to": 16},
                {"from": 23, "to": 17},
                {"from": 23, "to": 18},
                {"from": 23, "to": 19},
                {"from": 23, "to": 20},
                {"from": 23, "to": 21},
                {"from": 23, "to": 22},
                {"from": 23, "to": 12},
                {"from": 23, "to": 11},
                {"from": 24, "to": 23},
                {"from": 24, "to": 11},
                {"from": 25, "to": 24},
                {"from": 25, "to": 23},
                {"from": 25, "to": 11},
                {"from": 26, "to": 24},
                {"from": 26, "to": 11},
                {"from": 26, "to": 16},
                {"from": 26, "to": 25},
                {"from": 27, "to": 11},
                {"from": 27, "to": 23},
                {"from": 27, "to": 25},
                {"from": 27, "to": 24},
                {"from": 27, "to": 26},
                {"from": 28, "to": 11},
                {"from": 28, "to": 27},
                {"from": 29, "to": 23},
                {"from": 29, "to": 27},
                {"from": 29, "to": 11},
                {"from": 30, "to": 23},
                {"from": 31, "to": 30},
                {"from": 31, "to": 11},
                {"from": 31, "to": 23},
                {"from": 31, "to": 27},
                {"from": 32, "to": 11},
                {"from": 33, "to": 11},
                {"from": 33, "to": 27},
                {"from": 34, "to": 11},
                {"from": 34, "to": 29},
                {"from": 35, "to": 11},
                {"from": 35, "to": 34},
                {"from": 35, "to": 29},
                {"from": 36, "to": 34},
                {"from": 36, "to": 35},
                {"from": 36, "to": 11},
                {"from": 36, "to": 29},
                {"from": 37, "to": 34},
                {"from": 37, "to": 35},
                {"from": 37, "to": 36},
                {"from": 37, "to": 11},
                {"from": 37, "to": 29},
                {"from": 38, "to": 34},
                {"from": 38, "to": 35},
                {"from": 38, "to": 36},
                {"from": 38, "to": 37},
                {"from": 38, "to": 11},
                {"from": 38, "to": 29},
                {"from": 39, "to": 25},
                {"from": 40, "to": 25},
                {"from": 41, "to": 24},
                {"from": 41, "to": 25},
                {"from": 42, "to": 41},
                {"from": 42, "to": 25},
                {"from": 42, "to": 24},
                {"from": 43, "to": 11},
                {"from": 43, "to": 26},
                {"from": 43, "to": 27},
                {"from": 44, "to": 28},
                {"from": 44, "to": 11},
                {"from": 45, "to": 28},
                {"from": 47, "to": 46},
                {"from": 48, "to": 47},
                {"from": 48, "to": 25},
                {"from": 48, "to": 27},
                {"from": 48, "to": 11},
                {"from": 49, "to": 26},
                {"from": 49, "to": 11},
                {"from": 50, "to": 49},
                {"from": 50, "to": 24},
                {"from": 51, "to": 49},
                {"from": 51, "to": 26},
                {"from": 51, "to": 11},
                {"from": 52, "to": 51},
                {"from": 52, "to": 39},
                {"from": 53, "to": 51},
                {"from": 54, "to": 51},
                {"from": 54, "to": 49},
                {"from": 54, "to": 26},
                {"from": 55, "to": 51},
                {"from": 55, "to": 49},
                {"from": 55, "to": 39},
                {"from": 55, "to": 54},
                {"from": 55, "to": 26},
                {"from": 55, "to": 11},
                {"from": 55, "to": 16},
                {"from": 55, "to": 25},
                {"from": 55, "to": 41},
                {"from": 55, "to": 48},
                {"from": 56, "to": 49},
                {"from": 56, "to": 55},
                {"from": 57, "to": 55},
                {"from": 57, "to": 41},
                {"from": 57, "to": 48},
                {"from": 58, "to": 55},
                {"from": 58, "to": 48},
                {"from": 58, "to": 27},
                {"from": 58, "to": 57},
                {"from": 58, "to": 11},
                {"from": 59, "to": 58},
                {"from": 59, "to": 55},
                {"from": 59, "to": 48},
                {"from": 59, "to": 57},
                {"from": 60, "to": 48},
                {"from": 60, "to": 58},
                {"from": 60, "to": 59},
                {"from": 61, "to": 48},
                {"from": 61, "to": 58},
                {"from": 61, "to": 60},
                {"from": 61, "to": 59},
                {"from": 61, "to": 57},
                {"from": 61, "to": 55},
                {"from": 62, "to": 55},
                {"from": 62, "to": 58},
                {"from": 62, "to": 59},
                {"from": 62, "to": 48},
                {"from": 62, "to": 57},
                {"from": 62, "to": 41},
                {"from": 62, "to": 61},
                {"from": 62, "to": 60},
                {"from": 63, "to": 59},
                {"from": 63, "to": 48},
                {"from": 63, "to": 62},
                {"from": 63, "to": 57},
                {"from": 63, "to": 58},
                {"from": 63, "to": 61},
                {"from": 63, "to": 60},
                {"from": 63, "to": 55},
                {"from": 64, "to": 55},
                {"from": 64, "to": 62},
                {"from": 64, "to": 48},
                {"from": 64, "to": 63},
                {"from": 64, "to": 58},
                {"from": 64, "to": 61},
                {"from": 64, "to": 60},
                {"from": 64, "to": 59},
                {"from": 64, "to": 57},
                {"from": 64, "to": 11},
                {"from": 65, "to": 63},
                {"from": 65, "to": 64},
                {"from": 65, "to": 48},
                {"from": 65, "to": 62},
                {"from": 65, "to": 58},
                {"from": 65, "to": 61},
                {"from": 65, "to": 60},
                {"from": 65, "to": 59},
                {"from": 65, "to": 57},
                {"from": 65, "to": 55},
                {"from": 66, "to": 64},
                {"from": 66, "to": 58},
                {"from": 66, "to": 59},
                {"from": 66, "to": 62},
                {"from": 66, "to": 65},
                {"from": 66, "to": 48},
                {"from": 66, "to": 63},
                {"from": 66, "to": 61},
                {"from": 66, "to": 60},
                {"from": 67, "to": 57},
                {"from": 68, "to": 25},
                {"from": 68, "to": 11},
                {"from": 68, "to": 24},
                {"from": 68, "to": 27},
                {"from": 68, "to": 48},
                {"from": 68, "to": 41},
                {"from": 69, "to": 25},
                {"from": 69, "to": 68},
                {"from": 69, "to": 11},
                {"from": 69, "to": 24},
                {"from": 69, "to": 27},
                {"from": 69, "to": 48},
                {"from": 69, "to": 41},
                {"from": 70, "to": 25},
                {"from": 70, "to": 69},
                {"from": 70, "to": 68},
                {"from": 70, "to": 11},
                {"from": 70, "to": 24},
                {"from": 70, "to": 27},
                {"from": 70, "to": 41},
                {"from": 70, "to": 58},
                {"from": 71, "to": 27},
                {"from": 71, "to": 69},
                {"from": 71, "to": 68},
                {"from": 71, "to": 70},
                {"from": 71, "to": 11},
                {"from": 71, "to": 48},
                {"from": 71, "to": 41},
                {"from": 71, "to": 25},
                {"from": 72, "to": 26},
                {"from": 72, "to": 27},
                {"from": 72, "to": 11},
                {"from": 73, "to": 48},
                {"from": 74, "to": 48},
                {"from": 74, "to": 73},
                {"from": 75, "to": 69},
                {"from": 75, "to": 68},
                {"from": 75, "to": 25},
                {"from": 75, "to": 48},
                {"from": 75, "to": 41},
                {"from": 75, "to": 70},
                {"from": 75, "to": 71},
                {"from": 76, "to": 64},
                {"from": 76, "to": 65},
                {"from": 76, "to": 66},
                {"from": 76, "to": 63},
                {"from": 76, "to": 62},
                {"from": 76, "to": 48},
                {"from": 76, "to": 58}
            ];

            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                nodes: {
                    shape: 'dot',
                    size: 16
                },
                physics: {
                    forceAtlas2Based: {
                        gravitationalConstant: -26,
                        centralGravity: 0.005,
                        springLength: 230,
                        springConstant: 0.18
                    },
                    maxVelocity: 146,
                    solver: 'forceAtlas2Based',
                    timestep: 0.35,
                    stabilization: {iterations:300}
                }
            };
            var network = new vis.Network(container, data, options);

        }
    </script>
    <script src="../../../googleAnalytics.js"></script>
 </head>

 <body onload="draw()">
 <p>
    Relations between the characters of "Les miserables".
 </p>

 <div id="mynetwork"></div>
 </body>
 </html>
--- a/examples/network/categories/exampleApplications/loadingBar.html
+++ b/examples/network/categories/exampleApplications/loadingBar.html
@ -0,0 +1,503 @@
 <!doctype html>
 <html>
 <head>
    <title>Network | Les miserables</title>

    <style type="text/css">
        #mynetwork {
            width: 900px;
            height: 900px;
            border: 1px solid lightgray;
        }
        #loadingBar {
            position:absolute;
            top:0px;
            left:0px;
            width: 902px;
            height: 902px;
            background-color:rgba(200,200,200,0.8);
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
            opacity:1;
        }
        #wrapper {
            position:relative;
            width:900px;
            height:900px;
        }

        #text {
            position:absolute;
            top:8px;
            left:530px;
            width:30px;
            height:50px;
            margin:auto auto auto auto;
            font-size:22px;
            color: #000000;
        }


        div.outerBorder {
            position:relative;
            top:400px;
            width:600px;
            height:44px;
            margin:auto auto auto auto;
            background: rgb(252,252,252); /* Old browsers */
            background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
            border-radius:22px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        }

        #border {
            position:absolute;
            top:10px;
            left:10px;
            width:500px;
            height:23px;
            margin:auto auto auto auto;
            box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
            border-radius:10px;
        }

        #bar {
            position:absolute;
            top:0px;
            left:0px;
            width:20px;
            height:20px;
            margin:auto auto auto auto;
            border-radius:11px;
            border:2px solid rgba(30,30,30,0.05);
            background: rgb(0, 173, 246); /* Old browsers */
            box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
        }
    </style>

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

    <script type="text/javascript">
        function draw() {
            // create some nodes
            var nodes = [
                {id: 0, "label": "Myriel", "group": 1},
                {id: 1, "label": "Napoleon", "group": 1},
                {id: 2, "label": "Mlle.Baptistine", "group": 1},
                {id: 3, "label": "Mme.Magloire", "group": 1},
                {id: 4, "label": "CountessdeLo", "group": 1},
                {id: 5, "label": "Geborand", "group": 1},
                {id: 6, "label": "Champtercier", "group": 1},
                {id: 7, "label": "Cravatte", "group": 1},
                {id: 8, "label": "Count", "group": 1},
                {id: 9, "label": "OldMan", "group": 1},
                {id: 10, "label": "Labarre", "group": 2},
                {id: 11, "label": "Valjean", "group": 2},
                {id: 12, "label": "Marguerite", "group": 3},
                {id: 13, "label": "Mme.deR", "group": 2},
                {id: 14, "label": "Isabeau", "group": 2},
                {id: 15, "label": "Gervais", "group": 2},
                {id: 16, "label": "Tholomyes", "group": 3},
                {id: 17, "label": "Listolier", "group": 3},
                {id: 18, "label": "Fameuil", "group": 3},
                {id: 19, "label": "Blacheville", "group": 3},
                {id: 20, "label": "Favourite", "group": 3},
                {id: 21, "label": "Dahlia", "group": 3},
                {id: 22, "label": "Zephine", "group": 3},
                {id: 23, "label": "Fantine", "group": 3},
                {id: 24, "label": "Mme.Thenardier", "group": 4},
                {id: 25, "label": "Thenardier", "group": 4},
                {id: 26, "label": "Cosette", "group": 5},
                {id: 27, "label": "Javert", "group": 4},
                {id: 28, "label": "Fauchelevent", "group": 0},
                {id: 29, "label": "Bamatabois", "group": 2},
                {id: 30, "label": "Perpetue", "group": 3},
                {id: 31, "label": "Simplice", "group": 2},
                {id: 32, "label": "Scaufflaire", "group": 2},
                {id: 33, "label": "Woman1", "group": 2},
                {id: 34, "label": "Judge", "group": 2},
                {id: 35, "label": "Champmathieu", "group": 2},
                {id: 36, "label": "Brevet", "group": 2},
                {id: 37, "label": "Chenildieu", "group": 2},
                {id: 38, "label": "Cochepaille", "group": 2},
                {id: 39, "label": "Pontmercy", "group": 4},
                {id: 40, "label": "Boulatruelle", "group": 6},
                {id: 41, "label": "Eponine", "group": 4},
                {id: 42, "label": "Anzelma", "group": 4},
                {id: 43, "label": "Woman2", "group": 5},
                {id: 44, "label": "MotherInnocent", "group": 0},
                {id: 45, "label": "Gribier", "group": 0},
                {id: 46, "label": "Jondrette", "group": 7},
                {id: 47, "label": "Mme.Burgon", "group": 7},
                {id: 48, "label": "Gavroche", "group": 8},
                {id: 49, "label": "Gillenormand", "group": 5},
                {id: 50, "label": "Magnon", "group": 5},
                {id: 51, "label": "Mlle.Gillenormand", "group": 5},
                {id: 52, "label": "Mme.Pontmercy", "group": 5},
                {id: 53, "label": "Mlle.Vaubois", "group": 5},
                {id: 54, "label": "Lt.Gillenormand", "group": 5},
                {id: 55, "label": "Marius", "group": 8},
                {id: 56, "label": "BaronessT", "group": 5},
                {id: 57, "label": "Mabeuf", "group": 8},
                {id: 58, "label": "Enjolras", "group": 8},
                {id: 59, "label": "Combeferre", "group": 8},
                {id: 60, "label": "Prouvaire", "group": 8},
                {id: 61, "label": "Feuilly", "group": 8},
                {id: 62, "label": "Courfeyrac", "group": 8},
                {id: 63, "label": "Bahorel", "group": 8},
                {id: 64, "label": "Bossuet", "group": 8},
                {id: 65, "label": "Joly", "group": 8},
                {id: 66, "label": "Grantaire", "group": 8},
                {id: 67, "label": "MotherPlutarch", "group": 9},
                {id: 68, "label": "Gueulemer", "group": 4},
                {id: 69, "label": "Babet", "group": 4},
                {id: 70, "label": "Claquesous", "group": 4},
                {id: 71, "label": "Montparnasse", "group": 4},
                {id: 72, "label": "Toussaint", "group": 5},
                {id: 73, "label": "Child1", "group": 10},
                {id: 74, "label": "Child2", "group": 10},
                {id: 75, "label": "Brujon", "group": 4},
                {id: 76, "label": "Mme.Hucheloup", "group": 8}
            ];

            // create some edges
            var edges = [
                {"from": 1, "to": 0},
                {"from": 2, "to": 0},
                {"from": 3, "to": 0},
                {"from": 3, "to": 2},
                {"from": 4, "to": 0},
                {"from": 5, "to": 0},
                {"from": 6, "to": 0},
                {"from": 7, "to": 0},
                {"from": 8, "to": 0},
                {"from": 9, "to": 0},
                {"from": 11, "to": 10},
                {"from": 11, "to": 3},
                {"from": 11, "to": 2},
                {"from": 11, "to": 0},
                {"from": 12, "to": 11},
                {"from": 13, "to": 11},
                {"from": 14, "to": 11},
                {"from": 15, "to": 11},
                {"from": 17, "to": 16},
                {"from": 18, "to": 16},
                {"from": 18, "to": 17},
                {"from": 19, "to": 16},
                {"from": 19, "to": 17},
                {"from": 19, "to": 18},
                {"from": 20, "to": 16},
                {"from": 20, "to": 17},
                {"from": 20, "to": 18},
                {"from": 20, "to": 19},
                {"from": 21, "to": 16},
                {"from": 21, "to": 17},
                {"from": 21, "to": 18},
                {"from": 21, "to": 19},
                {"from": 21, "to": 20},
                {"from": 22, "to": 16},
                {"from": 22, "to": 17},
                {"from": 22, "to": 18},
                {"from": 22, "to": 19},
                {"from": 22, "to": 20},
                {"from": 22, "to": 21},
                {"from": 23, "to": 16},
                {"from": 23, "to": 17},
                {"from": 23, "to": 18},
                {"from": 23, "to": 19},
                {"from": 23, "to": 20},
                {"from": 23, "to": 21},
                {"from": 23, "to": 22},
                {"from": 23, "to": 12},
                {"from": 23, "to": 11},
                {"from": 24, "to": 23},
                {"from": 24, "to": 11},
                {"from": 25, "to": 24},
                {"from": 25, "to": 23},
                {"from": 25, "to": 11},
                {"from": 26, "to": 24},
                {"from": 26, "to": 11},
                {"from": 26, "to": 16},
                {"from": 26, "to": 25},
                {"from": 27, "to": 11},
                {"from": 27, "to": 23},
                {"from": 27, "to": 25},
                {"from": 27, "to": 24},
                {"from": 27, "to": 26},
                {"from": 28, "to": 11},
                {"from": 28, "to": 27},
                {"from": 29, "to": 23},
                {"from": 29, "to": 27},
                {"from": 29, "to": 11},
                {"from": 30, "to": 23},
                {"from": 31, "to": 30},
                {"from": 31, "to": 11},
                {"from": 31, "to": 23},
                {"from": 31, "to": 27},
                {"from": 32, "to": 11},
                {"from": 33, "to": 11},
                {"from": 33, "to": 27},
                {"from": 34, "to": 11},
                {"from": 34, "to": 29},
                {"from": 35, "to": 11},
                {"from": 35, "to": 34},
                {"from": 35, "to": 29},
                {"from": 36, "to": 34},
                {"from": 36, "to": 35},
                {"from": 36, "to": 11},
                {"from": 36, "to": 29},
                {"from": 37, "to": 34},
                {"from": 37, "to": 35},
                {"from": 37, "to": 36},
                {"from": 37, "to": 11},
                {"from": 37, "to": 29},
                {"from": 38, "to": 34},
                {"from": 38, "to": 35},
                {"from": 38, "to": 36},
                {"from": 38, "to": 37},
                {"from": 38, "to": 11},
                {"from": 38, "to": 29},
                {"from": 39, "to": 25},
                {"from": 40, "to": 25},
                {"from": 41, "to": 24},
                {"from": 41, "to": 25},
                {"from": 42, "to": 41},
                {"from": 42, "to": 25},
                {"from": 42, "to": 24},
                {"from": 43, "to": 11},
                {"from": 43, "to": 26},
                {"from": 43, "to": 27},
                {"from": 44, "to": 28},
                {"from": 44, "to": 11},
                {"from": 45, "to": 28},
                {"from": 47, "to": 46},
                {"from": 48, "to": 47},
                {"from": 48, "to": 25},
                {"from": 48, "to": 27},
                {"from": 48, "to": 11},
                {"from": 49, "to": 26},
                {"from": 49, "to": 11},
                {"from": 50, "to": 49},
                {"from": 50, "to": 24},
                {"from": 51, "to": 49},
                {"from": 51, "to": 26},
                {"from": 51, "to": 11},
                {"from": 52, "to": 51},
                {"from": 52, "to": 39},
                {"from": 53, "to": 51},
                {"from": 54, "to": 51},
                {"from": 54, "to": 49},
                {"from": 54, "to": 26},
                {"from": 55, "to": 51},
                {"from": 55, "to": 49},
                {"from": 55, "to": 39},
                {"from": 55, "to": 54},
                {"from": 55, "to": 26},
                {"from": 55, "to": 11},
                {"from": 55, "to": 16},
                {"from": 55, "to": 25},
                {"from": 55, "to": 41},
                {"from": 55, "to": 48},
                {"from": 56, "to": 49},
                {"from": 56, "to": 55},
                {"from": 57, "to": 55},
                {"from": 57, "to": 41},
                {"from": 57, "to": 48},
                {"from": 58, "to": 55},
                {"from": 58, "to": 48},
                {"from": 58, "to": 27},
                {"from": 58, "to": 57},
                {"from": 58, "to": 11},
                {"from": 59, "to": 58},
                {"from": 59, "to": 55},
                {"from": 59, "to": 48},
                {"from": 59, "to": 57},
                {"from": 60, "to": 48},
                {"from": 60, "to": 58},
                {"from": 60, "to": 59},
                {"from": 61, "to": 48},
                {"from": 61, "to": 58},
                {"from": 61, "to": 60},
                {"from": 61, "to": 59},
                {"from": 61, "to": 57},
                {"from": 61, "to": 55},
                {"from": 62, "to": 55},
                {"from": 62, "to": 58},
                {"from": 62, "to": 59},
                {"from": 62, "to": 48},
                {"from": 62, "to": 57},
                {"from": 62, "to": 41},
                {"from": 62, "to": 61},
                {"from": 62, "to": 60},
                {"from": 63, "to": 59},
                {"from": 63, "to": 48},
                {"from": 63, "to": 62},
                {"from": 63, "to": 57},
                {"from": 63, "to": 58},
                {"from": 63, "to": 61},
                {"from": 63, "to": 60},
                {"from": 63, "to": 55},
                {"from": 64, "to": 55},
                {"from": 64, "to": 62},
                {"from": 64, "to": 48},
                {"from": 64, "to": 63},
                {"from": 64, "to": 58},
                {"from": 64, "to": 61},
                {"from": 64, "to": 60},
                {"from": 64, "to": 59},
                {"from": 64, "to": 57},
                {"from": 64, "to": 11},
                {"from": 65, "to": 63},
                {"from": 65, "to": 64},
                {"from": 65, "to": 48},
                {"from": 65, "to": 62},
                {"from": 65, "to": 58},
                {"from": 65, "to": 61},
                {"from": 65, "to": 60},
                {"from": 65, "to": 59},
                {"from": 65, "to": 57},
                {"from": 65, "to": 55},
                {"from": 66, "to": 64},
                {"from": 66, "to": 58},
                {"from": 66, "to": 59},
                {"from": 66, "to": 62},
                {"from": 66, "to": 65},
                {"from": 66, "to": 48},
                {"from": 66, "to": 63},
                {"from": 66, "to": 61},
                {"from": 66, "to": 60},
                {"from": 67, "to": 57},
                {"from": 68, "to": 25},
                {"from": 68, "to": 11},
                {"from": 68, "to": 24},
                {"from": 68, "to": 27},
                {"from": 68, "to": 48},
                {"from": 68, "to": 41},
                {"from": 69, "to": 25},
                {"from": 69, "to": 68},
                {"from": 69, "to": 11},
                {"from": 69, "to": 24},
                {"from": 69, "to": 27},
                {"from": 69, "to": 48},
                {"from": 69, "to": 41},
                {"from": 70, "to": 25},
                {"from": 70, "to": 69},
                {"from": 70, "to": 68},
                {"from": 70, "to": 11},
                {"from": 70, "to": 24},
                {"from": 70, "to": 27},
                {"from": 70, "to": 41},
                {"from": 70, "to": 58},
                {"from": 71, "to": 27},
                {"from": 71, "to": 69},
                {"from": 71, "to": 68},
                {"from": 71, "to": 70},
                {"from": 71, "to": 11},
                {"from": 71, "to": 48},
                {"from": 71, "to": 41},
                {"from": 71, "to": 25},
                {"from": 72, "to": 26},
                {"from": 72, "to": 27},
                {"from": 72, "to": 11},
                {"from": 73, "to": 48},
                {"from": 74, "to": 48},
                {"from": 74, "to": 73},
                {"from": 75, "to": 69},
                {"from": 75, "to": 68},
                {"from": 75, "to": 25},
                {"from": 75, "to": 48},
                {"from": 75, "to": 41},
                {"from": 75, "to": 70},
                {"from": 75, "to": 71},
                {"from": 76, "to": 64},
                {"from": 76, "to": 65},
                {"from": 76, "to": 66},
                {"from": 76, "to": 63},
                {"from": 76, "to": 62},
                {"from": 76, "to": 48},
                {"from": 76, "to": 58}
            ];

            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                nodes: {
                    shape: 'dot',
                    size: 16
                },
                layout:{
                    randomSeed:34
                },
                physics: {
                    forceAtlas2Based: {
                        gravitationalConstant: -26,
                        centralGravity: 0.005,
                        springLength: 230,
                        springConstant: 0.18
                    },
                    maxVelocity: 146,
                    solver: 'forceAtlas2Based',
                    timestep: 0.35,
                    stabilization: {
                        enabled:true,
                        iterations:2000,
                        updateInterval:25
                    }
                }
            };
            var network = new vis.Network(container, data, options);

            network.on("stabilizationProgress", function(params) {
                var maxWidth = 496;
                var minWidth = 20;
                var widthFactor = params.iterations/params.total;
                var width = Math.max(minWidth,maxWidth * widthFactor);

                document.getElementById('bar').style.width = width + 'px';
                document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
            });
            network.once("stabilizationIterationsDone", function() {
                document.getElementById('text').innerHTML = '100%';
                document.getElementById('bar').style.width = '496px';
                document.getElementById('loadingBar').style.opacity = 0;
                // really clean the dom element
                setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
            });

        }
    </script>
    <script src="../../../googleAnalytics.js"></script>
 </head>

 <body onload="draw()">
 <p>
    With the new stabilization events you can implement your own custom loading bar for all those long loading times!
 </p>

 <div id="wrapper">
    <div id="mynetwork"></div>
    <div id="loadingBar">
        <div class="outerBorder">
            <div id="text">0%</div>
            <div id="border">
                <div id="bar"></div>
            </div>
        </div>
    </div>
 </div>
 </body>
 </html>
--- a/examples/network/categories/exampleApplications/neighbourhood_highlight.html
+++ b/examples/network/categories/exampleApplications/neighbourhood_highlight.html
@ -0,0 +1,162 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
 <html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>Network |  Static smooth curves - World Cup Network</title>

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

  <script src="../../data/WorldCup2014.js"></script>

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }
  </style>
  <script src="../../../googleAnalytics.js"></script>
 </head>

 <body>

 <h2>Dynamic Data - Neighbourhood Highlight</h2>
 <div style="width:800px; font-size:14px;">
  This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
  In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
  they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..).
  <br /><br />
 </div>

 <div id="mynetwork"></div>

 <script type="text/javascript">
  var network;
  var allNodes;
  var highlightActive = false;

  var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
  var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js

  function redrawAll() {
    var container = document.getElementById('mynetwork');
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 10,
          max: 30,
          label: {
            min: 8,
            max: 30,
            drawThreshold: 12,
            maxVisible: 20
          }
        },
        font: {
          size: 12,
          face: 'Tahoma'
        }
      },
      edges: {
        width: 0.15,
        color: {inherit: 'from'},
        smooth: {
          type: 'continuous'
        }
      },
      physics: false,
      interaction: {
        tooltipDelay: 200,
        hideEdgesOnDrag: true
      }
    };
    var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./data/WorldCup2014.js


    network = new vis.Network(container, data, options);

    // get a JSON object
    allNodes = nodesDataset.get({returnType:"Object"});

    network.on("click",neighbourhoodHighlight);
  }

  function neighbourhoodHighlight(params) {
    // if something is selected:
    if (params.nodes.length > 0) {
      highlightActive = true;
      var i,j;
      var selectedNode = params.nodes[0];
      var degrees = 2;

      // mark all nodes as hard to read.
      for (var nodeId in allNodes) {
        allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
        if (allNodes[nodeId].hiddenLabel === undefined) {
          allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
          allNodes[nodeId].label = undefined;
        }
      }
      var connectedNodes = network.getConnectedNodes(selectedNode);
      var allConnectedNodes = [];

      // get the second degree nodes
      for (i = 1; i < degrees; i++) {
        for (j = 0; j < connectedNodes.length; j++) {
          allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
        }
      }

      // all second degree nodes get a different color and their label back
      for (i = 0; i < allConnectedNodes.length; i++) {
        allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
        if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
          allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
          allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
        }
      }

      // all first degree nodes get their own color and their label back
      for (i = 0; i < connectedNodes.length; i++) {
        allNodes[connectedNodes[i]].color = undefined;
        if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
          allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
          allNodes[connectedNodes[i]].hiddenLabel = undefined;
        }
      }

      // the main node gets its own color and its label back.
      allNodes[selectedNode].color = undefined;
      if (allNodes[selectedNode].hiddenLabel !== undefined) {
        allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
        allNodes[selectedNode].hiddenLabel = undefined;
      }
    }
    else if (highlightActive === true) {
      // reset all nodes
      for (var nodeId in allNodes) {
        allNodes[nodeId].color = undefined;
        if (allNodes[nodeId].hiddenLabel !== undefined) {
          allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
          allNodes[nodeId].hiddenLabel = undefined;
        }
      }
      highlightActive = false
    }

    // transform the object into an array
    var updateArray = [];
    for (nodeId in allNodes) {
      if (allNodes.hasOwnProperty(nodeId)) {
        updateArray.push(allNodes[nodeId]);
      }
    }
    nodesDataset.update(updateArray);
  }

  redrawAll()

 </script>

 </body></html>
--- a/examples/network/categories/exampleApplications/nodeLegend.html
+++ b/examples/network/categories/exampleApplications/nodeLegend.html
@ -18,8 +18,8 @@
    }
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <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;
@ -115,13 +115,15 @@
          scaling: {
            min: 16,
            max: 32
          },
          font: {
            color: BLACK
          }
        },
        edges: {
          color: GRAY
          color: GRAY,
          smooth: false
        },
        physics:{
          barnesHut:{gravitationalConstant:-30000},
          stabilization: {iterations:2500}
        },
        groups: {
          'switch': {
@ -149,12 +151,12 @@
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../googleAnalytics.js"></script>
  <script src="../../../googleAnalytics.js"></script>
 </head>

 <body onload="draw()">

 <div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
 <div id="mynetwork"></div>



--- a/examples/network/categories/exampleApplications/worldCupPerformance.html
+++ b/examples/network/categories/exampleApplications/worldCupPerformance.html
@ -5,10 +5,10 @@
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>Network | Static smooth curves - World Cup Network</title>

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

  <script src="../data/WorldCup2014.js"></script>
  <script src="../../data/WorldCup2014.js"></script>

  <style type="text/css">
    #mynetwork {
@ -17,7 +17,7 @@
      border: 1px solid lightgray;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
  <script src="../../googleAnalytics.js"></script>
 </head>

 <body>
@ -43,8 +43,7 @@


  function redrawAll() {
    network = null;

    // remove positoins
    for (var i = 0; i < nodes.length; i++) {
      delete nodes[i].x;
      delete nodes[i].y;
--- a/examples/network/categories/nodeStyles/colors.html
+++ b/examples/network/categories/nodeStyles/colors.html
@ -55,7 +55,10 @@
    nodes: nodes,
    edges: edges
  };
  var options = {nodes:{borderWidth:2},interaction:{hover:true}};
  var options = {
    nodes: {borderWidth: 2},
    interaction: {hover: true}
  }
  var network = new vis.Network(container, data, options);
 </script>

--- a/examples/network/categories/nodeStyles/shadows.html
+++ b/examples/network/categories/nodeStyles/shadows.html
@ -0,0 +1,119 @@
 <!doctype html>
 <html>
 <head>
    <title>Network | Groups</title>

    <style>
        body {
            color: #d3d3d3;
            font: 12pt arial;
            background-color: #ffffff;
        }

        #mynetwork {
            width: 800px;
            height: 800px;
            border: 1px solid #444444;
            background-color: #dddddd;
        }
    </style>

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

    <script src="../../../googleAnalytics.js"></script>
 </head>

 <body>

 <div id="mynetwork"></div>
 <script type="text/javascript">
    var len = undefined;

    var nodes = [{id: 0, label: "0", group: 0},
        {id: 1, label: "1", group: 0},
        {id: 2, label: "2", group: 0},
        {id: 3, label: "3", group: 1},
        {id: 4, label: "4", group: 1},
        {id: 5, label: "5", group: 1},
        {id: 6, label: "6", group: 2},
        {id: 7, label: "7", group: 2},
        {id: 8, label: "8", group: 2},
        {id: 9, label: "9", group: 3},
        {id: 10, label: "10", group: 3},
        {id: 11, label: "11", group: 3},
        {id: 12, label: "12", group: 4},
        {id: 13, label: "13", group: 4},
        {id: 14, label: "14", group: 4},
        {id: 15, label: "15", group: 5},
        {id: 16, label: "16", group: 5},
        {id: 17, label: "17", group: 5},
        {id: 18, label: "18", group: 6},
        {id: 19, label: "19", group: 6},
        {id: 20, label: "20", group: 6},
        {id: 21, label: "21", group: 7},
        {id: 22, label: "22", group: 7},
        {id: 23, label: "23", group: 7},
        {id: 24, label: "24", group: 8},
        {id: 25, label: "25", group: 8},
        {id: 26, label: "26", group: 8},
        {id: 27, label: "27", group: 9},
        {id: 28, label: "28", group: 9},
        {id: 29, label: "29", group: 9}
    ];
    var edges = [{from: 1, to: 0},
        {from: 2, to: 0},
        {from: 4, to: 3},
        {from: 5, to: 4},
        {from: 4, to: 0},
        {from: 7, to: 6},
        {from: 8, to: 7},
        {from: 7, to: 0},
        {from: 10, to: 9},
        {from: 11, to: 10},
        {from: 10, to: 4},
        {from: 13, to: 12},
        {from: 14, to: 13},
        {from: 13, to: 0},
        {from: 16, to: 15},
        {from: 17, to: 15},
        {from: 15, to: 10},
        {from: 19, to: 18},
        {from: 20, to: 19},
        {from: 19, to: 4},
        {from: 22, to: 21},
        {from: 23, to: 22},
        {from: 22, to: 13},
        {from: 25, to: 24},
        {from: 26, to: 25},
        {from: 25, to: 7},
        {from: 28, to: 27},
        {from: 29, to: 28},
        {from: 28, to: 0}
    ]

    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
            size: 30,
            font: {
                size: 32
            },
            borderWidth: 2,
            shadow:true
        },
        edges: {
            width: 2,
            shadow:true
        }
    };
    network = new vis.Network(container, data, options);
 </script>
 </body>
 </html>
--- a/examples/network/categories/physics/25_physics_configuration.html
+++ b/examples/network/categories/physics/25_physics_configuration.html
@ -1,114 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Playing with Physics</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" />

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    function draw() {
      nodes = [];
      edges = [];
      var connectionCount = [];

      // randomly create some nodes and edges
      var nodeCount = 60;
      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 = {
        physics: {
          stabilization: false
        },
        configure: {
          filter: 'physics'
        }
    };
      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>Playing with Physics</h2>
 <div style="width: 700px; font-size:14px; text-align: justify;">
    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
    that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
    settings you are happy with, you can supply them to network using the documented physics options.

    On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
 </div>
 <br />
 <div id="mynetwork"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/network/categories/physics/physicsConfiguration.html
+++ b/examples/network/categories/physics/physicsConfiguration.html
@ -0,0 +1,80 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Playing with Physics</title>

  <style type="text/css">
    body {
      font: 10pt sans;
    }
    #mynetwork {
      float:left;
      width: 600px;
      height: 600px;
      margin:5px;
      border: 1px solid lightgray;
    }
    #config {
      float:left;
      width: 400px;
      height: 600px;
    }
  </style>


  <script type="text/javascript" src="../../exampleUtil.js"></script>
  <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;

    function draw() {
      nodes = [];
      edges = [];
      // randomly create some nodes and edges
      var data = getScaleFreeNetwork(60);

      // create a network
      var container = document.getElementById('mynetwork');

      var options = {
        physics: {
          stabilization: false
        },
        configure: {
          filter:function (option, path) {
            if (path.indexOf('physics') !== -1) {
              return true;
            }
            if (path.indexOf('smooth') !== -1 || option === 'smooth') {
              return true;
            }
            return false;
          },
          container: document.getElementById('config')
        }
      };
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../../../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">

 <h2>Playing with Physics</h2>
 <div style="width: 700px; font-size:14px; text-align: justify;">
    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, the network configurator can be used
    to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
    settings you are happy with, you can supply them to network using the documented physics options.
 </div>
 <br />
 <div id="mynetwork"></div>
 <div id="config"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/network/categories/rest/clusteringByZoom.html
+++ b/examples/network/categories/rest/clusteringByZoom.html
@ -30,7 +30,7 @@
 <p>
    You can zoom in and out to cluster/decluster.
 </p>

 Stabilize when clustering:<input type="checkbox" id="stabilizeCheckbox">
 <div id="mynetwork"></div>

 <script type="text/javascript">
@ -81,6 +81,8 @@
            lastClusterZoomLevel = network.getScale();
        }
    });

    // we use the zoom event for our clustering
    network.on('zoom', function (params) {
        if (params.direction == '-') {
            if (params.scale < lastClusterZoomLevel*clusterFactor) {
@ -92,6 +94,8 @@
            openClusters(params.scale);
        }
    });

    // if we click on a node, we want to open it up!
    network.on("selectNode", function (params) {
        if (params.nodes.length == 1) {
            if (network.isCluster(params.nodes[0]) == true) {
@ -100,32 +104,49 @@
        }
    });


    // make the clusters
    function makeClusters(scale) {
        var clusterOptionsByData = {
            processProperties: function (clusterOptions) {
            processProperties: function (clusterOptions, childNodes) {
                clusterIndex = clusterIndex + 1;
                clusterOptions.label = clusterIndex;
                var childrenCount = 0;
                for (var i = 0; i < childNodes.length; i++) {
                    childrenCount += childNodes[i].childrenCount || 1;
                }
                clusterOptions.childrenCount = childrenCount;
                clusterOptions.label = "# " + childrenCount + "";
                clusterOptions.font = {size: childrenCount*5+30}
                clusterOptions.id = 'cluster:' + clusterIndex;
                clusters.push({id:'cluster:' + clusterIndex, scale:scale});
                return clusterOptions;
            },
            clusterNodeProperties: {borderWidth: 3, shape: 'box', font: {size: 30}}
            clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}}
        }
        network.clusterOutliers(clusterOptionsByData);
        if (document.getElementById('stabilizeCheckbox').checked === true) {
            network.stabilize();
        }
    }

    // open them back up!
    function openClusters(scale) {
        var newClusters = [];
        var declustered = false;
        for (var i = 0; i < clusters.length; i++) {
            if (clusters[i].scale < scale) {
                network.openCluster(clusters[i].id);
                lastClusterZoomLevel = scale;
                declustered = true;
            }
            else {
                newClusters.push(clusters[i])
            }
        }
        clusters = newClusters;
        if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
            network.stabilize();
        }
    }


--- a/examples/network/categories/rest/configuration.html
+++ b/examples/network/categories/rest/configuration.html
@ -0,0 +1,72 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Playing with Physics</title>

  <style type="text/css">
    body {
      font: 10pt sans;
    }
    #mynetwork {
      float:left;
      width: 600px;
      height: 600px;
      margin:5px;
      border: 1px solid lightgray;
    }
    #config {
      float:left;
      width: 400px;
      height: 600px;
    }

    p {
      font-size:16px;
      max-width:700px;
    }
  </style>


  <script type="text/javascript" src="../../exampleUtil.js"></script>
  <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;

    function draw() {
      nodes = [];
      edges = [];
      // randomly create some nodes and edges
      var data = getScaleFreeNetwork(25);

      // create a network
      var container = document.getElementById('mynetwork');

      var options = {
        physics: {
          stabilization: false
        },
        configure: true
      };
      network = new vis.Network(container, data, options);
    }
  </script>
  <script src="../../../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">

 <p>
  The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown.
  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>
 <br />
 <div id="mynetwork"></div>

 <p id="selection"></p>
 </body>
 </html>
--- a/examples/network/categories/rest/performance.html
+++ b/examples/network/categories/rest/performance.html
@ -0,0 +1,91 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Random nodes</title>

  <style type="text/css">
    body {
      font: 10pt sans;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }

    #message {
      color:darkred;
      max-width:600px;
      font-size:16px;
      cursor:pointer;
      text-decoration: underline;
    }
  </style>

  <script type="text/javascript" src="../../exampleUtil.js"></script>
  <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 setSmooth = false;

    function destroy() {
      if (network !== null) {
        network.destroy();
        network = null;
      }
    }

    function draw() {
      destroy();
      var nodeCount = document.getElementById('nodeCount').value;
      if (nodeCount > 100) {
        document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
      }
      else if (setSmooth === false) {
        document.getElementById("message").innerHTML = '';
      }
      // create a network
      var container = document.getElementById('mynetwork');
      var data = getScaleFreeNetwork(nodeCount);
      var options = {
        physics: { stabilization: false }
      };
      network = new vis.Network(container, data, options);
    }

    function disableSmoothCurves() {
      setSmooth = true;
      network.setOptions({edges:{smooth:{type:'continuous'}}});
      document.getElementById("message").innerHTML = '<a onclick="enableSmoothCurves()">Click here to reenable the dynamic smooth curves.</a>';
    }

    function enableSmoothCurves() {
      setSmooth = false;
      document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
      network.setOptions({edges:{smooth:{type:'dynamic'}}});
    }


  </script>
  <script src="../../../googleAnalytics.js"></script>
 </head>
 <body onload="draw();">
 <p>
  Generate a random network with nodes and edges.
 </p>
 <p>
  <form onsubmit="draw(); return false;">
  <label for="nodeCount">Number of nodes:</label>
  <input id="nodeCount" type="text" value="25" style="width: 50px;">
  <input type="button" value="Go" onclick="draw()">
 </form>
 </p>
 <span id="message"></span>
 <div id="mynetwork"></div>

 </body>
 </html>
--- a/examples/network/data/WorldCup2014.js
+++ b/examples/network/data/WorldCup2014.js
@ -9968,8 +9968,3 @@ var edges = [
  {from: 732, to: 733},
  {from: 734, to: 735}
 ];

 var data = {
  nodes: nodes,
  edges: edges
 };
--- a/lib/network/modules/EdgesHandler.js
+++ b/lib/network/modules/EdgesHandler.js
@ -69,7 +69,7 @@ class EdgesHandler {
          }
        }
      },
      selectionWidth: 1,
      selectionWidth: 1.5,
      selfReferenceSize:20,
      shadow:{
        enabled: false,
--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@ -24,7 +24,7 @@ class NodesHandler {
    this.options = {};
    this.defaultOptions = {
      borderWidth: 1,
      borderWidthSelected: undefined,
      borderWidthSelected: 2,
      brokenImage:undefined,
      color: {
        border: '#2B7CE9',
@ -378,13 +378,13 @@ class NodesHandler {
      let nodeObj = {}; // used to quickly check if node already exists
      for (let i = 0; i < node.edges.length; i++) {
        let edge = node.edges[i];
        if (edge.toId === nodeId) {
        if (edge.toId == nodeId) { // these are double equals since ids can be numeric or string
          if (nodeObj[edge.fromId] === undefined) {
            nodeList.push(edge.fromId);
            nodeObj[edge.fromId] = true;
          }
        }
        else if (edge.fromId === nodeId) {
        else if (edge.fromId == nodeId) { // these are double equals since ids can be numeric or string
          if (nodeObj[edge.toId] === undefined) {
            nodeList.push(edge.toId);
            nodeObj[edge.toId] = true;
--- a/lib/network/modules/PhysicsEngine.js
+++ b/lib/network/modules/PhysicsEngine.js
@ -69,7 +69,7 @@ class PhysicsEngine {
      stabilization: {
        enabled: true,
        iterations: 1000,   // maximum number of iteration to stabilize
        updateInterval: 100,
        updateInterval: 50,
        onlyDynamicEdges: false,
        fit: true
      },
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@ -118,13 +118,13 @@ class Node {
      throw "Node must have an id";
    }


    // set these options locally
    if (options.x !== undefined)     {this.x = parseInt(options.x); this.predefinedPosition = true;}
    if (options.y !== undefined)     {this.y = parseInt(options.y); this.predefinedPosition = true;}
    if (options.size !== undefined)  {this.baseSize = options.size;}
    if (options.value !== undefined) {options.value = parseInt(options.value);}

    // this transforms all shorthands into fully defined options
    Node.parseOptions(this.options, options, true);

    // copy group options
    if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
@ -134,6 +134,9 @@ class Node {
      this.options.color = util.parseColor(this.options.color);
    }

    // this transforms all shorthands into fully defined options
    Node.parseOptions(this.options, options, true);

    // load the images
    if (this.options.image !== undefined && this.options.image != "") {
      if (this.imagelist) {
--- a/lib/network/options.js
+++ b/lib/network/options.js
@ -21,6 +21,7 @@ let allOptions = {
    enabled: {boolean},
    filter: {boolean,string,array,fn},
    container: {dom},
    showButton: {boolean},
    __type__: {object,boolean,string,array,fn}
  },
  edges: {
@ -322,11 +323,11 @@ let configureOptions = {
      min: [10, 0, 200, 1],
      max: [30, 0, 200, 1],
      label: {
        enabled: true,
        enabled: false,
        min: [14, 0, 200, 1],
        max: [30, 0, 200, 1],
        maxVisible: [30, 0, 200, 1],
        drawThreshold: [3, 0, 20, 1]
        drawThreshold: [5, 0, 20, 1]
      }
    },
    shadow:{
@ -357,12 +358,12 @@ let configureOptions = {
      size: [14, 0, 100, 1], // px
      face: ['arial', 'verdana', 'tahoma'],
      background: ['color','none'],
      strokeWidth: [1, 0, 50, 1], // px
      strokeWidth: [2, 0, 50, 1], // px
      strokeColor: ['color','#ffffff'],
      align: ['horizontal', 'top', 'middle', 'bottom']
    },
    hidden: false,
    hoverWidth: [2, 0, 5, 0.1],
    hoverWidth: [1.5, 0, 5, 0.1],
    physics: true,
    scaling: {
      min: [1, 0, 100, 1],
@ -372,7 +373,7 @@ let configureOptions = {
        min: [14, 0, 200, 1],
        max: [30, 0, 200, 1],
        maxVisible: [30, 0, 200, 1],
        drawThreshold: [3, 0, 20, 1]
        drawThreshold: [5, 0, 20, 1]
      }
    },
    selectionWidth: [1.5, 0, 5, 0.1],
@ -391,7 +392,7 @@ let configureOptions = {
    width: [1, 0, 30, 1]
  },
  layout: {
    randomSeed: [0, 0, 500, 1],
    //randomSeed: [0, 0, 500, 1],
    hierarchical: {
      enabled: false,
      levelSeparation: [150, 20, 500, 5],
@ -427,37 +428,37 @@ let configureOptions = {
      gravitationalConstant: [-2000, -30000, 0, 50],
      centralGravity: [0.3, 0, 10, 0.05],
      springLength: [95, 0, 500, 5],
      springConstant: [0.04, 0, 5, 0.005],
      springConstant: [0.04, 0, 1.2, 0.005],
      damping: [0.09, 0, 1, 0.01],
      avoidOverlap: [0, 0, 1, 0.01]
    },
    forceAtlas2Based: {
      //theta: [0.5, 0.1, 1, 0.05],
      gravitationalConstant: [-800, -3000, 0, 1],
      gravitationalConstant: [-50, -500, 0, 1],
      centralGravity: [0.01, 0, 1, 0.005],
      springLength: [95, 0, 500, 5],
      springConstant: [0.08, 0, 5, 0.005],
      springConstant: [0.08, 0, 1.2, 0.005],
      damping: [0.4, 0, 1, 0.01],
      avoidOverlap: [0, 0, 1, 0.01]
    },
    repulsion: {
      centralGravity: [0.2, 0, 10, 0.05],
      springLength: [200, 0, 500, 5],
      springConstant: [0.05, 0, 5, 0.005],
      springConstant: [0.05, 0, 1.2, 0.005],
      nodeDistance: [100, 0, 500, 5],
      damping: [0.09, 0, 1, 0.01]
    },
    hierarchicalRepulsion: {
      centralGravity: [0.2, 0, 10, 0.05],
      springLength: [100, 0, 500, 5],
      springConstant: [0.01, 0, 5, 0.005],
      springConstant: [0.01, 0, 1.2, 0.005],
      nodeDistance: [120, 0, 500, 5],
      damping: [0.09, 0, 1, 0.01]
    },
    maxVelocity: [50, 0, 150, 1],
    minVelocity: [0.1, 0.01, 0.5, 0.01],
    solver: ['barnesHut', 'forceAtlas2Based', 'repulsion', 'hierarchicalRepulsion'],
    timestep: [0.5, 0, 1, 0.05]
    timestep: [0.5, 0.01, 1, 0.01]
  },
  global: {
    locale: ['en', 'nl']
--- a/lib/shared/Configurator.js
+++ b/lib/shared/Configurator.js
@ -27,7 +27,8 @@ class Configurator {
    this.defaultOptions = {
      enabled: false,
      filter: true,
      container: undefined
      container: undefined,
      showButton: true
    };
    util.extend(this.options, this.defaultOptions);

@ -61,6 +62,9 @@ class Configurator {
        if (options.filter !== undefined) {
          this.options.filter = options.filter;
        }
        if (options.showButton !== undefined) {
          this.options.showButton = options.showButton;
        }
        if (options.enabled !== undefined) {
          enabled = options.enabled;
        }
@ -107,7 +111,7 @@ class Configurator {
        show = false;
        if (typeof filter === 'function') {
          show = filter(option,[]);
          show = show || this._handleObject(this.configureOptions[option], [option]);
          show = show || this._handleObject(this.configureOptions[option], [option], true);
        }
        else if (filter === true || filter.indexOf(option) !== -1) {
          show = true;
@ -129,18 +133,21 @@ class Configurator {
        counter++;
      }
    }
    let generateButton = document.createElement('div');
    generateButton.className = 'vis-network-configuration button';
    generateButton.innerHTML = 'generate options';
    generateButton.onclick = () => {this._printOptions();};
    generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
    generateButton.onmouseout =  () => {generateButton.className = 'vis-network-configuration button';};

    this.optionsContainer = document.createElement('div');
    this.optionsContainer.className = 'vis-network-configuration vis-option-container';
    if (this.options.showButton === true) {
      let generateButton = document.createElement('div');
      generateButton.className = 'vis-network-configuration button';
      generateButton.innerHTML = 'generate options';
      generateButton.onclick =     () => {this._printOptions();};
      generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
      generateButton.onmouseout =  () => {generateButton.className = 'vis-network-configuration button';};

      this.optionsContainer = document.createElement('div');
      this.optionsContainer.className = 'vis-network-configuration vis-option-container';

    this.domElements.push(this.optionsContainer);
    this.domElements.push(generateButton);
      this.domElements.push(this.optionsContainer);
      this.domElements.push(generateButton);
    }

    this._push();
    this.colorPicker.insertTo(this.container);
@ -447,24 +454,30 @@ class Configurator {
   * @param path
   * @private
   */
  _handleObject(obj, path = []) {
  _handleObject(obj, path = [], checkOnly = false) {
    let show = false;
    let filter = this.options.filter;
    let visibleInSet = false;
    for (let subObj in obj) {
      if (obj.hasOwnProperty(subObj)) {
        show = false;
        show = true;
        let item = obj[subObj];
        let newPath = util.copyAndExtendArray(path, subObj);
        if (typeof filter === 'function') {
          show = filter(subObj,path);
        }
        else if (filter === true) {
          show = true;

          // if needed we must go deeper into the object.
          if (show === false) {
            if (!(item instanceof Array) && typeof item !== 'string' && typeof item !== 'boolean' && item instanceof Object) {
              this.allowCreation = false;
              show = this._handleObject(item, newPath, true);
              this.allowCreation = checkOnly === false;
            }
          }
        }

        if (show !== false) {
          visibleInSet = true;
          let item = obj[subObj];
          let newPath = util.copyAndExtendArray(path, subObj);
          let value = this._getValue(newPath);

          if (item instanceof Array) {