@ -1,185 +0,0 @@ | |||
<!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; | |||
} | |||
table.legend_table { | |||
font-size: 11px; | |||
border-width:1px; | |||
border-color:#d3d3d3; | |||
border-style:solid; | |||
} | |||
table.legend_table,td { | |||
border-width:1px; | |||
border-color:#d3d3d3; | |||
border-style:solid; | |||
padding: 2px; | |||
} | |||
div.table_content { | |||
width:80px; | |||
text-align:center; | |||
} | |||
div.table_description { | |||
width:100px; | |||
} | |||
</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 = { | |||
nodes: { | |||
shape: 'circle' | |||
}, | |||
edges: { | |||
length: 50 | |||
}, | |||
stabilize: false | |||
}; | |||
*/ | |||
var options = { | |||
edges: { | |||
length: 50 | |||
}, | |||
stabilize: false, | |||
navigationUI: { | |||
enabled: true | |||
}, | |||
keyboardNavigation: { | |||
enabled: true | |||
} | |||
}; | |||
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();"> | |||
<h2>UI - User Interface and Keyboad Navigation</h2> | |||
<div style="width: 700px; font-size:14px;"> | |||
This example is the same as example 2, except for the UI that has been activated. The UI icons are described below. <br /><br /> | |||
<table class="legend_table"> | |||
<tr> | |||
<td>Icons: </td> | |||
<td><div class="table_content"><img src="img/UI_icons/uparrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/downarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/leftarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/rightarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/plus.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/minus.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/zoomExtends.png" /> </div></td> | |||
</tr> | |||
<tr> | |||
<td><div class="table_description">Keyboard shortcuts:</div></td> | |||
<td><div class="table_content">Up arrow</div></td> | |||
<td><div class="table_content">Down arrow</div></td> | |||
<td><div class="table_content">Left arrow</div></td> | |||
<td><div class="table_content">Right arrow</div></td> | |||
<td><div class="table_content">=<br />[<br />Page up</div></td> | |||
<td><div class="table_content">-<br />]<br />Page down</div></td> | |||
<td><div class="table_content">None</div></td> | |||
</tr> | |||
<td><div class="table_description">Description:</div></td> | |||
<td><div class="table_content">Move up</div></td> | |||
<td><div class="table_content">Move down</div></td> | |||
<td><div class="table_content">Move left</div></td> | |||
<td><div class="table_content">Move right</div></td> | |||
<td><div class="table_content">Zoom in</div></td> | |||
<td><div class="table_content">Zoom out</div></td> | |||
<td><div class="table_content">Zoom extends</div></td> | |||
</tr> | |||
</table> | |||
<br /> | |||
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. | |||
Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. | |||
</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> |
@ -0,0 +1,186 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph | Navigation</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt sans; | |||
} | |||
#mygraph { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
table.legend_table { | |||
font-size: 11px; | |||
border-width:1px; | |||
border-color:#d3d3d3; | |||
border-style:solid; | |||
} | |||
table.legend_table,td { | |||
border-width:1px; | |||
border-color:#d3d3d3; | |||
border-style:solid; | |||
padding: 2px; | |||
} | |||
div.table_content { | |||
width:80px; | |||
text-align:center; | |||
} | |||
div.table_description { | |||
width:100px; | |||
} | |||
</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 = { | |||
nodes: { | |||
shape: 'circle' | |||
}, | |||
edges: { | |||
length: 50 | |||
}, | |||
stabilize: false | |||
}; | |||
*/ | |||
var options = { | |||
edges: { | |||
length: 50 | |||
}, | |||
stabilize: false, | |||
navigationUI: { | |||
enabled: true | |||
}, | |||
keyboardNavigation: { | |||
enabled: true | |||
} | |||
}; | |||
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();"> | |||
<h2>Navigation controls and keyboad navigation</h2> | |||
<div style="width: 700px; font-size:14px;"> | |||
This example is the same as example 2, except for the navigation controls that has been activated. The navigation controls are described below. <br /><br /> | |||
<table class="legend_table"> | |||
<tr> | |||
<td>Icons: </td> | |||
<td><div class="table_content"><img src="img/UI_icons/uparrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/downarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/leftarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/rightarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/plus.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/minus.png" /> </div></td> | |||
<td><div class="table_content"><img src="img/UI_icons/zoomExtends.png" /> </div></td> | |||
</tr> | |||
<tr> | |||
<td><div class="table_description">Keyboard shortcuts:</div></td> | |||
<td><div class="table_content">Up arrow</div></td> | |||
<td><div class="table_content">Down arrow</div></td> | |||
<td><div class="table_content">Left arrow</div></td> | |||
<td><div class="table_content">Right arrow</div></td> | |||
<td><div class="table_content">=<br />[<br />Page up</div></td> | |||
<td><div class="table_content">-<br />]<br />Page down</div></td> | |||
<td><div class="table_content">None</div></td> | |||
</tr> | |||
<tr> | |||
<td><div class="table_description">Description:</div></td> | |||
<td><div class="table_content">Move up</div></td> | |||
<td><div class="table_content">Move down</div></td> | |||
<td><div class="table_content">Move left</div></td> | |||
<td><div class="table_content">Move right</div></td> | |||
<td><div class="table_content">Zoom in</div></td> | |||
<td><div class="table_content">Zoom out</div></td> | |||
<td><div class="table_content">Zoom extends</div></td> | |||
</tr> | |||
</table> | |||
<br /> | |||
Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. | |||
Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. | |||
</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> |