diff options
Diffstat (limited to 'www/lib/vis/examples/network/layout')
5 files changed, 0 insertions, 523 deletions
diff --git a/www/lib/vis/examples/network/layout/hierarchicalLayout.html b/www/lib/vis/examples/network/layout/hierarchicalLayout.html deleted file mode 100644 index d8e317ec..00000000 --- a/www/lib/vis/examples/network/layout/hierarchicalLayout.html +++ /dev/null @@ -1,114 +0,0 @@ -<!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 deleted file mode 100644 index 6664bd2d..00000000 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutMethods.html +++ /dev/null @@ -1,108 +0,0 @@ -<!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 deleted file mode 100644 index de536e54..00000000 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutUserdefined.html +++ /dev/null @@ -1,152 +0,0 @@ -<!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 deleted file mode 100644 index 55670d7c..00000000 --- a/www/lib/vis/examples/network/layout/hierarchicalLayoutWithoutPhysics.html +++ /dev/null @@ -1,89 +0,0 @@ -<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 deleted file mode 100644 index 1ca075ae..00000000 --- a/www/lib/vis/examples/network/layout/randomSeed.html +++ /dev/null @@ -1,60 +0,0 @@ -<!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> |