jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!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 options = {    edges: {    },    stabilize: 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();"><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>
<br>
<div id="mynetwork"></div>
<p id="selection"></p></body></html>