diff options
Diffstat (limited to 'www/lib/vis/examples/network/layout')
5 files changed, 523 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayout.html b/www/lib/vis/examples/network/layout/hierarchicalLayout.html new file mode 100644 index 00000000..d8e317ec --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayout.html @@ -0,0 +1,114 @@ +<!doctype html> +<html> +<head> + <title>Network | Hierarchical layout</title> + + <style type="text/css"> + body { + font: 10pt sans; + } + + #mynetwork { + width: 600px; + height: 600px; + border: 1px solid lightgray; + } + </style> + + <script type="text/javascript" src="../exampleUtil.js"></script> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.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(); + // randomly create some nodes and edges + var nodeCount = document.getElementById('nodeCount').value; + var data = getScaleFreeNetwork(nodeCount) + + // create a network + var container = document.getElementById('mynetwork'); + var directionInput = document.getElementById("direction").value; + var options = { + layout: { + hierarchical: { + direction: directionInput + } + } + }; + network = new vis.Network(container, data, options); + + // add event listeners + network.on('select', function (params) { + document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; + }); + } + + </script> + <script src="../../googleAnalytics.js"></script> +</head> + +<body onload="draw();"> +<h2>Hierarchical Layout - 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. + In this example, hierarchical layout has been enabled and the vertical levels are determined automatically. +</div> +<br/> + +<form onsubmit="draw(); return false;"> + <label for="nodeCount">Number of nodes:</label> + <input id="nodeCount" type="text" value="25" style="width: 50px;"> + <input type="submit" value="Go"> +</form> +<p> + <input type="button" id="btn-UD" value="Up-Down"> + <input type="button" id="btn-DU" value="Down-Up"> + <input type="button" id="btn-LR" value="Left-Right"> + <input type="button" id="btn-RL" value="Right-Left"> + <input type="hidden" id='direction' value="UD"> +</p> + +<script language="javascript"> + var directionInput = document.getElementById("direction"); + var btnUD = document.getElementById("btn-UD"); + btnUD.onclick = function () { + directionInput.value = "UD"; + draw(); + } + var btnDU = document.getElementById("btn-DU"); + btnDU.onclick = function () { + directionInput.value = "DU"; + draw(); + }; + var btnLR = document.getElementById("btn-LR"); + btnLR.onclick = function () { + directionInput.value = "LR"; + draw(); + }; + var btnRL = document.getElementById("btn-RL"); + btnRL.onclick = function () { + directionInput.value = "RL"; + draw(); + }; +</script> +<br> + +<div id="mynetwork"></div> + +<p id="selection"></p> +</body> +</html> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html new file mode 100644 index 00000000..6664bd2d --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html @@ -0,0 +1,108 @@ +<!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-network.min.css" rel="stylesheet" type="text/css" /> + + <script type="text/javascript"> + var network = null; + var layoutMethod = "directed"; + + 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 < 19; 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}); + edges.push({from: 16, to: 15}); + edges.push({from: 15, to: 17}); + edges.push({from: 18, to: 17}); + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + + var options = { + layout: { + hierarchical: { + sortMethod: layoutMethod + } + }, + edges: { + smooth: true, + arrows: {to : true } + } + }; + network = new vis.Network(container, data, options); + } + + </script> + <script src="../../googleAnalytics.js"></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="directed">directed</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> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html new file mode 100644 index 00000000..de536e54 --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html @@ -0,0 +1,152 @@ +<!doctype html> +<html> +<head> + <title>Network | Hierarchical Layout, userDefined</title> + + <style type="text/css"> + body { + font: 10pt sans; + } + + #mynetwork { + width: 600px; + height: 600px; + border: 1px solid lightgray; + } + </style> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/> + + + <script type="text/javascript"> + var nodes = null; + var edges = null; + var network = null; + var directionInput = document.getElementById("direction"); + + function destroy() { + if (network !== null) { + network.destroy(); + network = null; + } + } + + function draw() { + destroy(); + nodes = []; + edges = []; + var connectionCount = []; + + // randomly create some nodes and edges + for (var i = 0; i < 15; i++) { + nodes.push({id: i, label: String(i)}); + } + edges.push({from: 0, to: 1}); + edges.push({from: 0, to: 6}); + edges.push({from: 0, to: 13}); + edges.push({from: 0, to: 11}); + edges.push({from: 1, to: 2}); + edges.push({from: 2, to: 3}); + edges.push({from: 2, to: 4}); + edges.push({from: 3, to: 5}); + edges.push({from: 1, to: 10}); + edges.push({from: 1, to: 7}); + edges.push({from: 2, to: 8}); + edges.push({from: 2, to: 9}); + edges.push({from: 3, to: 14}); + edges.push({from: 1, to: 12}); + nodes[0]["level"] = 0; + nodes[1]["level"] = 1; + nodes[2]["level"] = 3; + nodes[3]["level"] = 4; + nodes[4]["level"] = 4; + nodes[5]["level"] = 5; + nodes[6]["level"] = 1; + nodes[7]["level"] = 2; + nodes[8]["level"] = 4; + nodes[9]["level"] = 4; + nodes[10]["level"] = 2; + nodes[11]["level"] = 1; + nodes[12]["level"] = 2; + nodes[13]["level"] = 1; + nodes[14]["level"] = 5; + + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + + var options = { + edges: { + smooth: { + type: 'cubicBezier', + forceDirection: (directionInput.value == "UD" || directionInput.value == "DU") ? 'vertical' : 'horizontal', + roundness: 0.4 + } + }, + layout: { + hierarchical: { + direction: directionInput.value + } + }, + physics:false + }; + network = new vis.Network(container, data, options); + + // add event listeners + network.on('select', function (params) { + document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; + }); + } + + </script> + <script src="../../googleAnalytics.js"></script> +</head> + +<body onload="draw();"> +<h2>Hierarchical Layout - User-defined</h2> + +<div style="width:700px; font-size:14px; text-align: justify;"> + This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for + all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined. + If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network. +</div> +<p> + <input type="button" id="btn-UD" value="Up-Down"> + <input type="button" id="btn-DU" value="Down-Up"> + <input type="button" id="btn-LR" value="Left-Right"> + <input type="button" id="btn-RL" value="Right-Left"> + <input type="hidden" id='direction' value="UD"> +</p> + +<div id="mynetwork"></div> + +<p id="selection"></p> +<script language="JavaScript"> + var directionInput = document.getElementById("direction"); + var btnUD = document.getElementById("btn-UD"); + btnUD.onclick = function () { + directionInput.value = "UD"; + draw(); + }; + var btnDU = document.getElementById("btn-DU"); + btnDU.onclick = function () { + directionInput.value = "DU"; + draw(); + }; + var btnLR = document.getElementById("btn-LR"); + btnLR.onclick = function () { + directionInput.value = "LR"; + draw(); + }; + var btnRL = document.getElementById("btn-RL"); + btnRL.onclick = function () { + directionInput.value = "RL"; + draw(); + }; +</script> +</body> +</html> diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html new file mode 100644 index 00000000..55670d7c --- /dev/null +++ b/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html @@ -0,0 +1,89 @@ +<html> +<head> + <meta charset="utf-8"> + <title>Hierarchical Layout without Physics</title> + <script type="text/javascript" src="../../../dist/vis.js"></script> + <script type="text/javascript" src="../datasources/largeHierarchicalDataset.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + <style type="text/css"> + #network{ + width: 1000px; + height: 400px; + border: 1px solid lightgray; + } + + td { + vertical-align:top; + } + table { + width:800px; + } + </style> +</head> +<body> +<h1>Hierarchical Layout without Physics</h1> +The hierarchical layout can now be controlled without the use of physics. This is much quicker. The options for this are: <br /><br /> + +<table> + <tr> + <td width="150px"><code>levelSeparation</code></td> + <td width="400px">Distance between levels.</td> + </tr> + <tr> + <td><code>nodeSpacing</code></td> + <td>Minimum distance between nodes on the free axis.</td> + </tr> + <tr> + <td><code>treeSpacing</code></td> + <td>Distance between different trees (independent networks).</td> + </tr> + <tr> + <td><code>blockShifting</code></td> + <td>Method for reducing whitespace. Can be used alone or together with edge minimization. Each node will check for whitespace and will shift + it's branch along with it for as far as it can, respecting the nodeSpacing on any level.</td> + </tr> + <tr> + <td><code>edgeMinimization</code></td> + <td>Method for reducing whitespace. Can be used alone or together with block shifting. Enabling block shifting will usually speed up the layout process. + Each node will try to move along its free axis to reduce the total length of it's edges.</td> + </tr> + <tr> + <td><code>parentCentralization</code></td> + <td>When true, the parents nodes will be centered again after the the layout algorithm has been finished.</td> + </tr> +</table> +<br /><br /> +Play with the settings below the network and see how the layout changes! +<div id="network"></div> +<script> + var data = { + nodes: nodes, + edges: edges + }; + // create a network + var container = document.getElementById('network'); + var options = { + layout: { + hierarchical: { + direction: "UD", + sortMethod: "directed" + } + }, + interaction: {dragNodes :false}, + physics: { + enabled: false + }, + configure: { + filter: function (option, path) { + if (path.indexOf('hierarchical') !== -1) { + return true; + } + return false; + }, + showButton:false + } + }; + var network = new vis.Network(container, data, options); +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/network/layout/randomSeed.html b/www/lib/vis/examples/network/layout/randomSeed.html new file mode 100644 index 00000000..1ca075ae --- /dev/null +++ b/www/lib/vis/examples/network/layout/randomSeed.html @@ -0,0 +1,60 @@ +<!doctype html> +<html> +<head> + <title>Network | Setting the random seed</title> + + <script type="text/javascript" src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + #mynetwork { + width: 600px; + height: 400px; + border: 1px solid lightgray; + } + + p { + max-width:600px; + } + </style> +</head> +<body> + +<p> + Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes + are settled. +</p> + +<div id="mynetwork"></div> + +<script type="text/javascript"> + // create an array with nodes + var nodes = new vis.DataSet([ + {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 = new vis.DataSet([ + {from: 1, to: 3}, + {from: 1, to: 2}, + {from: 2, to: 4}, + {from: 2, to: 5} + ]); + + // create a network + var container = document.getElementById('mynetwork'); + var data = { + nodes: nodes, + edges: edges + }; + var options = {layout:{randomSeed:2}}; + var network = new vis.Network(container, data, options); +</script> + +<script src="../../googleAnalytics.js"></script> +</body> +</html> |