Squashed 'lib/vis/' content from commit 1d029ca

git-subtree-dir: lib/vis git-subtree-split: 1d029cab7b527f3b292e95d550efbf784dac8699
2026-07-27 16:08:55 +02:00 · 2015-03-28 13:50:19 +00:00
commit 35db670c97
389 changed files with 124384 additions and 0 deletions
@@ -0,0 +1,149 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Hierarchical layout difference</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt sans;
+        }
+        #mynetwork {
+            width: 800px;
+            height: 500px;
+            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 network = null;
+        var layoutMethod = "hubsize";
+
+        function destroy() {
+            if (network !== null) {
+                network.destroy();
+                network = null;
+            }
+        }
+
+        function draw() {
+            destroy();
+
+            var nodes = [];
+            var edges = [];
+            // randomly create some nodes and edges
+            for (var i = 0; i < 15; i++) {
+                nodes.push({
+                    id: i,
+                    label: String(i)
+                });
+            }
+            edges.push({
+                from: 0,
+                to: 1
+            });
+            edges.push({
+                from: 0,
+                to: 6
+            });
+            edges.push({
+                from: 0,
+                to: 13
+            });edges.push({
+                from: 0,
+                to: 11
+            });
+            edges.push({
+                from: 1,
+                to: 2
+            });
+            edges.push({
+                from: 2,
+                to: 3
+            });
+            edges.push({
+                from: 2,
+                to: 4
+            });
+            edges.push({
+                from: 3,
+                to: 5
+            });
+            edges.push({
+                from: 1,
+                to: 10
+            });
+            edges.push({
+                from: 1,
+                to: 7
+            });
+            edges.push({
+                from: 2,
+                to: 8
+            });
+            edges.push({
+                from: 2,
+                to: 9
+            });
+            edges.push({
+                from: 3,
+                to: 14
+            });
+            edges.push({
+                from: 1,
+                to: 12
+            });
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+
+            var options = {
+                hierarchicalLayout: {
+                    layout: layoutMethod
+                },
+                edges: {style:"arrow"},
+                smoothCurves:false
+            };
+            network = new vis.Network(container, data, options);
+
+            // add event listeners
+            network.on('select', function(params) {
+                document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+            });
+        }
+
+    </script>
+</head>
+
+<body onload="draw();">
+<h2>Hierarchical layout difference</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows a the effect of the different hierarchical layout methods. Hubsize is based on the amount of edges connected to a node.
+    The node with the most connections (the largest hub) is drawn at the top of the tree. The direction method is based on the direction of the edges.
+    Try switching between the methods with the dropdown box below.
+</div>
+Layout method:
+<select id="layout">
+    <option value="hubsize">hubsize</option>
+    <option value="direction">direction</option>
+</select><br/>
+<br />
+
+<div id="mynetwork"></div>
+
+<p id="selection"></p>
+<script language="JavaScript">
+    var dropdown = document.getElementById("layout");
+    dropdown.onchange = function() {
+        layoutMethod = dropdown.value;
+        draw();
+    }
+</script>
+</body>
+</html>