<!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 destroy() {
        if (network !== null) {
            network.destroy();
            network = null;
        }
    }

    function draw() {
      destroy();
      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").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>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</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>