This repository has been archived by the owner on Jul 29, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
791 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| <!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="../../dist/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 = { | ||
| edges: { | ||
| }, | ||
| stabilize: false, | ||
| hierarchicalLayout:true | ||
| }; | ||
| graph = new vis.Graph(container, data, options); | ||
|
|
||
| // add event listeners | ||
| graph.on('select', function(params) { | ||
| document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; | ||
| }); | ||
| } | ||
| </script> | ||
| </head> | ||
|
|
||
| <body onload="draw();"> | ||
| <h2>Hierarchical Layout - Scale-Free-Graph</h2> | ||
| <div style="width:700px; font-size:14px;"> | ||
| This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2. | ||
| In this example, hierarchical layout has been enabled and the vertical levels are determine 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> | ||
| <br> | ||
|
|
||
| <div id="mygraph"></div> | ||
|
|
||
| <p id="selection"></p> | ||
| </body> | ||
| </html> |
Oops, something went wrong.