@ -0,0 +1,102 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph | Fully random nodes clustering</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 = []; | |||
// randomly create some nodes and edges | |||
var nodeCount = parseInt(document.getElementById('nodeCount').value); | |||
for (var i = 0; i < nodeCount; i++) { | |||
nodes.push({ | |||
id: i, | |||
label: String(i) | |||
}); | |||
} | |||
for (var i = 0; i < nodeCount; i++) { | |||
var from = i; | |||
var to = i; | |||
to = i; | |||
while (to == i) { | |||
to = Math.floor(Math.random() * (nodeCount)); | |||
} | |||
edges.push({ | |||
from: from, | |||
to: to | |||
}); | |||
} | |||
// create a graph | |||
var clusteringOn = document.getElementById('clustering').checked; | |||
var container = document.getElementById('mygraph'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
edges: { | |||
length: 80 | |||
}, | |||
clustering: { | |||
enabled: clusteringOn | |||
}, | |||
stabilize: false | |||
}; | |||
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>Clustering - Fully random graph</h2> | |||
<div style="width:700px; font-size:14px;"> | |||
This example shows a fully randomly generated set of nodes and connected edges. | |||
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to | |||
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked). | |||
<br /> | |||
<br /> | |||
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance | |||
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster. | |||
<br /> | |||
<br /> | |||
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset. | |||
</div> | |||
<br /> | |||
<form onsubmit="draw(); return false;"> | |||
<label for="nodeCount">Number of nodes:</label> | |||
<input id="nodeCount" type="text" value="50" style="width: 50px;"> | |||
<label for="clustering">Enable Clustering:</label> | |||
<input id="clustering" type="checkbox" onChange="draw()" checked="true"> | |||
<input type="submit" value="Go"> | |||
</form> | |||
<br> | |||
<div id="mygraph"></div> | |||
<p id="selection"></p> | |||
</body> | |||
</html> |
@ -0,0 +1,141 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Graph | Scale free graph clustering</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 clusteringOn = document.getElementById('clustering').checked; | |||
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value); | |||
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 | |||
}, | |||
clustering: { | |||
enabled: clusteringOn, | |||
clusterEdgeThreshold: clusterEdgeThreshold | |||
}, | |||
stabilize: false | |||
}; | |||
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>Clustering - Scale-Free-Graph</h2> | |||
<div style="width:700px; font-size:14px;"> | |||
This example shows therandomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2. | |||
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to | |||
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked). | |||
<br /> | |||
<br /> | |||
Clustering is done automatically when zooming out. When zooming in over the cluster, the cluster pops open. When the cluster is very big, a special instance | |||
will be created and the cluster contents will only be simulated in there. Double click will also open a cluster. | |||
<br /> | |||
<br /> | |||
Try values of 500 and 5000 with and without clustering. All thresholds can be changed to suit your dataset. | |||
Experiment with the clusterEdgeThreshold, which increases the formation of clusters when zoomed out (assuming the checkbox is checked). | |||
</div> | |||
<br /> | |||
<form onsubmit="draw(); return false;"> | |||
<label for="nodeCount">Number of nodes:</label> | |||
<input id="nodeCount" type="text" value="125" style="width: 50px;"> | |||
<label for="clustering">Enable Clustering:</label> | |||
<input id="clustering" type="checkbox" onChange="draw()" checked="true"> | |||
<label for="clusterEdgeThreshold">clusterEdgeThreshold:</label> | |||
<input id="clusterEdgeThreshold" type="text" value="20" style="width: 50px;"> | |||
<input type="submit" value="Go"> | |||
</form> | |||
<br> | |||
<div id="mygraph"></div> | |||
<p id="selection"></p> | |||
</body> | |||
</html> |
@ -0,0 +1,181 @@ | |||
<!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, | |||
navigation: true, | |||
keyboard: 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>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="../../dist/img/uparrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="../../dist/img/downarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="../../dist/img/leftarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="../../dist/img/rightarrow.png" /> </div></td> | |||
<td><div class="table_content"><img src="../../dist/img/plus.png" /> </div></td> | |||
<td><div class="table_content"><img src="../../dist/img/minus.png" /> </div></td> | |||
<td><div class="table_content"><img src="../../dist/img/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> |
@ -0,0 +1,53 @@ | |||
<!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<title>Timeline | Event listeners</title> | |||
<style type="text/css"> | |||
body, html { | |||
font-family: sans-serif; | |||
} | |||
</style> | |||
<script src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
</head> | |||
<body> | |||
<div id="visualization"></div> | |||
<p></p> | |||
<div id="log"></div> | |||
<script type="text/javascript"> | |||
var container = document.getElementById('visualization'); | |||
var items = [ | |||
{id: 1, content: 'item 1', start: '2013-04-20'}, | |||
{id: 2, content: 'item 2', start: '2013-04-14'}, | |||
{id: 3, content: 'item 3', start: '2013-04-18'}, | |||
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'}, | |||
{id: 5, content: 'item 5', start: '2013-04-25'}, | |||
{id: 6, content: 'item 6', start: '2013-04-27'} | |||
]; | |||
var options = {}; | |||
var timeline = new vis.Timeline(container, items, options); | |||
timeline.on('rangechange', function (properties) { | |||
logEvent('rangechange', properties); | |||
}); | |||
timeline.on('rangechanged', function (properties) { | |||
logEvent('rangechanged', properties); | |||
}); | |||
timeline.on('select', function (properties) { | |||
logEvent('select', properties); | |||
}); | |||
function logEvent(event, properties) { | |||
var log = document.getElementById('log'); | |||
var msg = document.createElement('div'); | |||
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' + | |||
'properties=' + JSON.stringify(properties); | |||
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg); | |||
} | |||
</script> | |||
</body> | |||
</html> |