@ -1,65 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Random nodes</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt sans; | |||
} | |||
#mynetwork { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../../dist/vis.js"></script> | |||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
var nodes = null; | |||
var edges = null; | |||
var network = null; | |||
function destroy() { | |||
if (network !== null) { | |||
network.destroy(); | |||
network = null; | |||
} | |||
} | |||
function draw() { | |||
destroy(); | |||
// create a network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
physics: { stabilization: true } | |||
}; | |||
network = new vis.Network(container, data, options); | |||
} | |||
</script> | |||
<script src="../../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="draw();"> | |||
<p> | |||
Generate a random network with nodes and edges. | |||
</p> | |||
<p> | |||
<label for="nodeCount">Number of nodes:</label> | |||
<input id="nodeCount" type="text" value="25" style="width: 50px;"> | |||
<input type="submit" value="Go" onclick="draw()"> | |||
</p> | |||
<div id="mynetwork"></div> | |||
</body> | |||
</html> |
@ -1,69 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Selections</title> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 400px; | |||
height: 400px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body> | |||
<p> | |||
Select nodes or edges by clicking them. To select multiple nodes, long-press (hold) them. | |||
</p> | |||
<div id="mynetwork"></div> | |||
<pre id="info"></pre> | |||
<script type="text/javascript"> | |||
// create an array with nodes | |||
var nodes = [ | |||
{id: 1, label: 'Node 1'}, | |||
{id: 2, label: 'Node 2'}, | |||
{id: 3, label: 'Node 3'}, | |||
{id: 4, label: 'Node 4'}, | |||
{id: 5, label: 'Node 5'} | |||
]; | |||
// create an array with edges | |||
var edges = [ | |||
{from: 1, to: 2}, | |||
{from: 1, to: 3}, | |||
{from: 2, to: 4}, | |||
{from: 2, to: 5} | |||
]; | |||
// create a network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes: { | |||
shape: 'box' | |||
} | |||
}; | |||
network = new vis.Network(container, data, options); | |||
// add event listener | |||
network.on('select', function(properties) { | |||
console.log('select', properties); | |||
delete properties.event; | |||
document.getElementById('info').innerHTML = 'Selection: ' + JSON.stringify(properties, null, 2) + '<br>'; | |||
}); | |||
// set initial selection (id's of some nodes) | |||
network.selectNodes([3, 4, 5]); | |||
</script> | |||
</body> | |||
</html> |
@ -1,145 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Custom style</title> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
var nodes = null; | |||
var edges = null; | |||
var options = null; | |||
var network = null; | |||
// Called when the Visualization API is loaded. | |||
function draw() { | |||
// create nodes | |||
nodes = [ | |||
{id: 1, label: 'black node', group: 'black'}, | |||
{id: 2, label: 'black node', group: 'black'}, | |||
{id: 3, label: 'black node', group: 'black'}, | |||
{id: 4, label: 'red node', group: 'black', color: 'red'}, | |||
{id: 5, label: 'gray node', group: 'gray'}, | |||
{id: 6, label: 'gray node', group: 'gray'}, | |||
{id: 7, label: 'gray node', group: 'gray'}, | |||
{id: 8, label: 'gray node', group: 'gray'}, | |||
{id: 9, label: 'image node', group: 'white'}, | |||
{id: 10, label: 'image node', group: 'white'}, | |||
{id: 11, label: 'default node'}, | |||
{id: 12, label: 'default node'} | |||
]; | |||
// create edges | |||
edges = [ | |||
{from: 1, to: 2}, | |||
{from: 1, to: 3}, | |||
{from: 1, to: 4}, | |||
{from: 5, to: 6}, | |||
{from: 5, to: 7}, | |||
{from: 5, to: 8}, | |||
{from: 9, to: 10}, | |||
{from: 9, to: 11}, | |||
{from: 9, to: 12}, | |||
{from: 1, to: 5}, | |||
{from: 5, to: 9}, | |||
{from: 9, to: 1} | |||
]; | |||
// specify options | |||
options = { | |||
physics: { | |||
stabilization: false, | |||
barnesHut: { | |||
springLength:200 | |||
} | |||
}, | |||
edges: { | |||
width: 2, | |||
arrows: 'to', | |||
color: 'gray' | |||
}, | |||
nodes: { | |||
// default for all nodes | |||
font: { | |||
face: 'times' | |||
}, | |||
shape: 'circle', | |||
color: { | |||
border: 'orange', | |||
background: 'yellow', | |||
highlight: { | |||
border: 'darkorange', | |||
background: 'gold' | |||
} | |||
} | |||
}, | |||
groups: { | |||
black: { | |||
// defaults for nodes in this group | |||
size: 15, | |||
color: 'black', | |||
font: { | |||
color: 'white', | |||
size: 18, | |||
face: 'courier' | |||
}, | |||
shape: 'box' | |||
}, | |||
gray: { | |||
color: { | |||
border: 'black', | |||
background: 'gray', | |||
highlight: { | |||
border: 'black', | |||
background: 'lightgray' | |||
} | |||
}, | |||
font: { | |||
size: 18, | |||
face: 'arial' | |||
}, | |||
shape: 'circle' | |||
}, | |||
white: { | |||
color: { | |||
border: 'black', | |||
background: 'white' | |||
}, | |||
font: { | |||
color: 'red' | |||
}, | |||
shape: 'image', | |||
image: 'img/soft-scraps-icons/User-Coat-Blue-icon.png' | |||
} | |||
} | |||
}; | |||
// create the network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
network = new vis.Network(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<p> | |||
Custom styles for nodes can be applied globally, per group, of to individual nodes. Same holds for edges. | |||
</p> | |||
<body onload="draw()"> | |||
<div id="mynetwork"></div> | |||
</body> | |||
</html> |
@ -1,69 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Arrows</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt sans; | |||
} | |||
#mynetwork { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
// Called on page load | |||
function draw() { | |||
var nodes = [ | |||
{id: 1, label: 'arrows\nexamples'}, | |||
{id: 2, label: 'none'}, | |||
{id: 3, label: '"to"'}, | |||
{id: 4, label: '"from, to"'}, | |||
{id: 5, label: '"middle"'}, | |||
{id: 6, label: '{to: {scaleFactor: 2}}'} | |||
]; | |||
var edges = [ | |||
{from: 1, to: 2}, | |||
{from: 1, to: 3, arrows: 'to'}, | |||
{from: 1, to: 4, arrows: 'from, to'}, | |||
{from: 1, to: 5, arrows: 'middle'}, | |||
{from: 1, to: 6, arrows: {to: {scaleFactor: 2}}} | |||
]; | |||
// create the network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes: { | |||
shape: 'box' | |||
}, | |||
physics: { | |||
barnesHut: { | |||
springLength: 150 | |||
}, | |||
stabilization: false | |||
} | |||
}; | |||
var network = new vis.Network(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="draw();"> | |||
<p> | |||
This example shows the different options for arrows. | |||
</p> | |||
<div id="mynetwork"></div> | |||
</body> | |||
</html> |
@ -1,69 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Dashed lines</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt sans; | |||
} | |||
#mynetwork { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
// Called on page load | |||
function draw() { | |||
var nodes = [ | |||
{id: 1, label: 'dashed\nline\nexamples'}, | |||
{id: 2, label: 'default'}, | |||
{id: 3, label: 'dashes: [20, 20]'}, | |||
{id: 4, label: 'dashes: [20, 5]'}, | |||
{id: 5, label: 'dashes: [5, 20]'}, | |||
{id: 6, label: 'dashes: [20, 5, 5, 5]'} | |||
]; | |||
var edges = [ | |||
{from: 1, to: 2, dashes: true}, | |||
{from: 1, to: 3, dashes: [20, 20]}, | |||
{from: 1, to: 4, dashes: [20, 5]}, | |||
{from: 1, to: 5, dashes: [5, 20]}, | |||
{from: 1, to: 6, dashes: [20, 5, 5, 5]} | |||
]; | |||
// create the network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes: { | |||
shape: 'box' | |||
}, | |||
physics: { | |||
barnesHut: { | |||
springLength: 150 | |||
}, | |||
stabilization: false | |||
} | |||
}; | |||
var network = new vis.Network(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="draw();"> | |||
<p> | |||
This example shows the different options for dashed lines. | |||
</p> | |||
<div id="mynetwork"></div> | |||
</body> | |||
</html> |
@ -1,111 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Fully random nodes clustering</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt sans; | |||
} | |||
#mynetwork { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
var nodes = null; | |||
var edges = null; | |||
var network = null; | |||
function destroy() { | |||
if (network !== null) { | |||
network.destroy(); | |||
network = null; | |||
} | |||
} | |||
function draw() { | |||
destroy(); | |||
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 network | |||
var clusteringOn = document.getElementById('clustering').checked; | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs | |||
clustering: { | |||
enabled: clusteringOn | |||
}, | |||
stabilize: false | |||
}; | |||
network = new vis.Network(container, data, options); | |||
// add event listeners | |||
network.on('select', function(params) { | |||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; | |||
}); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="draw();"> | |||
<h2>Clustering - Fully random network</h2> | |||
<div style="width:700px; font-size:14px; text-align: justify;"> | |||
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="mynetwork"></div> | |||
<p id="selection"></p> | |||
</body> | |||
</html> |
@ -1,138 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Scale free network clustering</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt sans; | |||
} | |||
#mynetwork { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
var nodes = null; | |||
var edges = null; | |||
var network = null; | |||
function destroy() { | |||
if (network !== null) { | |||
network.destroy(); | |||
network = null; | |||
} | |||
} | |||
function draw() { | |||
destroy(); | |||
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-network 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 network | |||
var clusteringOn = document.getElementById('clustering').checked; | |||
var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value); | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
clustering: { | |||
enabled: clusteringOn, | |||
clusterEdgeThreshold: clusterEdgeThreshold | |||
}, | |||
stabilize: false | |||
}; | |||
network = new vis.Network(container, data, options); | |||
// add event listeners | |||
network.on('select', function(params) { | |||
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes; | |||
}); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="draw();"> | |||
<h2>Clustering - Scale-Free-Network</h2> | |||
<div style="width:700px; font-size:14px; text-align: justify;"> | |||
This example shows the randomly generated <b>scale-free-network</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="mynetwork"></div> | |||
<p id="selection"></p> | |||
</body> | |||
</html> |
@ -1,386 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Les miserables</title> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 900px; | |||
height: 900px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script type="text/javascript"> | |||
function draw() { | |||
// create some nodes | |||
var nodes = [ | |||
{id:0,"label":"Myriel","group":1}, | |||
{id:1,"label":"Napoleon","group":1}, | |||
{id:2,"label":"Mlle.Baptistine","group":1}, | |||
{id:3,"label":"Mme.Magloire","group":1}, | |||
{id:4,"label":"CountessdeLo","group":1}, | |||
{id:5,"label":"Geborand","group":1}, | |||
{id:6,"label":"Champtercier","group":1}, | |||
{id:7,"label":"Cravatte","group":1}, | |||
{id:8,"label":"Count","group":1}, | |||
{id:9,"label":"OldMan","group":1}, | |||
{id:10,"label":"Labarre","group":2}, | |||
{id:11,"label":"Valjean","group":2}, | |||
{id:12,"label":"Marguerite","group":3}, | |||
{id:13,"label":"Mme.deR","group":2}, | |||
{id:14,"label":"Isabeau","group":2}, | |||
{id:15,"label":"Gervais","group":2}, | |||
{id:16,"label":"Tholomyes","group":3}, | |||
{id:17,"label":"Listolier","group":3}, | |||
{id:18,"label":"Fameuil","group":3}, | |||
{id:19,"label":"Blacheville","group":3}, | |||
{id:20,"label":"Favourite","group":3}, | |||
{id:21,"label":"Dahlia","group":3}, | |||
{id:22,"label":"Zephine","group":3}, | |||
{id:23,"label":"Fantine","group":3}, | |||
{id:24,"label":"Mme.Thenardier","group":4}, | |||
{id:25,"label":"Thenardier","group":4}, | |||
{id:26,"label":"Cosette","group":5}, | |||
{id:27,"label":"Javert","group":4}, | |||
{id:28,"label":"Fauchelevent","group":0}, | |||
{id:29,"label":"Bamatabois","group":2}, | |||
{id:30,"label":"Perpetue","group":3}, | |||
{id:31,"label":"Simplice","group":2}, | |||
{id:32,"label":"Scaufflaire","group":2}, | |||
{id:33,"label":"Woman1","group":2}, | |||
{id:34,"label":"Judge","group":2}, | |||
{id:35,"label":"Champmathieu","group":2}, | |||
{id:36,"label":"Brevet","group":2}, | |||
{id:37,"label":"Chenildieu","group":2}, | |||
{id:38,"label":"Cochepaille","group":2}, | |||
{id:39,"label":"Pontmercy","group":4}, | |||
{id:40,"label":"Boulatruelle","group":6}, | |||
{id:41,"label":"Eponine","group":4}, | |||
{id:42,"label":"Anzelma","group":4}, | |||
{id:43,"label":"Woman2","group":5}, | |||
{id:44,"label":"MotherInnocent","group":0}, | |||
{id:45,"label":"Gribier","group":0}, | |||
{id:46,"label":"Jondrette","group":7}, | |||
{id:47,"label":"Mme.Burgon","group":7}, | |||
{id:48,"label":"Gavroche","group":8}, | |||
{id:49,"label":"Gillenormand","group":5}, | |||
{id:50,"label":"Magnon","group":5}, | |||
{id:51,"label":"Mlle.Gillenormand","group":5}, | |||
{id:52,"label":"Mme.Pontmercy","group":5}, | |||
{id:53,"label":"Mlle.Vaubois","group":5}, | |||
{id:54,"label":"Lt.Gillenormand","group":5}, | |||
{id:55,"label":"Marius","group":8}, | |||
{id:56,"label":"BaronessT","group":5}, | |||
{id:57,"label":"Mabeuf","group":8}, | |||
{id:58,"label":"Enjolras","group":8}, | |||
{id:59,"label":"Combeferre","group":8}, | |||
{id:60,"label":"Prouvaire","group":8}, | |||
{id:61,"label":"Feuilly","group":8}, | |||
{id:62,"label":"Courfeyrac","group":8}, | |||
{id:63,"label":"Bahorel","group":8}, | |||
{id:64,"label":"Bossuet","group":8}, | |||
{id:65,"label":"Joly","group":8}, | |||
{id:66,"label":"Grantaire","group":8}, | |||
{id:67,"label":"MotherPlutarch","group":9}, | |||
{id:68,"label":"Gueulemer","group":4}, | |||
{id:69,"label":"Babet","group":4}, | |||
{id:70,"label":"Claquesous","group":4}, | |||
{id:71,"label":"Montparnasse","group":4}, | |||
{id:72,"label":"Toussaint","group":5}, | |||
{id:73,"label":"Child1","group":10}, | |||
{id:74,"label":"Child2","group":10}, | |||
{id:75,"label":"Brujon","group":4}, | |||
{id:76,"label":"Mme.Hucheloup","group":8} | |||
]; | |||
// create some edges | |||
var edges = [ | |||
{"from":1,"to":0}, | |||
{"from":2,"to":0}, | |||
{"from":3,"to":0}, | |||
{"from":3,"to":2}, | |||
{"from":4,"to":0}, | |||
{"from":5,"to":0}, | |||
{"from":6,"to":0}, | |||
{"from":7,"to":0}, | |||
{"from":8,"to":0}, | |||
{"from":9,"to":0}, | |||
{"from":11,"to":10}, | |||
{"from":11,"to":3}, | |||
{"from":11,"to":2}, | |||
{"from":11,"to":0}, | |||
{"from":12,"to":11}, | |||
{"from":13,"to":11}, | |||
{"from":14,"to":11}, | |||
{"from":15,"to":11}, | |||
{"from":17,"to":16}, | |||
{"from":18,"to":16}, | |||
{"from":18,"to":17}, | |||
{"from":19,"to":16}, | |||
{"from":19,"to":17}, | |||
{"from":19,"to":18}, | |||
{"from":20,"to":16}, | |||
{"from":20,"to":17}, | |||
{"from":20,"to":18}, | |||
{"from":20,"to":19}, | |||
{"from":21,"to":16}, | |||
{"from":21,"to":17}, | |||
{"from":21,"to":18}, | |||
{"from":21,"to":19}, | |||
{"from":21,"to":20}, | |||
{"from":22,"to":16}, | |||
{"from":22,"to":17}, | |||
{"from":22,"to":18}, | |||
{"from":22,"to":19}, | |||
{"from":22,"to":20}, | |||
{"from":22,"to":21}, | |||
{"from":23,"to":16}, | |||
{"from":23,"to":17}, | |||
{"from":23,"to":18}, | |||
{"from":23,"to":19}, | |||
{"from":23,"to":20}, | |||
{"from":23,"to":21}, | |||
{"from":23,"to":22}, | |||
{"from":23,"to":12}, | |||
{"from":23,"to":11}, | |||
{"from":24,"to":23}, | |||
{"from":24,"to":11}, | |||
{"from":25,"to":24}, | |||
{"from":25,"to":23}, | |||
{"from":25,"to":11}, | |||
{"from":26,"to":24}, | |||
{"from":26,"to":11}, | |||
{"from":26,"to":16}, | |||
{"from":26,"to":25}, | |||
{"from":27,"to":11}, | |||
{"from":27,"to":23}, | |||
{"from":27,"to":25}, | |||
{"from":27,"to":24}, | |||
{"from":27,"to":26}, | |||
{"from":28,"to":11}, | |||
{"from":28,"to":27}, | |||
{"from":29,"to":23}, | |||
{"from":29,"to":27}, | |||
{"from":29,"to":11}, | |||
{"from":30,"to":23}, | |||
{"from":31,"to":30}, | |||
{"from":31,"to":11}, | |||
{"from":31,"to":23}, | |||
{"from":31,"to":27}, | |||
{"from":32,"to":11}, | |||
{"from":33,"to":11}, | |||
{"from":33,"to":27}, | |||
{"from":34,"to":11}, | |||
{"from":34,"to":29}, | |||
{"from":35,"to":11}, | |||
{"from":35,"to":34}, | |||
{"from":35,"to":29}, | |||
{"from":36,"to":34}, | |||
{"from":36,"to":35}, | |||
{"from":36,"to":11}, | |||
{"from":36,"to":29}, | |||
{"from":37,"to":34}, | |||
{"from":37,"to":35}, | |||
{"from":37,"to":36}, | |||
{"from":37,"to":11}, | |||
{"from":37,"to":29}, | |||
{"from":38,"to":34}, | |||
{"from":38,"to":35}, | |||
{"from":38,"to":36}, | |||
{"from":38,"to":37}, | |||
{"from":38,"to":11}, | |||
{"from":38,"to":29}, | |||
{"from":39,"to":25}, | |||
{"from":40,"to":25}, | |||
{"from":41,"to":24}, | |||
{"from":41,"to":25}, | |||
{"from":42,"to":41}, | |||
{"from":42,"to":25}, | |||
{"from":42,"to":24}, | |||
{"from":43,"to":11}, | |||
{"from":43,"to":26}, | |||
{"from":43,"to":27}, | |||
{"from":44,"to":28}, | |||
{"from":44,"to":11}, | |||
{"from":45,"to":28}, | |||
{"from":47,"to":46}, | |||
{"from":48,"to":47}, | |||
{"from":48,"to":25}, | |||
{"from":48,"to":27}, | |||
{"from":48,"to":11}, | |||
{"from":49,"to":26}, | |||
{"from":49,"to":11}, | |||
{"from":50,"to":49}, | |||
{"from":50,"to":24}, | |||
{"from":51,"to":49}, | |||
{"from":51,"to":26}, | |||
{"from":51,"to":11}, | |||
{"from":52,"to":51}, | |||
{"from":52,"to":39}, | |||
{"from":53,"to":51}, | |||
{"from":54,"to":51}, | |||
{"from":54,"to":49}, | |||
{"from":54,"to":26}, | |||
{"from":55,"to":51}, | |||
{"from":55,"to":49}, | |||
{"from":55,"to":39}, | |||
{"from":55,"to":54}, | |||
{"from":55,"to":26}, | |||
{"from":55,"to":11}, | |||
{"from":55,"to":16}, | |||
{"from":55,"to":25}, | |||
{"from":55,"to":41}, | |||
{"from":55,"to":48}, | |||
{"from":56,"to":49}, | |||
{"from":56,"to":55}, | |||
{"from":57,"to":55}, | |||
{"from":57,"to":41}, | |||
{"from":57,"to":48}, | |||
{"from":58,"to":55}, | |||
{"from":58,"to":48}, | |||
{"from":58,"to":27}, | |||
{"from":58,"to":57}, | |||
{"from":58,"to":11}, | |||
{"from":59,"to":58}, | |||
{"from":59,"to":55}, | |||
{"from":59,"to":48}, | |||
{"from":59,"to":57}, | |||
{"from":60,"to":48}, | |||
{"from":60,"to":58}, | |||
{"from":60,"to":59}, | |||
{"from":61,"to":48}, | |||
{"from":61,"to":58}, | |||
{"from":61,"to":60}, | |||
{"from":61,"to":59}, | |||
{"from":61,"to":57}, | |||
{"from":61,"to":55}, | |||
{"from":62,"to":55}, | |||
{"from":62,"to":58}, | |||
{"from":62,"to":59}, | |||
{"from":62,"to":48}, | |||
{"from":62,"to":57}, | |||
{"from":62,"to":41}, | |||
{"from":62,"to":61}, | |||
{"from":62,"to":60}, | |||
{"from":63,"to":59}, | |||
{"from":63,"to":48}, | |||
{"from":63,"to":62}, | |||
{"from":63,"to":57}, | |||
{"from":63,"to":58}, | |||
{"from":63,"to":61}, | |||
{"from":63,"to":60}, | |||
{"from":63,"to":55}, | |||
{"from":64,"to":55}, | |||
{"from":64,"to":62}, | |||
{"from":64,"to":48}, | |||
{"from":64,"to":63}, | |||
{"from":64,"to":58}, | |||
{"from":64,"to":61}, | |||
{"from":64,"to":60}, | |||
{"from":64,"to":59}, | |||
{"from":64,"to":57}, | |||
{"from":64,"to":11}, | |||
{"from":65,"to":63}, | |||
{"from":65,"to":64}, | |||
{"from":65,"to":48}, | |||
{"from":65,"to":62}, | |||
{"from":65,"to":58}, | |||
{"from":65,"to":61}, | |||
{"from":65,"to":60}, | |||
{"from":65,"to":59}, | |||
{"from":65,"to":57}, | |||
{"from":65,"to":55}, | |||
{"from":66,"to":64}, | |||
{"from":66,"to":58}, | |||
{"from":66,"to":59}, | |||
{"from":66,"to":62}, | |||
{"from":66,"to":65}, | |||
{"from":66,"to":48}, | |||
{"from":66,"to":63}, | |||
{"from":66,"to":61}, | |||
{"from":66,"to":60}, | |||
{"from":67,"to":57}, | |||
{"from":68,"to":25}, | |||
{"from":68,"to":11}, | |||
{"from":68,"to":24}, | |||
{"from":68,"to":27}, | |||
{"from":68,"to":48}, | |||
{"from":68,"to":41}, | |||
{"from":69,"to":25}, | |||
{"from":69,"to":68}, | |||
{"from":69,"to":11}, | |||
{"from":69,"to":24}, | |||
{"from":69,"to":27}, | |||
{"from":69,"to":48}, | |||
{"from":69,"to":41}, | |||
{"from":70,"to":25}, | |||
{"from":70,"to":69}, | |||
{"from":70,"to":68}, | |||
{"from":70,"to":11}, | |||
{"from":70,"to":24}, | |||
{"from":70,"to":27}, | |||
{"from":70,"to":41}, | |||
{"from":70,"to":58}, | |||
{"from":71,"to":27}, | |||
{"from":71,"to":69}, | |||
{"from":71,"to":68}, | |||
{"from":71,"to":70}, | |||
{"from":71,"to":11}, | |||
{"from":71,"to":48}, | |||
{"from":71,"to":41}, | |||
{"from":71,"to":25}, | |||
{"from":72,"to":26}, | |||
{"from":72,"to":27}, | |||
{"from":72,"to":11}, | |||
{"from":73,"to":48}, | |||
{"from":74,"to":48}, | |||
{"from":74,"to":73}, | |||
{"from":75,"to":69}, | |||
{"from":75,"to":68}, | |||
{"from":75,"to":25}, | |||
{"from":75,"to":48}, | |||
{"from":75,"to":41}, | |||
{"from":75,"to":70}, | |||
{"from":75,"to":71}, | |||
{"from":76,"to":64}, | |||
{"from":76,"to":65}, | |||
{"from":76,"to":66}, | |||
{"from":76,"to":63}, | |||
{"from":76,"to":62}, | |||
{"from":76,"to":48}, | |||
{"from":76,"to":58} | |||
]; | |||
// create a network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes: { | |||
shape: 'dot', | |||
size: 16 | |||
}, | |||
physics: { | |||
stabilization: false | |||
} | |||
}; | |||
var network = new vis.Network(container, data, options); | |||
} | |||
</script> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="draw()"> | |||
<p> | |||
Relations between the characters of "Les miserables". | |||
</p> | |||
<div id="mynetwork"></div> | |||
</body> | |||
</html> |
@ -1,115 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Static smooth curves</title> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 400px; | |||
height: 400px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body> | |||
<h2>Static smooth curves</h2> | |||
<div style="width:700px; font-size:14px; text-align: justify;"> | |||
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a | |||
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal | |||
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected | |||
nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different | |||
types. <br /> <br /> | |||
Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we | |||
recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind | |||
that the direction (the from and to) of the curve matters. | |||
<br /> <br /> | |||
</div> | |||
<p> | |||
Smooth curve type: | |||
<select id="dropdownID"> | |||
<option value="continuous" selected="selected">continuous</option> | |||
<option value="discrete">discrete</option> | |||
<option value="diagonalCross">diagonalCross</option> | |||
<option value="straightCross">straightCross</option> | |||
<option value="horizontal">horizontal</option> | |||
<option value="vertical">vertical</option> | |||
<option value="curvedCW">curvedCW</option> | |||
<option value="curvedCCW">curvedCCW</option> | |||
</select> | |||
</p> | |||
<p> | |||
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" style="width:200px" id="roundnessSlider"> <input id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others) | |||
</p> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
var dropdown = document.getElementById("dropdownID"); | |||
dropdown.onchange = update; | |||
var roundnessSlider = document.getElementById("roundnessSlider"); | |||
roundnessSlider.onchange = update; | |||
var roundnessScreen = document.getElementById("roundnessScreen"); | |||
// create an array with nodes | |||
var nodes = [ | |||
{id: 1, label: 'Node 1'}, | |||
{id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true} | |||
]; | |||
// create an array with edges | |||
var edges = [ | |||
{from: 1, to: 2, style:"arrow"} | |||
]; | |||
// create a network | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
physics:{ | |||
barnesHut: { | |||
gravitationalConstant:0, | |||
springConstant:0, | |||
centralGravity: 0 | |||
} | |||
}, | |||
edges: { | |||
smooth: { | |||
dynamic: false, | |||
type: '1' | |||
} | |||
} | |||
}; | |||
var network = new vis.Network(container, data, options); | |||
function update() { | |||
var type = dropdown.value; | |||
var roundness = parseFloat(roundnessSlider.value); | |||
roundnessScreen.value = roundness; | |||
var options = { | |||
edges: { | |||
smooth: { | |||
type: type, | |||
roundness: roundness | |||
} | |||
} | |||
}; | |||
network.setOptions(options); | |||
} | |||
update(); | |||
</script> | |||
</body> | |||
</html> |
@ -1,156 +0,0 @@ | |||
<!doctype html> | |||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> | |||
<html> | |||
<head> | |||
<meta http-equiv="content-type" content="text/html; charset=UTF8"> | |||
<title>Network | Static smooth curves - World Cup Network</title> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link type="text/css" rel="stylesheet" href="../../dist/vis.css"> | |||
<script src="./data/WorldCup2014.js"></script> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 800px; | |||
height: 800px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body> | |||
<h2>Static smooth curves - World Cup Network</h2> | |||
<div style="width:700px; font-size:14px;"> | |||
The static smooth curves are based only on the positions of the connected | |||
nodes. | |||
There are multiple ways to determine the way this curve is drawn. | |||
This example shows the effect of the different types on a large network. | |||
<br/> <br/> | |||
Also shown in this example is the inheritColor option of the edges as well as | |||
the roundness factor. <br/> | |||
<br/><br/> | |||
To improve performance, the physics have been disabled with: | |||
<br/><code>{barnesHut: {gravitationalConstant: 0, centralGravity: 0, | |||
springConstant: 0}}</code><br/> and we have enabled | |||
the toggle hideEdgesOnDrag. | |||
<br/><br/> | |||
</div> | |||
Smooth curve type: | |||
<select id="dropdownID"> | |||
<option value="continuous">continuous</option> | |||
<option value="discrete">discrete</option> | |||
<option value="diagonalCross">diagonalCross</option> | |||
<option value="straightCross">straightCross</option> | |||
<option value="horizontal">horizontal</option> | |||
<option value="vertical">vertical</option> | |||
<option value="curvedCW">curvedCW</option> | |||
<option value="curvedCCW">curvedCCW</option> | |||
</select><br/> | |||
inheritColor option: | |||
<select id="inheritColor"> | |||
<option value="from">from / true</option> | |||
<option value="to">to</option> | |||
<option value="false">false</option> | |||
</select><br/> | |||
Roundness (0..1): <input type="range" min="0" max="1" value="0.5" step="0.05" | |||
style="width:200px" id="roundnessSlider"> <input | |||
id="roundnessScreen" value="0.5"> (0.5 is max roundness for continuous, 1.0 | |||
for the others) | |||
<br/> | |||
Hide edges on drag: <input type="checkbox" checked="checked" | |||
id="hideEdgesOnDrag" /><br/> | |||
Hide nodes on drag: <input type="checkbox" id="hideNodesOnDrag" /> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
var dropdown = document.getElementById("dropdownID"); | |||
dropdown.onchange = update; | |||
var roundnessSlider = document.getElementById("roundnessSlider"); | |||
roundnessSlider.onchange = update; | |||
var roundnessScreen = document.getElementById("roundnessScreen"); | |||
var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag"); | |||
hideEdgesOnDrag.onchange = update; | |||
var hideNodesOnDrag = document.getElementById("hideNodesOnDrag"); | |||
hideNodesOnDrag.onchange = update; | |||
var inheritColor = document.getElementById("inheritColor"); | |||
inheritColor.onchange = redrawAll; | |||
var network; | |||
function redrawAll() { | |||
network = null; | |||
var inheritColorVal = inheritColor.value; | |||
var container = document.getElementById('mynetwork'); | |||
var options = { | |||
nodes: { | |||
shape: 'dot', | |||
scaling: { | |||
min: 10, | |||
max: 30 | |||
}, | |||
font: { | |||
size: 12, | |||
face: 'Tahoma' | |||
} | |||
}, | |||
edges: { | |||
width: 0.15, | |||
color: { | |||
inherit: (inheritColorVal == 'false') ? false : inheritColorVal | |||
}, | |||
smooth: { | |||
dynamic: false, | |||
type: 'continuous' | |||
} | |||
}, | |||
interaction: { | |||
tooltipDelay: 200 | |||
}, | |||
rendering: { | |||
hideEdgesOnDrag: true | |||
}, | |||
physics: false | |||
}; | |||
// Note: data is coming from ./data/WorldCup2014.js | |||
network = new vis.Network(container, data, options); | |||
} | |||
function update() { | |||
var type = dropdown.value; | |||
var roundness = parseFloat(roundnessSlider.value); | |||
roundnessScreen.value = roundness; | |||
var options = { | |||
edges: { | |||
smooth: { | |||
type: type, | |||
roundness: roundness | |||
} | |||
}, | |||
rendering: { | |||
hideEdgesOnDrag: hideEdgesOnDrag.checked, | |||
hideNodesOnDrag: hideNodesOnDrag.checked | |||
} | |||
}; | |||
network.setOptions(options); | |||
} | |||
redrawAll() | |||
</script> | |||
</body> | |||
</html> |
@ -1,222 +0,0 @@ | |||
<!DOCTYPE html> | |||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> | |||
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF8"> | |||
<title>Network | Static smooth curves - World Cup Network</title> | |||
<script type="text/javascript" src="../../dist/vis.js"></script> | |||
<link type="text/css" rel="stylesheet" href="../../dist/vis.css"> | |||
<script src="./data/WorldCup2014.js"></script> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 800px; | |||
height: 800px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script src="../googleAnalytics.js"></script> | |||
</head> | |||
<body> | |||
<h2>Dynamic Data - Neighbourhood Highlight</h2> | |||
<div style="width:800px; font-size:14px;"> | |||
This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes. | |||
In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not | |||
they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..). | |||
<br /><br /> | |||
</div> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
var network; | |||
var nodes = new vis.DataSet(); | |||
var edges = new vis.DataSet(); | |||
function redrawAll() { | |||
nodes.clear(); | |||
edges.clear(); | |||
network = null; | |||
var container = document.getElementById('mynetwork'); | |||
var options = { | |||
nodes: { | |||
shape: 'dot', | |||
scaling: { | |||
min: 10, | |||
max: 30, | |||
label: { | |||
min: 8, | |||
max: 20, | |||
drawThreshold: 12, | |||
maxVisible: 20 | |||
} | |||
}, | |||
font: { | |||
size: 12, | |||
face: 'Tahoma' | |||
} | |||
}, | |||
edges: { | |||
width: 0.15, | |||
color: {inherit: 'from'}, | |||
smooth: { | |||
dynamic: false, | |||
type: 'continuous' | |||
} | |||
}, | |||
physics: false, | |||
interaction: { | |||
tooltipDelay: 200 | |||
}, | |||
rendering: { | |||
hideEdgesOnDrag: true | |||
} | |||
}; | |||
// Note: data is coming from ./data/WorldCup2014.js | |||
network = new vis.Network(container, data, options); | |||
network.on("click",onClick); | |||
} | |||
function onClick(selectedItems) { | |||
var nodeId; | |||
var degrees = 2; | |||
// we get all data from the dataset once to avoid updating multiple times. | |||
var allNodes = nodes.get({returnType:"Object"}); | |||
if (selectedItems.nodes.length == 0) { | |||
// restore on unselect | |||
for (nodeId in allNodes) { | |||
if (allNodes.hasOwnProperty(nodeId)) { | |||
allNodes[nodeId].color = undefined; | |||
if (allNodes[nodeId].oldLabel !== undefined) { | |||
allNodes[nodeId].label = allNodes[nodeId].oldLabel; | |||
allNodes[nodeId].oldLabel = undefined; | |||
} | |||
allNodes[nodeId]['levelOfSeperation'] = undefined; | |||
allNodes[nodeId]['inConnectionList'] = undefined; | |||
} | |||
} | |||
} | |||
else { | |||
// we clear the level of separation in all nodes. | |||
clearLevelOfSeperation(allNodes); | |||
// we will now start to collect all the connected nodes we want to highlight. | |||
var connectedNodes = selectedItems.nodes; | |||
// we can store them into levels of separation and we could then later use this to define a color per level | |||
// any data can be added to a node, this is just stored in the nodeObject. | |||
storeLevelOfSeperation(connectedNodes,0, allNodes); | |||
for (var i = 1; i < degrees + 1; i++) { | |||
appendConnectedNodes(connectedNodes); | |||
storeLevelOfSeperation(connectedNodes, i, allNodes); | |||
} | |||
for (nodeId in allNodes) { | |||
if (allNodes.hasOwnProperty(nodeId)) { | |||
if (allNodes[nodeId]['inConnectionList'] == true) { | |||
if (allNodes[nodeId]['levelOfSeperation'] !== undefined) { | |||
if (allNodes[nodeId]['levelOfSeperation'] >= 2) { | |||
allNodes[nodeId].color = 'rgba(150,150,150,0.75)'; | |||
} | |||
else { | |||
allNodes[nodeId].color = undefined; | |||
} | |||
} | |||
else { | |||
allNodes[nodeId].color = undefined; | |||
} | |||
if (allNodes[nodeId].oldLabel !== undefined) { | |||
allNodes[nodeId].label = allNodes[nodeId].oldLabel; | |||
allNodes[nodeId].oldLabel = undefined; | |||
} | |||
} | |||
else { | |||
allNodes[nodeId].color = 'rgba(200,200,200,0.5)'; | |||
if (allNodes[nodeId].oldLabel === undefined) { | |||
allNodes[nodeId].oldLabel = allNodes[nodeId].label; | |||
allNodes[nodeId].label = ''; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
var updateArray = []; | |||
for (nodeId in allNodes) { | |||
if (allNodes.hasOwnProperty(nodeId)) { | |||
updateArray.push(allNodes[nodeId]); | |||
} | |||
} | |||
nodes.update(updateArray); | |||
} | |||
/** | |||
* update the allNodes object with the level of separation. | |||
* Arrays are passed by reference, we do not need to return them because we are working in the same object. | |||
*/ | |||
function storeLevelOfSeperation(connectedNodes, level, allNodes) { | |||
for (var i = 0; i < connectedNodes.length; i++) { | |||
var nodeId = connectedNodes[i]; | |||
if (allNodes[nodeId]['levelOfSeperation'] === undefined) { | |||
allNodes[nodeId]['levelOfSeperation'] = level; | |||
} | |||
allNodes[nodeId]['inConnectionList'] = true; | |||
} | |||
} | |||
function clearLevelOfSeperation(allNodes) { | |||
for (var nodeId in allNodes) { | |||
if (allNodes.hasOwnProperty(nodeId)) { | |||
allNodes[nodeId]['levelOfSeperation'] = undefined; | |||
allNodes[nodeId]['inConnectionList'] = undefined; | |||
} | |||
} | |||
} | |||
/** | |||
* Add the connected nodes to the list of nodes we already have | |||
* | |||
* | |||
*/ | |||
function appendConnectedNodes(sourceNodes) { | |||
var tempSourceNodes = []; | |||
// first we make a copy of the nodes so we do not extend the array we loop over. | |||
for (var i = 0; i < sourceNodes.length; i++) { | |||
tempSourceNodes.push(sourceNodes[i]) | |||
} | |||
for (var i = 0; i < tempSourceNodes.length; i++) { | |||
var nodeId = tempSourceNodes[i]; | |||
if (sourceNodes.indexOf(nodeId) == -1) { | |||
sourceNodes.push(nodeId); | |||
} | |||
var connectedNodes = network.getConnectedNodes(nodeId); | |||
addUnique(connectedNodes,sourceNodes); | |||
} | |||
tempSourceNodes = null; | |||
} | |||
/** | |||
* Join two arrays without duplicates | |||
* @param fromArray | |||
* @param toArray | |||
*/ | |||
function addUnique(fromArray, toArray) { | |||
for (var i = 0; i < fromArray.length; i++) { | |||
if (toArray.indexOf(fromArray[i]) == -1) { | |||
toArray.push(fromArray[i]); | |||
} | |||
} | |||
} | |||
redrawAll() | |||
</script> | |||
</body></html> |
@ -0,0 +1,97 @@ | |||
<!doctype html> | |||
<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!--> | |||
<html> | |||
<head> | |||
<meta http-equiv="content-type" content="text/html; charset=UTF8"> | |||
<title>Network | Static smooth curves - World Cup Network</title> | |||
<script type="text/javascript" src="../../../../dist/vis.js"></script> | |||
<link type="text/css" rel="stylesheet" href="../../../../dist/vis.css"> | |||
<script src="../../data/WorldCup2014.js"></script> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 800px; | |||
height: 800px; | |||
border: 1px solid lightgray; | |||
} | |||
#optionsContainer { | |||
height:280px; | |||
} | |||
</style> | |||
<script src="../../../googleAnalytics.js"></script> | |||
</head> | |||
<body> | |||
<h2>Static smooth curves - World Cup Network</h2> | |||
<div style="width:700px; font-size:14px;"> | |||
The static smooth curves are based only on the positions of the connected | |||
nodes. | |||
There are multiple ways to determine the way this curve is drawn. | |||
This example shows the effect of the different types on a large network. | |||
<br/> <br/> | |||
Also shown in this example is the inheritColor option of the edges as well as | |||
the roundness factor. Because the physics has been disabled, the dynamic smooth curves do not work here. | |||
</div> | |||
<div id="optionsContainer"></div> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
var network; | |||
function redrawAll() { | |||
var container = document.getElementById('mynetwork'); | |||
var options = { | |||
nodes: { | |||
shape: 'dot', | |||
scaling: { | |||
min: 10, | |||
max: 30 | |||
}, | |||
font: { | |||
size: 12, | |||
face: 'Tahoma' | |||
} | |||
}, | |||
edges: { | |||
color:{inherit:true}, | |||
width: 0.15, | |||
smooth: { | |||
type: 'continuous' | |||
} | |||
}, | |||
interaction: { | |||
hideEdgesOnDrag: true, | |||
tooltipDelay: 200 | |||
}, | |||
configure: { | |||
filter: function (option, path) { | |||
if (option === 'inherit') {return true;} | |||
if (option === 'type' && path.indexOf("smooth") !== -1) {return true;} | |||
if (option === 'roundness') {return true;} | |||
if (option === 'hideEdgesOnDrag') {return true;} | |||
if (option === 'hideNodesOnDrag') {return true;} | |||
return false; | |||
}, | |||
container: document.getElementById('optionsContainer'), | |||
showButton: false | |||
}, | |||
physics: false | |||
}; | |||
var data = {nodes:nodes, edges:edges}; | |||
// Note: data is coming from ./data/WorldCup2014.js | |||
network = new vis.Network(container, data, options); | |||
} | |||
redrawAll() | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,396 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | Les miserables</title> | |||
<style type="text/css"> | |||
#mynetwork { | |||
width: 900px; | |||
height: 900px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../../../dist/vis.js"></script> | |||
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/> | |||
<script type="text/javascript"> | |||
function draw() { | |||
// create some nodes | |||
var nodes = [ | |||
{id: 0, "label": "Myriel", "group": 1}, | |||
{id: 1, "label": "Napoleon", "group": 1}, | |||
{id: 2, "label": "Mlle.Baptistine", "group": 1}, | |||
{id: 3, "label": "Mme.Magloire", "group": 1}, | |||
{id: 4, "label": "CountessdeLo", "group": 1}, | |||
{id: 5, "label": "Geborand", "group": 1}, | |||
{id: 6, "label": "Champtercier", "group": 1}, | |||
{id: 7, "label": "Cravatte", "group": 1}, | |||
{id: 8, "label": "Count", "group": 1}, | |||
{id: 9, "label": "OldMan", "group": 1}, | |||
{id: 10, "label": "Labarre", "group": 2}, | |||
{id: 11, "label": "Valjean", "group": 2}, | |||
{id: 12, "label": "Marguerite", "group": 3}, | |||
{id: 13, "label": "Mme.deR", "group": 2}, | |||
{id: 14, "label": "Isabeau", "group": 2}, | |||
{id: 15, "label": "Gervais", "group": 2}, | |||
{id: 16, "label": "Tholomyes", "group": 3}, | |||
{id: 17, "label": "Listolier", "group": 3}, | |||
{id: 18, "label": "Fameuil", "group": 3}, | |||
{id: 19, "label": "Blacheville", "group": 3}, | |||
{id: 20, "label": "Favourite", "group": 3}, | |||
{id: 21, "label": "Dahlia", "group": 3}, | |||
{id: 22, "label": "Zephine", "group": 3}, | |||
{id: 23, "label": "Fantine", "group": 3}, | |||
{id: 24, "label": "Mme.Thenardier", "group": 4}, | |||
{id: 25, "label": "Thenardier", "group": 4}, | |||
{id: 26, "label": "Cosette", "group": 5}, | |||
{id: 27, "label": "Javert", "group": 4}, | |||
{id: 28, "label": "Fauchelevent", "group": 0}, | |||
{id: 29, "label": "Bamatabois", "group": 2}, | |||
{id: 30, "label": "Perpetue", "group": 3}, | |||
{id: 31, "label": "Simplice", "group": 2}, | |||
{id: 32, "label": "Scaufflaire", "group": 2}, | |||
{id: 33, "label": "Woman1", "group": 2}, | |||
{id: 34, "label": "Judge", "group": 2}, | |||
{id: 35, "label": "Champmathieu", "group": 2}, | |||
{id: 36, "label": "Brevet", "group": 2}, | |||
{id: 37, "label": "Chenildieu", "group": 2}, | |||
{id: 38, "label": "Cochepaille", "group": 2}, | |||
{id: 39, "label": "Pontmercy", "group": 4}, | |||
{id: 40, "label": "Boulatruelle", "group": 6}, | |||
{id: 41, "label": "Eponine", "group": 4}, | |||
{id: 42, "label": "Anzelma", "group": 4}, | |||
{id: 43, "label": "Woman2", "group": 5}, | |||
{id: 44, "label": "MotherInnocent", "group": 0}, | |||
{id: 45, "label": "Gribier", "group": 0}, | |||
{id: 46, "label": "Jondrette", "group": 7}, | |||
{id: 47, "label": "Mme.Burgon", "group": 7}, | |||
{id: 48, "label": "Gavroche", "group": 8}, | |||
{id: 49, "label": "Gillenormand", "group": 5}, | |||
{id: 50, "label": "Magnon", "group": 5}, | |||
{id: 51, "label": "Mlle.Gillenormand", "group": 5}, | |||
{id: 52, "label": "Mme.Pontmercy", "group": 5}, | |||
{id: 53, "label": "Mlle.Vaubois", "group": 5}, | |||
{id: 54, "label": "Lt.Gillenormand", "group": 5}, | |||
{id: 55, "label": "Marius", "group": 8}, | |||
{id: 56, "label": "BaronessT", "group": 5}, | |||
{id: 57, "label": "Mabeuf", "group": 8}, | |||
{id: 58, "label": "Enjolras", "group": 8}, | |||
{id: 59, "label": "Combeferre", "group": 8}, |