<!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 draw() { 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 container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var directionInput = document.getElementById("direction"); var options = { stabilize: false, smoothCurves: false, hierarchicalLayout: { direction: directionInput.value } }; 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 - 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> <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"> <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>