1 files changed, 80 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/physics/physicsConfiguration.html b/www/lib/vis/examples/network/physics/physicsConfiguration.html
new file mode 100644
index 00000000..5a95f215
--- /dev/null
+++ b/www/lib/vis/examples/network/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>