|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>Graph | Mobile friendly</title>
-
- <style type="text/css">
- html, body {
- font: 10pt arial;
- padding: 0;
- margin: 0;
- width: 100%;
- height: 100%;
- }
-
- #mygraph {
- 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 graph = 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 graph
- var container = document.getElementById('mygraph');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {
- stabilize: false,
- nodes: {
- shape: 'dot',
- radius: 24,
- fontSize: 24
- },
- edges: {
- width: 2
- }
- };
- graph = new vis.Graph(container, data, options);
- }
- </script>
- </head>
-
- <body onload="draw()" onresize="graph.redraw();">
- <div id="mygraph"></div>
- </body>
- </html>
|
