<!DOCTYPE HTML> <html> <head> <title>Network | Mobile friendly</title> <style type="text/css"> html, body { font: 10pt arial; padding: 0; margin: 0; width: 100%; height: 100%; } #mynetwork { width: 100%; height: 100%; } </style> <!-- for mobile devices like android and iphone --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script type="text/javascript" src="../../dist/vis.js"></script> <script type="text/javascript"> var nodes = null; var edges = null; var network = null; // Called when the Visualization API is loaded. function draw() { nodes = []; edges = []; var EDGE_LENGTH = 50; var connectionCount = []; // randomly create some nodes var nodeCount = 20; var cols = parseInt(Math.sqrt(nodeCount)); for (var i = 0; i < nodeCount; i++) { nodes.push({ id: i, label: '' + i }); connectionCount[i] = 0; // create links in a scale-free-network way if (i == 1) { var from = i; var to = 0; edges.push({ from: from, to: to, length: EDGE_LENGTH }); 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, length: EDGE_LENGTH }); connectionCount[from]++; connectionCount[to]++; } } // Create a network var container = document.getElementById('mynetwork'); var data = { nodes: nodes, edges: edges }; var options = { stabilize: false, nodes: { shape: 'dot', radius: 24, fontSize: 24 }, edges: { width: 2 } }; network = new vis.Network(container, data, options); } </script> </head> <body onload="draw()" onresize="network.redraw();"> <div id="mynetwork"></div> </body> </html>