<!doctype html> <html> <head> <title>Graph | Random nodes</title> <style type="text/css"> body { font: 10pt sans; } #mygraph { width: 600px; height: 600px; border: 1px solid lightgray; } </style> <script type="text/javascript" src="../../vis.js"></script> <script type="text/javascript"> var nodes = null; var edges = null; var graph = 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-graph 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 graph var container = document.getElementById('mygraph'); var data = { nodes: nodes, edges: edges }; /* var options = { nodes: { shape: 'circle' }, edges: { length: 50 }, stabilize: false }; */ var options = { edges: { length: 50 }, stabilize: false }; graph = new vis.Graph(container, data, options); // add event listeners vis.events.addListener(graph, 'select', function(params) { document.getElementById('selection').innerHTML = 'Selection: ' + graph.getSelection(); }); } </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="mygraph"></div> <p id="selection"></p> </body> </html>