Changes for v22.0.0.OS

This commit is contained in:
Thilina Hasantha
2018-04-28 03:04:36 +02:00
parent d105ee3512
commit 8ebf28fbcb
471 changed files with 160244 additions and 293 deletions

View File

@@ -0,0 +1,56 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 3, to: 3}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,140 @@
<!doctype html>
<html>
<head>
<title>Network | Dynamic Data</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
h4 {
margin-bottom:3px;
}
</style>
</head>
<p>
You can change any settings you want while the network is initialized using the vis Dataset, setOptions and setData. Finally you can destroy the network and completely reinitialize it.
</p>
<h4>DataSet (change the data while it's loaded and initialzed):</h4>
<input type="button" onclick="addNode()" value="add node dynamically"> <br />
<input type="button" onclick="changeNode1()" value="change node 1's color dynamically"> <br />
<input type="button" onclick="removeRandomNode()" value="remove a random Node"> <br />
<input type="button" onclick="resetAllNodes()" value="reload all nodes"> <br />
<input type="button" onclick="resetAllNodesStabilize()" value="reload all nodes and stabilize"> <br />
<h4>setOptions (change the global options):</h4>
<input type="button" onclick="changeOptions()" value="change the global options"><br />
<h4>setData (reinitialize the data): </h4>
<input type="button" onclick="setTheData()" value="setData. This stabilizes again if stabilization is true."><br />
<h4>Cleanly destroy the network and restart it:</h4>
<input type="button" onclick="resetAll()" value="Destroy the network and restart it."><br />
<div id="mynetwork"></div>
<script type="text/javascript">
var nodeIds, shadowState, nodesArray, nodes, edgesArray, edges, network;
function startNetwork() {
// this list is kept to remove a random node.. we do not add node 1 here because it's used for changes
nodeIds = [2, 3, 4, 5];
shadowState = false;
// create an array with nodes
nodesArray = [
{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'}
];
nodes = new vis.DataSet(nodesArray);
// create an array with edges
edgesArray = [
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
];
edges = new vis.DataSet(edgesArray);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
function addNode() {
var newId = (Math.random() * 1e7).toString(32);
nodes.add({id:newId, label:"I'm new!"});
nodeIds.push(newId);
}
function changeNode1() {
var newColor = '#' + Math.floor((Math.random() * 255 * 255 * 255)).toString(16);
nodes.update([{id:1, color:{background:newColor}}]);
}
function removeRandomNode() {
var randomNodeId = nodeIds[Math.floor(Math.random() * nodeIds.length)];
nodes.remove({id:randomNodeId});
var index = nodeIds.indexOf(randomNodeId);
nodeIds.splice(index,1);
}
function changeOptions() {
shadowState = !shadowState;
network.setOptions({nodes:{shadow:shadowState},edges:{shadow:shadowState}});
}
function resetAllNodes() {
nodes.clear();
edges.clear();
nodes.add(nodesArray);
edges.add(edgesArray);
}
function resetAllNodesStabilize() {
resetAllNodes();
network.stabilize();
}
function setTheData() {
nodes = new vis.DataSet(nodesArray);
edges = new vis.DataSet(edgesArray);
network.setData({nodes:nodes, edges:edges})
}
function resetAll() {
if (network !== null) {
network.destroy();
network = null;
}
startNetwork();
}
startNetwork();
</script>
</body>
</html>

View File

@@ -0,0 +1,23 @@
digraph G {
// note: not all attributes are recognized and supported by Network
// unrecognized attributes are ignored
node[width=.25,height=.375,fontsize=15]
node [shape=filled color=#FF00FF fillcolor=#F1AAF0]
0-> 0 ;
1-> 1 ;
2-> 2 ;
3-> 3 ;
4-> 4 ;
5-> 5 ;
6-> 6 ;
7-> 5 ;
8-> 8 ;
9-> 9 ;
10-> 10 ;
11-> 10 ;
12-> 12 ;
13-> 5 ;
14-> 10 ;
15-> 0 ;
}

View File

@@ -0,0 +1,19 @@
digraph topology
{
node[shape=circle fontsize=12]
edge[length=170 fontsize=12]
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.2"[label="1.000"];
"10.0.255.1" -> "10.0.255.3"[label="1.000"];
"10.0.255.2" -> "10.0.255.1"[label="1.000"];
"10.0.255.2" -> "10.0.255.3"[label="1.000"];
"10.0.255.3" -> "10.0.255.1"[label="1.000"];
"10.0.255.3" -> "10.0.255.2"[label="1.000"];
"10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
"10.0.3.0/24"[shape=box];
"10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
"10.0.2.0/24"[shape=box];
"10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
"10.0.1.0/24"[shape=box];
}

View File

@@ -0,0 +1,15 @@
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}

View File

@@ -0,0 +1,197 @@
<!doctype html>
<html>
<head>
<title>Network | DOT edge styles</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw, #reset {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1>DOT edge styles</h1>
<div>
<p>
Example of edge styles support
</p>
<ul>
<li> label: text displayed on the edge</li>
<li> color: edge color</li>
<li> style: edge style is solid(default), dashed or dotted</li>
</ul>
</div>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<button id="reset" title="Reset the DOT graph">Reset</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
var dotDefault = "digraph {\n" +
" Parent -> C1[label=\"default\"]; // Default style is solid \n" +
" Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
" Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
" Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
"}";
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('#reset').click(reset);
$(window).resize(resize);
$(window).load(draw);
$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
function reset() {
$('#data').val(dotDefault);
draw();
}
window.onload = function() {
reset();
}
</script>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<html>
<head>
<title>Network | DOT Language</title>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
Network supports the DOT language.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var dot = 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var data = vis.network.convertDot(dot);
var network = new vis.Network(container, data);
</script>
</body>
</html>

View File

@@ -0,0 +1,216 @@
<!doctype html>
<html>
<head>
<title>Network | DOT language playground</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1>DOT language playground</h1>
<p>
Play around with the DOT language in the textarea below, or select one of the following examples:
</p>
<p style="margin-left: 30px;">
<a href="#" class="example" data-url="data/simple.gv.txt">simple</a>,
<a href="#" class="example" data-url="data/computer_network.gv.txt">computer network</a>,
<a href="#" class="example" data-url="data/cellular_automata.gv.txt">cellular automata</a>,
<a href="#" class="example" data-url="graphvizGallery/fsm.gv.txt">fsm *</a>,
<a href="#" class="example" data-url="graphvizGallery/hello.gv.txt">hello *</a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>.
</p>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url)
.done(function(dotData) {
$('#data').val(dotData);
draw();
})
.fail(function () {
$('#error').html('Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.');
resize();
});
});
$(window).resize(resize);
$(window).load(draw);
$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
</script>
</body>
</html>

View File

@@ -0,0 +1,20 @@
digraph finite_state_machine {
rankdir=LR;
size="8,5"
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
node [shape = circle];
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}

View File

@@ -0,0 +1 @@
digraph G {Hello->World}

View File

@@ -0,0 +1,15 @@
graph G {
run -- intr;
intr -- runbl;
runbl -- run;
run -- kernel;
kernel -- zombie;
kernel -- sleep;
kernel -- runmem;
sleep -- swap;
swap -- runswap;
runswap -- new;
runswap -- runmem;
new -- runmem;
sleep -- runmem;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View File

@@ -0,0 +1,512 @@
/*
This is a graphviz-produced layout of the "family tree" of a fraternity and sorority.
Each member in the graph was assigned a "big brother" from one organization and a "big sister" from the other. Blue icons represent Brothers from the fraternity, Pink represents Sisters from the sorority (Purple members are in both organizations - like honoraries.)
Charter members (who can have no parent nodes) are outlined.
...
dot -Tgif -Goverlap=false -o siblings.gif siblings.dot
We're experimenting with different ways of coloring and graphing, but found this the easiest for now. When we have more people in, we might look at different shades depending on generation number -- earlier people would get lighter colors, more recent members darker. Thumbnail images would be an interesting alteration as well.
from Japheth Cleaver
*/
digraph sdsu {
size="36,36";
node [color=grey, style=filled];
node [fontname="Verdana", size="30,30"];
graph [ fontname = "Arial",
fontsize = 36,
style = "bold",
label = "\nKappa Kappa Psi/Tau Beta Sigma\nSan Diego State University\nEta Mu and Zeta Xi Family Tree\n\nto date: November 30th, 2008\n",
ssize = "30,60" ];
"Lori Brede" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=10"];
"Michael Griffith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=24"];
"Amie Holston" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=30"];
"Michael Griffith" -> "Lori Brede"
"Amie Holston" -> "Lori Brede"
"Casey Carter" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=11"];
"Laura De'Armond" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=14"];
"Laura De'Armond" -> "Casey Carter"
"Japheth Cleaver" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=12"];
"Chuk Gawlik" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=22"];
"Stacy Snyder" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=309"];
"Chuk Gawlik" -> "Japheth Cleaver"
"Stacy Snyder" -> "Japheth Cleaver"
"Jillian Clifton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=13"];
"David Guthrie" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=25"];
"David Guthrie" -> "Jillian Clifton"
"Japheth Cleaver" -> "Jillian Clifton"
"Tony Sacco" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=55"];
"Heather Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=59"];
"Tony Sacco" -> "Laura De'Armond"
"Heather Smith" -> "Laura De'Armond"
"Kevin Decker" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=15"];
"Alex Hansen" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=26"];
"Wanda Livelsberger" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=53"];
"Alex Hansen" -> "Kevin Decker"
"Wanda Livelsberger" -> "Kevin Decker"
"Patrick Doerr" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=16"];
"Deanna Jagow" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=23"];
"Alex Hansen" -> "Patrick Doerr"
"Deanna Jagow" -> "Patrick Doerr"
"Lori Asaro" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=178"];
"Mark Pearson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=169"];
"Lori Ball" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=167"];
"Mark Pearson" -> "Lori Asaro"
"Lori Ball" -> "Lori Asaro"
"Ryan Farris" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=18"];
"Rob Reiner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=51"];
"Cindy Teel" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=62"];
"Rob Reiner" -> "Ryan Farris"
"Cindy Teel" -> "Ryan Farris"
"Ginger Palmer" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=180"];
"Mark Newton-John" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=46"];
"Mark Newton-John" -> "Ginger Palmer"
"Matthew FitzGerald" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=19"];
"Mervin Maniago" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=41"];
"Mervin Maniago" -> "Matthew FitzGerald"
"Amie Holston" -> "Matthew FitzGerald"
"Tani Miller" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=195"];
"Mark Pearson" -> "Tani Miller"
"Vienna McMurtry" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=196"];
"Robert Walwick" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=153"];
"Robert Walwick" -> "Vienna McMurtry"
"Ginger Palmer" -> "Vienna McMurtry"
"Chuck Foster" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=20"];
"Karen Saye" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=56"];
"Kevin Decker" -> "Chuck Foster"
"Karen Saye" -> "Chuck Foster"
"Gary Frampton" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=201"];
"Ginger Palmer" -> "Gary Frampton"
"Pat Norris" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=207"];
"Sean Tipps" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=204"];
"Teresa Long" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=194"];
"Sean Tipps" -> "Pat Norris"
"Teresa Long" -> "Pat Norris"
"Marc Martin-ez" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=208"];
"Mark Pearson" -> "Marc Martin-ez"
"Tani Miller" -> "Marc Martin-ez"
"Kristen Villone" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=209"];
"Kelly Erickson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=199"];
"Anna Pedroza" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=197"];
"Kelly Erickson" -> "Kristen Villone"
"Anna Pedroza" -> "Kristen Villone"
"Geoff Frank" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=21"];
"Chris Livelsberger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=40"];
"Amy Price" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=57"];
"Chris Livelsberger" -> "Geoff Frank"
"Amy Price" -> "Geoff Frank"
"Tracy Murray" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=210"];
"John FitzGibbon" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=92"];
"Judy Dulcich" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=177"];
"John FitzGibbon" -> "Tracy Murray"
"Judy Dulcich" -> "Tracy Murray"
"Ian McIntosh" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=215"];
"Barbara Tollison" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=172"];
"Robert Walwick" -> "Ian McIntosh"
"Barbara Tollison" -> "Ian McIntosh"
"Jayson Smith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=58"];
"Jayson Smith" -> "Chuk Gawlik"
"Heather Smith" -> "Chuk Gawlik"
"Kelly McKinney" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=222"];
"Mark Nadeau" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=183"];
"Mark Nadeau" -> "Kelly McKinney"
"Judy Dulcich" -> "Kelly McKinney"
"Chris Livelsberger" -> "Deanna Jagow"
"Amy Price" -> "Deanna Jagow"
"Renee Thompson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=231"];
"J. Angeles" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=3"];
"Kelley Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=223"];
"J. Angeles" -> "Renee Thompson"
"Kelley Smith" -> "Renee Thompson"
"Steven Smith" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=233"];
"John FitzGibbon" -> "Steven Smith"
"Charlene Andrews" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=234"];
"Diane Reoch" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=227"];
"Diane Reoch" -> "Charlene Andrews"
"Tonya Alexander" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=238"];
"Gail Vasquez" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=225"];
"Gail Vasquez" -> "Tonya Alexander"
"Spencer Caldwell" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=239"];
"Becky Bernal" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=218"];
"Becky Bernal" -> "Spencer Caldwell"
"Chuk Gawlik" -> "Michael Griffith"
"Wanda Livelsberger" -> "Michael Griffith"
"Russell Grant" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=242"];
"Steven Smith" -> "Russell Grant"
"Tiffany Worthington" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=66"];
"Chuck Foster" -> "David Guthrie"
"Tiffany Worthington" -> "David Guthrie"
"Jerry Maya" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=250"];
"John FitzGibbon" -> "Jerry Maya"
"Melissa Schwartz" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=252"];
"Russell Grant" -> "Melissa Schwartz"
"Delphy Shaulis" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=255"];
"Renee Thompson" -> "Delphy Shaulis"
"Martin Naiman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=45"];
"Janean Angeles" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=86"];
"Martin Naiman" -> "Alex Hansen"
"Janean Angeles" -> "Alex Hansen"
"Leslie Harlow" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=265"];
"Dennis McColl" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=251"];
"Denise Luna" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=236"];
"Dennis McColl" -> "Leslie Harlow"
"Denise Luna" -> "Leslie Harlow"
"Jonathan Yudman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=267"];
"April Ortiz-cloninger" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=258"];
"April Ortiz-cloninger" -> "Jonathan Yudman"
"Michael Elgo" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=268"];
"Carol Kropp" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=254"];
"Spencer Caldwell" -> "Michael Elgo"
"Carol Kropp" -> "Michael Elgo"
"Denmark Vea" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=269"];
"Marc Martin-ez" -> "Denmark Vea"
"Kelley Smith" -> "Denmark Vea"
"Kathleen Hansen" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=27"];
"Martin Naiman" -> "Kathleen Hansen"
"Heather Smith" -> "Kathleen Hansen"
"Laura Stegner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=274"];
"April Ortiz-cloninger" -> "Laura Stegner"
"Kathy Jones" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=28"];
"J. Angeles" -> "Kathy Jones"
"Eric Gates" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=282"];
"Erick Sugimura" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=280"];
"Erick Sugimura" -> "Eric Gates"
"Laura Stegner" -> "Eric Gates"
"Jennifer Stoewe" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=288"];
"Eric Gates" -> "Jennifer Stoewe"
"Karen Helbling" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=29"];
"Regan Ashker" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=5"];
"Kevin Decker" -> "Karen Helbling"
"Regan Ashker" -> "Karen Helbling"
"Scott Wood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=295"];
"Eric Gates" -> "Scott Wood"
"Greg Flood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=200"];
"Greg Flood" -> "J. Angeles"
"Ginger Palmer" -> "J. Angeles"
"Lynn Reeves" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=48"];
"Chuk Gawlik" -> "Amie Holston"
"Lynn Reeves" -> "Amie Holston"
"Susan Colwell" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=302"];
"Michael Elgo" -> "Susan Colwell"
"Christopher Jouan" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=306"];
"Kevin Owens" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=245"];
"Kevin Owens" -> "Christopher Jouan"
"Kristianna Reynante" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=308"];
"Michael Elgo" -> "Kristianna Reynante"
"Janean Angeles" -> "Kristianna Reynante"
"Amy Berner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=300"];
"Amy Berner" -> "Stacy Snyder"
"Deanna Johnson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=31"];
"Alex Hansen" -> "Deanna Johnson"
"Laura De'Armond" -> "Deanna Johnson"
"Johnny Richardson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=310"];
"Russell Grant" -> "Johnny Richardson"
"Nathan Fellhauer" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=313"];
"James Rowland" [color=thistle, URL="http://sdsu.kkytbs.net/members/profile.html?who=52"];
"James Rowland" -> "Nathan Fellhauer"
"Kristianna Reynante" -> "Nathan Fellhauer"
"Brian Raneses" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=314"];
"Sean McHenry" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=42"];
"Sean McHenry" -> "Brian Raneses"
"Penny Lewis" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=315"];
"Martin Naiman" -> "Penny Lewis"
"Becky Graham" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=316"];
"Kristen Elgo" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=7"];
"Kristen Elgo" -> "Becky Graham"
"Steven Gross" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=318"];
"Rob Reiner" -> "Steven Gross"
"Stacy Snyder" -> "Steven Gross"
"Sedona Reynolds" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=32"];
"Mark Newton-John" -> "Sedona Reynolds"
"Cindy Teel" -> "Sedona Reynolds"
"Klair Mayerchak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=320"];
"Nathan Fellhauer" -> "Klair Mayerchak"
"Becky Graham" -> "Klair Mayerchak"
"Shari VerBerkmoes" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=321"];
"Sean McHenry" -> "Shari VerBerkmoes"
"Janean Angeles" -> "Shari VerBerkmoes"
"Anson Summers" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=326"];
"James Rowland" -> "Anson Summers"
"Dusty Jolliff" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=33"];
"Rob Reiner" -> "Dusty Jolliff"
"Stacy Snyder" -> "Dusty Jolliff"
"Jennifer Garman" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=331"];
"James Rowland" -> "Jennifer Garman"
"Kelly Greenhill" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=333"];
"Rob Reiner" -> "Kelly Greenhill"
"Kristen Elgo" -> "Kelly Greenhill"
"Lucinda Farless" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=334"];
"J. Angeles" -> "Lucinda Farless"
"Susan Colwell" -> "Lucinda Farless"
"Alfredo Cardenas" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=335"];
"Chuk Gawlik" -> "Alfredo Cardenas"
"Kathleen Hansen" -> "Alfredo Cardenas"
"Jennifer Jouan" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=34"];
"Andrea Owens" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=276"];
"Andrea Owens" -> "Jennifer Jouan"
"Tamara Scrivner" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=345"];
"Joseph Butler" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=69"];
"Sarah Maltese" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=83"];
"Joseph Butler" -> "Tamara Scrivner"
"Sarah Maltese" -> "Tamara Scrivner"
"Bradley Stouse" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=346"];
"Ryan Underwood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=74"];
"Ryan Underwood" -> "Bradley Stouse"
"Cindy Teel" -> "Bradley Stouse"
"Casondra Brimmage" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=347"];
"Kristopher Lininger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=85"];
"Ilana Melcher" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=73"];
"Kristopher Lininger" -> "Casondra Brimmage"
"Ilana Melcher" -> "Casondra Brimmage"
"Cassiopeia Guthrie" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=348"];
"Jeremy Frazier" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=79"];
"Christine Mount" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=76"];
"Jeremy Frazier" -> "Cassiopeia Guthrie"
"Christine Mount" -> "Cassiopeia Guthrie"
"Kathleen Moran" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=349"];
"Matthew FitzGerald" -> "Kathleen Moran"
"Lori Brede" -> "Kathleen Moran"
"Tiffany Kalland" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=35"];
"Tony Sacco" -> "Tiffany Kalland"
"Karen Helbling" -> "Tiffany Kalland"
"Kristen Anderson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=350"];
"Jennie Bogart" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=78"];
"David Guthrie" -> "Kristen Anderson"
"Jennie Bogart" -> "Kristen Anderson"
"Laura Simonette" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=351"];
"Jon Weisel" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=89"];
"Jon Weisel" -> "Laura Simonette"
"Japheth Cleaver" -> "Laura Simonette"
"Nathan Williams" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=352"];
"David Guthrie" -> "Nathan Williams"
"Karen Helbling" -> "Nathan Williams"
"Rebecca Hippert" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=353"];
"Ryan Underwood" -> "Rebecca Hippert"
"Tiffany Kalland" -> "Rebecca Hippert"
"Samuel Wallace" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=354"];
"Joseph Butler" -> "Samuel Wallace"
"Deanna Jagow" -> "Samuel Wallace"
"Scott Gardner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=355"];
"Jeremy Frazier" -> "Scott Gardner"
"Christine Mount" -> "Scott Gardner"
"Alberto Ayon" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=356"];
"Bradley Stouse" -> "Alberto Ayon"
"Jennie Bogart" -> "Alberto Ayon"
"Susannah Clayton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=357"];
"Nathan Williams" -> "Susannah Clayton"
"Karen Helbling" -> "Susannah Clayton"
"Lisa Gochnauer" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=358"];
"Scott Gardner" -> "Lisa Gochnauer"
"Casondra Brimmage" -> "Lisa Gochnauer"
"Jamie Jackson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=359"];
"Samuel Wallace" -> "Jamie Jackson"
"Tamara Scrivner" -> "Jamie Jackson"
"Christina Kelly" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=36"];
"Matthew FitzGerald" -> "Christina Kelly"
"Lori Brede" -> "Christina Kelly"
"Gara Thornton" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=360"];
"Mark Newton-John" -> "Gara Thornton"
"Laura Simonette" -> "Gara Thornton"
"Robert Winebarger" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=361"];
"Robin Ellison" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=90"];
"Scott Gardner" -> "Robert Winebarger"
"Robin Ellison" -> "Robert Winebarger"
"Jeremy Kirchner" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=37"];
"Rob Reiner" -> "Jeremy Kirchner"
"Sandy Konar" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=38"];
"Jennifer Brandon" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=9"];
"Jennifer Brandon" -> "Sandy Konar"
"Dan Kuhlman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=39"];
"Rob Reiner" -> "Dan Kuhlman"
"Dusty Jolliff" -> "Dan Kuhlman"
"Lindsay Arehart" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=4"];
"Martin Naiman" -> "Lindsay Arehart"
"Jennifer Brandon" -> "Lindsay Arehart"
"J. Angeles" -> "Mervin Maniago"
"Kathy Jones" -> "Mervin Maniago"
"Jarrod Monroe" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=43"];
"Jamie Fratacci" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=44"];
"Mark Newton-John" -> "Jarrod Monroe"
"Jamie Fratacci" -> "Jarrod Monroe"
"Chuk Gawlik" -> "Jamie Fratacci"
"Tiffany Worthington" -> "Jamie Fratacci"
"Russell Grant" -> "Martin Naiman"
"Tonya Alexander" -> "Martin Naiman"
"Edward Givens" [color=lightblue, outline=bold, style=bold, URL="http://sdsu.kkytbs.net/members/profile.html?who=106"];
"Edward Givens" -> "Mark Newton-John"
"Veronica Nickel" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=47"];
"Regan Ashker" -> "Veronica Nickel"
"Wanda Livelsberger" -> "Lynn Reeves"
"Bryan Ransom" [color=thistle, URL="http://sdsu.kkytbs.net/members/profile.html?who=49"];
"Jayson Smith" -> "Bryan Ransom"
"Tony Sacco" -> "Regan Ashker"
"Dusty Jolliff" -> "Regan Ashker"
"Jennifer Stout" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=50"];
"Matthew FitzGerald" -> "Jennifer Stout"
"Deanna Jagow" -> "Jennifer Stout"
"Sean McHenry" -> "James Rowland"
"James Rowland" -> "Wanda Livelsberger"
"Janean Angeles" -> "Wanda Livelsberger"
"Melissa Roy" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=54"];
"Mervin Maniago" -> "Melissa Roy"
"Christina Kelly" -> "Melissa Roy"
"Dennis McColl" -> "Tony Sacco"
"April Ortiz-cloninger" -> "Tony Sacco"
"Tony Sacco" -> "Karen Saye"
"Tony Sacco" -> "Amy Price"
"Kathleen Hansen" -> "Amy Price"
"James Rowland" -> "Jayson Smith"
"Brian Raneses" -> "Heather Smith"
"Kristen Elgo" -> "Heather Smith"
"Josh Atwood" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=6"];
"David Guthrie" -> "Josh Atwood"
"Lori Brede" -> "Josh Atwood"
"Katie Browne" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=60"];
"Patrick Doerr" -> "Katie Browne"
"Jamie Fratacci" -> "Katie Browne"
"Kristin Tang" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=61"];
"James Rowland" -> "Kristin Tang"
"Heather Smith" -> "Kristin Tang"
"Mervin Maniago" -> "Cindy Teel"
"Veronica Nickel" -> "Cindy Teel"
"Mike Tulumello" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=63"];
"Matthew FitzGerald" -> "Mike Tulumello"
"Katie Browne" -> "Mike Tulumello"
"Veronica Villanueva" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=64"];
"Ryan Farris" -> "Veronica Villanueva"
"Sedona Reynolds" -> "Veronica Villanueva"
"Mervin Maniago" -> "Tiffany Worthington"
"Jennifer Jouan" -> "Tiffany Worthington"
"Scott Wright" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=67"];
"James Rowland" -> "Scott Wright"
"Kristen Elgo" -> "Scott Wright"
"Jeremy Browne" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=68"];
"Matthew FitzGerald" -> "Jeremy Browne"
"Japheth Cleaver" -> "Jeremy Browne"
"James Fogelman" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=688"];
"Alberto Ayon" -> "James Fogelman"
"Susannah Clayton" -> "James Fogelman"
"Sandra Chase" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=689"];
"David Guthrie" -> "Sandra Chase"
"Japheth Cleaver" -> "Sandra Chase"
"Patrick Doerr" -> "Joseph Butler"
"Deanna Jagow" -> "Joseph Butler"
"Laura Fisher" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=690"];
"Nathan Williams" -> "Laura Fisher"
"Casondra Brimmage" -> "Laura Fisher"
"Katie Kozma" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=691"];
"Scott Wright" -> "Katie Kozma"
"Robin Ellison" -> "Katie Kozma"
"Rachel Perkins" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=692"];
"Joseph Butler" -> "Rachel Perkins"
"Cassiopeia Guthrie" -> "Rachel Perkins"
"Sarah Titilah" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=693"];
"Robert Winebarger" -> "Sarah Titilah"
"Karen Helbling" -> "Sarah Titilah"
"Ashley Rehart" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=694"];
"Laura Fisher" -> "Ashley Rehart"
"Cara Yancey" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=695"];
"Katie Kozma" -> "Cara Yancey"
"Ashley Presley" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=698"];
"Cara Yancey" -> "Ashley Presley"
"Leila Wilhelm" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=699"];
"Robin Ellison" -> "Leila Wilhelm"
"Sean McHenry" -> "Kristen Elgo"
"Stacy Snyder" -> "Kristen Elgo"
"Greg Moody" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=70"];
"Ryan Farris" -> "Greg Moody"
"Jennifer Stout" -> "Greg Moody"
"Lisa Fleck" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=700"];
"Rachel Perkins" -> "Lisa Fleck"
"Christine Coyne" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=701"];
"Rachel Perkins" -> "Christine Coyne"
"Jennifer Cooley" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=702"];
"Laura Fisher" -> "Jennifer Cooley"
"Elizabeth Larios" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=703"];
"Ashley Rehart" -> "Elizabeth Larios"
"Cate Threlkeld" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=707"];
"Katie Kozma" -> "Cate Threlkeld"
"Erika Tapia" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=71"];
"Patrick Doerr" -> "Erika Tapia"
"Melissa Roy" -> "Erika Tapia"
"Robbyn Rozelle" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=72"];
"Jarrod Monroe" -> "Robbyn Rozelle"
"Tiffany Kalland" -> "Robbyn Rozelle"
"Ryan Farris" -> "Ilana Melcher"
"Veronica Villanueva" -> "Ilana Melcher"
"Greg Moody" -> "Ryan Underwood"
"Katie Browne" -> "Ryan Underwood"
"Cameron Brown" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=75"];
"Joseph Butler" -> "Cameron Brown"
"Tiffany Kalland" -> "Cameron Brown"
"Ryan Underwood" -> "Christine Mount"
"Lori Brede" -> "Christine Mount"
"Janay Rabe" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=77"];
"Greg Moody" -> "Janay Rabe"
"Cindy Teel" -> "Janay Rabe"
"Jeremy Browne" -> "Jennie Bogart"
"Tiffany Kalland" -> "Jennie Bogart"
"Ryan Farris" -> "Jeremy Frazier"
"Ilana Melcher" -> "Jeremy Frazier"
"Crystal Bozak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=8"];
"Patrick Doerr" -> "Crystal Bozak"
"Katie Browne" -> "Crystal Bozak"
"Kameka Smith" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=80"];
"Matthew FitzGerald" -> "Kameka Smith"
"Ilana Melcher" -> "Kameka Smith"
"Kyra Sacco" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=81"];
"Joseph Butler" -> "Kyra Sacco"
"Robbyn Rozelle" -> "Kyra Sacco"
"Samuel Behar" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=82"];
"Ryan Underwood" -> "Samuel Behar"
"Lori Brede" -> "Samuel Behar"
"Patrick Doerr" -> "Sarah Maltese"
"Deanna Jagow" -> "Sarah Maltese"
"David Bronson" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=84"];
"Kristin Alongi-Hutchins" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=87"];
"Tony Sacco" -> "David Bronson"
"Kristin Alongi-Hutchins" -> "David Bronson"
"Cameron Brown" -> "Kristopher Lininger"
"Kameka Smith" -> "Kristopher Lininger"
"Rakan Abu-Rahma" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=852"];
"Christine Coyne" -> "Rakan Abu-Rahma"
"Jennifer Berry" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=270"];
"Jennifer Berry" -> "Janean Angeles"
"Penny Lewis" -> "Kristin Alongi-Hutchins"
"Melissa Bebak" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=88"];
"Greg Moody" -> "Melissa Bebak"
"Sarah Maltese" -> "Melissa Bebak"
"Scott Wright" -> "Jennifer Brandon"
"Japheth Cleaver" -> "Jennifer Brandon"
"Samuel Behar" -> "Robin Ellison"
"Kyra Sacco" -> "Robin Ellison"
"Teresa Simms" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=91"];
"Joseph Butler" -> "Teresa Simms"
"Janay Rabe" -> "Teresa Simms"
"Robert Schmidtke" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=188"];
"Jean Newman" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=166"];
"Robert Schmidtke" -> "John FitzGibbon"
"Jean Newman" -> "John FitzGibbon"
"Brittany DePew" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=928"];
"Elizabeth Larios" -> "Brittany DePew"
"Kathleen Halberg" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=929"];
"Ashley Rehart" -> "Kathleen Halberg"
"Terrance Hirsch" [color=lightblue, URL="http://sdsu.kkytbs.net/members/profile.html?who=96"];
"J. Angeles" -> "Terrance Hirsch"
"Susan Colwell" -> "Terrance Hirsch"
"Monique Arellano" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=972"];
"Ashley Presley" -> "Monique Arellano"
"Anthony Henderson" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=973"];
"Jennifer Cooley" -> "Anthony Henderson"
"Amethyst Tagle" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=974"];
"Cate Threlkeld" -> "Amethyst Tagle"
"Mallory Williams" [color=lightpink, URL="http://sdsu.kkytbs.net/members/profile.html?who=975"];
"Lisa Fleck" -> "Mallory Williams"
}

View File

@@ -0,0 +1,377 @@
digraph G {
size="7,10"
page="8.5,11"
center=""
node[width=.25,height=.375,fontsize=9]
fcfpr1_1_2t_17 -> 341411;
fcfpr1_1t_1 -> 341411;
rdlfpr2_0_rdlt_4 -> 341411;
fpfpr1_0_1t_1 -> 341411;
fpfpr1_1_2t_11 -> 341411;
rtafpr1_1_2t_28 -> 341411;
rtafpr1_1_3t_6 -> 341411;
rdlfpr1_1t_1 -> 358866;
rtafpr1_1_3t_6 -> 358866;
tmfpr1_1_3t_5 -> 358930;
fcfpr1_1_3t_9 -> 358930;
pcfpr1_1_3t_7 -> 358930;
fpfpr1_1_3g_1 -> 358930;
fpfpr1_1_3t_1 -> 358930;
aufpr1_1_3t_1 -> 358930;
rtafpr1_0_3g_1 -> 358930;
rtafpr1_1_3t_6 -> 358930;
msgfpr1_1_1g_12 -> 371943;
rtafpr1_1_1g_8 -> 371943;
rtafpr1_1_1t_35 -> 371943;
rtafpr1_1_1t_45 -> 371943;
rtafpr1_1_3t_6 -> 371943;
tlfpr2_0_rdlg_2 -> 374300;
fcfpr1_1_3t_8 -> 374300;
fcfpr1_1_3t_9 -> 374300;
rtafpr1_1_3t_6 -> 374300;
fcfpr1_0_5g_1 -> 371942;
fcfpr1_1_1t_19 -> 371942;
fcfpr1_1_3t_9 -> 371942;
fcfpr1_1_3t_9 -> 374700;
tymsgfpr1_1_3t_3 -> 374700;
fpfpr1_1_3t_1 -> 374700;
rtafpr1_1_3t_7 -> 374700;
fcfpr1_1_3g_2 -> 374741;
fcfpr1_1_3t_9 -> 374741;
fpfpr1_1_3t_1 -> 374741;
rtafpr1_1_3t_7 -> 374741;
fcfpr1_1_1t_18 -> 374886;
fcfpr1_1_3t_9 -> 374886;
fpfpr1_1_3t_1 -> 374886;
rtafpr1_1_3t_7 -> 374886;
fcfpr1_1_3t_9 -> 375039;
fpfpr1_1_3t_1 -> 375039;
fcfpr1_1_3t_42 -> 375507;
fcfpr1_1_3t_9 -> 375507;
rdlfpr2_0_rdlt_158 -> 375507;
rtafpr1_1_3t_7 -> 375507;
rtafpr1_1_3t_71 -> 375507;
dbfpr1_1_3t_2 -> 375507;
fcfpr1_1_3t_9 -> 375508;
rdlfpr1_1g_13 -> 375508;
rtafpr1_1_3t_7 -> 375508;
rtafpr2_1_rdlg_1 -> 375508;
dbfpr1_1_3t_2 -> 375508;
fcfpr1_1_3t_9 -> 375519;
fpfpr1_1_3g_1 -> 375519;
fpfpr1_1_3t_1 -> 375519;
fcfpr1_1_3t_9 -> 377380;
rdlfpr1_1g_16 -> 377380;
rdlfpr1_1t_100 -> 377380;
fcfpr1_0_2g_1 -> 377719;
fcfpr1_1_3t_10 -> 377719;
fcfpr1_1_3t_7 -> 377719;
fcfpr1_1_3t_9 -> 377719;
rdlfpr2_0_rdlg_12 -> 377719;
rdlfpr2_0_rdlt_108 -> 377719;
rdlfpr2_0_rdlt_27 -> 377719;
rdlfpr2_0_rdlt_30 -> 377719;
fcfpr1_1_3t_9 -> 377763;
fcfpr1_1_3t_9 -> 379848;
fpfpr1_1_3t_1 -> 379848;
fcfpr1_1_3t_9 -> 380571;
fcfpr1_1_3t_9 -> 380604;
fpfpr1_1_3t_1 -> 380604;
fcfpr1_1_3t_9 -> 381211;
fpfpr1_1_3t_1 -> 381211;
fcfpr1_1_3t_9 -> 381835;
fcfpr1_1_3t_9 -> 381897;
fcfpr1_1_3t_9 -> 381901;
fpfpr1_1_3t_1 -> 381901;
fcfpr1_1_3t_9 -> 382103;
rtafpr1_1_3t_7 -> 382103;
fcfpr1_1_3t_9 -> 382161;
fcfpr1_1_3t_9 -> 383174;
fpfpr1_1_3t_1 -> 383174;
rtafpr1_1_3t_7 -> 383174;
fpfpr1_1_3g_1 -> 352010;
fpfpr1_1_3t_1 -> 352010;
fpfpr1_1_3t_1 -> 382409;
fpfpr1_1_3t_1 -> 382827;
fpfpr1_1_3t_1 -> 382928;
rtafpr1_1_3t_7 -> 382928;
tlfpr1_1_1t_5 -> 358224;
tymsgfpr1_1_1t_23 -> 358224;
tymsgfpr1_1_3t_3 -> 358224;
rcfpr0_0_1t_9 -> 358224;
rcfpr1_1_1t_5 -> 358224;
odfpr0_0_1t_8 -> 358224;
odfpr1_1_1t_6 -> 358224;
ecdsgfpr1_1_1t_4 -> 358224;
tymsgfpr1_1_1t_18 -> 358900;
tymsgfpr1_1_3t_3 -> 358900;
rcfpr1_1_1t_100 -> 358900;
rcfpr1_1_1t_22 -> 358900;
rcfpr1_1_1t_37 -> 358900;
odfpr1_1_1t_21 -> 358900;
tymsgfpr1_1_3t_3 -> 372568;
rcfpr1_1_1t_30 -> 372568;
odfpr1_1_1t_31 -> 372568;
tlfpr1_1_1t_20 -> 375557;
tymsgfpr1_1_1t_24 -> 375557;
tymsgfpr1_1_3t_3 -> 375557;
rcfpr1_1_1t_11 -> 375557;
odfpr1_1_1t_9 -> 375557;
ecdsgfpr1_1_1t_19 -> 375557;
rtafpr1_1_1g_14 -> 376956;
rtafpr1_1_1t_64 -> 376956;
rtafpr1_1_2t_18 -> 376956;
rtafpr1_1_3t_30 -> 376956;
rtafpr1_1_3t_7 -> 376956;
rtafpr1_1_3t_7 -> 379339;
rtafpr1_1_1t_14 -> 379422;
rtafpr1_1_1t_20 -> 379422;
rtafpr1_1_3t_7 -> 379422;
rtafpr1_1_3t_7 -> 383039;
fcfpr1_1_1t_18 -> 359471;
fcfpr2_0_1t_1 -> 359471;
fcfpr2_0_1t_2 -> 359471;
ccsfpr2_0_1t_99 -> 359471;
fcfpr1_1_3t_42 -> 384096;
rtafpr1_1_3t_71 -> 384096;
tlfpr1_0_4g_4 -> 354290;
rcfpr0_0_1t_9 -> 354290;
odfpr0_0_1t_8 -> 354290;
pagfpr1_1_1t_23 -> 354290;
rcfpr1_1_1t_5 -> 379864;
rcfpr1_1_1t_100 -> 382574;
rcfpr1_1_1t_22 -> 382574;
rcfpr1_1_1t_37 -> 382574;
rcfpr1_1_1t_30 -> 370706;
rcfpr1_1_1t_30 -> 377908;
rcfpr1_1_1t_30 -> 377924;
rcfpr1_1_1t_30 -> 377971;
rcfpr1_1_1t_30 -> 377980;
odfpr1_1_1t_31 -> 377980;
rcfpr1_1_1t_30 -> 378362;
rcfpr1_1_1t_30 -> 378656;
rcfpr1_1_1t_30 -> 378666;
rcfpr1_1_1t_30 -> 379169;
odfpr1_1_1t_31 -> 379169;
rcfpr1_1_1t_110 -> 379341;
rcfpr1_1_1t_30 -> 379341;
rcfpr1_1_1t_62 -> 379341;
odfpr1_1_1t_31 -> 379341;
rcfpr1_1_1t_30 -> 379972;
rcfpr1_1_1t_30 -> 380298;
rcfpr1_1_1t_30 -> 380448;
rcfpr1_1_1t_30 -> 380475;
odfpr1_1_1t_31 -> 380475;
rcfpr1_1_1t_30 -> 380526;
odfpr1_1_1t_31 -> 357430;
rcfpr1_1_1t_11 -> 379968;
odfpr1_1_1t_9 -> 379968;
ccsfpr2_0_1t_99 -> 359100;
ccsfpr2_0_1t_99 -> 376529;
ccsfpr2_0_1t_99 -> 377801;
ccsfpr2_0_1t_99 -> 379126;
ccsfpr2_0_1t_99 -> 379212;
ccsfpr2_0_1t_99 -> 380285;
ccsfpr2_0_1t_99 -> 380963;
ccsfpr2_0_1t_99 -> 384909;
tlfpr1_0_4g_4 -> 358471;
odfpr0_0_1t_7 -> 358471;
odfpr1_0_1t_36 -> 358471;
odfpr1_0_3t_18 -> 358471;
odfpr1_0_3t_21 -> 358471;
tlfpr1_0_4g_4 -> 375024;
tlfpr1_0_4g_4 -> 375027;
rcfpr1_1_1t_110 -> 381710;
rcfpr1_1_1t_62 -> 381710;
rcfpr1_1_1t_110 -> 381775;
rcfpr1_1_1t_62 -> 381775;
rcfpr1_1_1t_110 -> 382436;
fcfpr1_1_3t_34 -> 382528;
rcfpr1_1_1t_110 -> 382528;
rtafpr1_1_3t_48 -> 382528;
rcfpr1_1_1t_110 -> 382566;
rcfpr1_1_1t_110 -> 382572;
odfpr0_0_1t_7 -> 353506;
rcfpr1_0_1t_35 -> 370509;
odfpr0_0_1t_7 -> 370509;
odfpr0_0_1t_7 -> 370510;
odfpr1_0_1t_38 -> 370510;
tlfpr1_0_4g_5 -> 354546;
rcfpr1_1_1t_61 -> 354546;
odfpr1_0_3t_18 -> 354546;
odfpr1_0_3t_20 -> 354546;
odfpr1_0_3t_18 -> 354757;
odfpr1_0_3t_20 -> 354757;
odfpr1_0_3t_18 -> 354766;
odfpr1_0_3t_20 -> 354766;
odfpr1_0_3t_18 -> 354771;
odfpr1_0_3t_20 -> 354771;
odfpr1_0_3t_18 -> 354785;
odfpr1_0_3t_23 -> 354785;
odfpr1_0_3t_24 -> 354785;
odfpr1_0_3t_18 -> 354878;
odfpr1_0_3t_23 -> 354878;
odfpr1_0_3t_24 -> 354878;
odfpr1_0_3t_18 -> 355080;
odfpr1_0_3t_23 -> 355080;
odfpr1_0_3t_24 -> 355080;
odfpr1_0_3t_18 -> 355288;
odfpr1_0_3t_23 -> 355288;
odfpr1_0_3t_24 -> 355288;
odfpr2_0_03t_13 -> 355288;
odfpr1_0_3t_18 -> 355800;
odfpr1_0_3t_21 -> 355800;
odfpr1_0_3t_18 -> 356116;
odfpr1_0_3t_21 -> 356116;
odfpr1_0_3t_18 -> 356741;
odfpr1_0_3t_21 -> 356741;
odfpr1_0_3t_18 -> 357340;
odfpr1_0_3t_21 -> 357340;
odfpr1_0_3t_18 -> 357538;
odfpr1_0_3t_21 -> 357538;
odfpr1_0_3t_18 -> 357769;
odfpr1_0_3t_21 -> 357769;
odfpr1_0_3t_18 -> 357793;
odfpr1_0_3t_21 -> 357793;
odfpr1_0_3t_18 -> 358155;
odfpr1_0_3t_21 -> 358155;
odfpr1_0_3t_18 -> 358157;
odfpr1_0_3t_21 -> 358157;
odfpr1_0_3t_18 -> 358159;
odfpr1_0_3t_21 -> 358159;
odfpr1_0_3t_18 -> 358584;
odfpr1_0_3t_21 -> 358584;
odfpr1_0_3t_18 -> 360104;
odfpr1_0_3t_21 -> 360104;
odfpr1_0_3t_18 -> 360144;
odfpr1_0_3t_21 -> 360144;
odfpr1_0_3t_18 -> 360672;
odfpr1_0_3t_21 -> 360672;
odfpr1_0_3t_5 -> 360672;
odfpr1_0_3t_18 -> 360839;
odfpr1_0_3t_21 -> 360839;
odfpr1_0_3t_18 -> 371187;
tlfpr1_0_3g_5 -> 373300;
odfpr1_0_3t_12 -> 373300;
odfpr1_0_3t_18 -> 373300;
odfpr1_0_3t_18 -> 375134;
odfpr1_0_5t_18 -> 375134;
rcfpr0_0_1t_10 -> 375319;
odfpr1_0_3t_18 -> 375319;
odfpr1_0_3t_36 -> 375319;
odfpr1_0_5t_17 -> 375319;
odfpr1_0_5t_19 -> 375319;
odfpr1_0_3t_18 -> 375499;
odfpr1_0_3t_18 -> 377220;
odfpr1_0_5t_21 -> 377220;
tlfpr1_0_3g_7 -> 377562;
tlfpr1_1_1t_3 -> 377562;
odfpr1_0_3t_18 -> 377562;
odfpr1_0_3t_36 -> 377562;
odfpr1_0_5t_20 -> 377562;
odfpr1_0_3t_18 -> 378108;
odfpr1_0_3t_6 -> 378108;
odfpr1_0_5t_20 -> 354221;
odfpr0_0_1t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_3g_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr0_0_1t_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_61 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_3g_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_62 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
ccsfpr2_0_1t_99 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_3t_3 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr0_0_1t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_14 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_110 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
dbfpr1_1_3t_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1g_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_1_1t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_64 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr2_0_rdlg_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_2t_28 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_1_1t_3 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_1_3t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
aufpr1_1_3t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_34 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_1t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_36 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_1_1t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_1t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_37 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_8 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_9 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_27 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3g_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_35 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_1_3g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_1_2t_11 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
ecdsgfpr1_1_1t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_1t_36 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1g_14 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_1t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_1t_24 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_1t_38 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_0_2g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr0_0_1t_10 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_100 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_108 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
pcfpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
ecdsgfpr1_1_1t_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tmfpr1_1_3t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_21 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fpfpr1_0_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_22 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
pagfpr1_1_1t_23 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_71 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_2t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_158 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_24 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_7 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_0_3g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_20 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1g_13 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_0_1t_35 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_2t_17 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr2_1_rdlg_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1g_16 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr2_0_1t_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr2_0_1t_2 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr1_1t_100 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
msgfpr1_1_1g_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlt_30 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_4g_4 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_42 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_6 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tlfpr1_0_4g_5 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_3t_48 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_17 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
tymsgfpr1_1_1t_18 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_5t_19 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_1_3t_10 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
fcfpr1_0_5g_1 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_0_3t_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr2_0_03t_13 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rcfpr1_1_1t_11 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
odfpr1_1_1t_31 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rdlfpr2_0_rdlg_12 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
rtafpr1_1_1t_45 [label="",shape=circle,height=0.12,width=0.12,fontsize=1];
}

View File

@@ -0,0 +1,29 @@
##"I played some days with making an interface between our ConceptBase system (essentially a database system to store models) and graphviz. One example graph is attached. It is a so-called petri net for Dutch traffic lights. The example is actually taken from a book by Wil van der Aalst." Contributed by Manfred Jeusfeld.
##Command to produce the output: "neato -Tpng thisfile > thisfile.png"
digraph TrafficLights {
node [shape=box]; gy2; yr2; rg2; gy1; yr1; rg1;
node [shape=circle,fixedsize=true,width=0.9]; green2; yellow2; red2; safe2; safe1; green1; yellow1; red1;
gy2->yellow2;
rg2->green2;
yr2->safe1;
yr2->red2;
safe2->rg2;
green2->gy2;
yellow2->yr2;
red2->rg2;
gy1->yellow1;
rg1->green1;
yr1->safe2;
yr1->red1;
safe1->rg1;
green1->gy1;
yellow1->yr1;
red1->rg1;
overlap=false
label="PetriNet Model TrafficLights\nExtracted from ConceptBase and layed out by Graphviz"
fontsize=12;
}

View File

@@ -0,0 +1,105 @@
graph G {
// graph [splines=true overlap=false]
// graph [truecolor bgcolor="#ff00005f"]
node [style=filled fillcolor="#00ff005f"]
1 -- 30 [f=1];
1 -- 40 [f=14];
8 -- 46 [f=1];
8 -- 16 [f=18];
10 -- 25 [f=1];
10 -- 19 [f=5];
10 -- 33 [f=1];
12 -- 8 [f=1];
12 -- 36 [f=5];
12 -- 17 [f=16];
13 -- 38 [f=1];
13 -- 24 [f=19];
24 -- 49 [f=1];
24 -- 13 [f=1];
24 -- 47 [f=12];
24 -- 12 [f=19];
25 -- 27 [f=1];
25 -- 12 [f=1];
27 -- 12 [f=1];
27 -- 14 [f=8];
29 -- 10 [f=1];
29 -- 8 [f=17];
30 -- 24 [f=1];
30 -- 44 [f=15];
38 -- 29 [f=1];
38 -- 35 [f=15];
2 -- 42 [f=2];
2 -- 35 [f=3];
2 -- 11 [f=19];
14 -- 18 [f=2];
14 -- 24 [f=15];
14 -- 38 [f=18];
18 -- 49 [f=2];
18 -- 47 [f=20];
26 -- 41 [f=2];
26 -- 42 [f=15];
31 -- 39 [f=2];
31 -- 47 [f=17];
31 -- 25 [f=14];
37 -- 26 [f=2];
37 -- 16 [f=14];
39 -- 50 [f=2];
39 -- 14 [f=2];
39 -- 18 [f=17];
39 -- 47 [f=10];
41 -- 31 [f=2];
41 -- 8 [f=16];
42 -- 44 [f=2];
42 -- 29 [f=12];
44 -- 37 [f=2];
44 -- 32 [f=15];
3 -- 20 [f=2];
3 -- 28 [f=19];
6 -- 45 [f=2];
6 -- 28 [f=10];
9 -- 6 [f=2];
9 -- 16 [f=1];
15 -- 16 [f=2];
15 -- 48 [f=2];
16 -- 50 [f=2];
16 -- 32 [f=14];
16 -- 39 [f=8];
20 -- 33 [f=2];
33 -- 9 [f=2];
33 -- 46 [f=3];
33 -- 48 [f=17];
45 -- 15 [f=2];
4 -- 17 [f=4];
4 -- 15 [f=6];
4 -- 12 [f=16];
17 -- 21 [f=4];
19 -- 35 [f=4];
19 -- 15 [f=9];
19 -- 43 [f=4];
21 -- 19 [f=4];
21 -- 50 [f=4];
23 -- 36 [f=4];
34 -- 23 [f=4];
34 -- 24 [f=11];
35 -- 34 [f=4];
35 -- 16 [f=6];
35 -- 18 [f=16];
36 -- 46 [f=4];
5 -- 7 [f=1];
5 -- 36 [f=6];
7 -- 32 [f=1];
7 -- 11 [f=2];
7 -- 14 [f=17];
11 -- 40 [f=1];
11 -- 50 [f=1];
22 -- 46 [f=1];
28 -- 43 [f=1];
28 -- 8 [f=18];
32 -- 28 [f=1];
32 -- 39 [f=13];
32 -- 42 [f=15];
40 -- 22 [f=1];
40 -- 47 [f=1];
43 -- 11 [f=1];
43 -- 17 [f=19];
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,55 @@
/* courtesy Ian Darwin and Geoff Collyer, Softquad Inc. */
digraph unix {
size="6,6";
node [color=lightblue, style=filled];
"5th Edition" -> "6th Edition";
"5th Edition" -> "PWB 1.0";
"6th Edition" -> "LSX";
"6th Edition" -> "1 BSD";
"6th Edition" -> "Mini Unix";
"6th Edition" -> "Wollongong";
"6th Edition" -> "Interdata";
"Interdata" -> "Unix/TS 3.0";
"Interdata" -> "PWB 2.0";
"Interdata" -> "7th Edition";
"7th Edition" -> "8th Edition";
"7th Edition" -> "32V";
"7th Edition" -> "V7M";
"7th Edition" -> "Ultrix-11";
"7th Edition" -> "Xenix";
"7th Edition" -> "UniPlus+";
"V7M" -> "Ultrix-11";
"8th Edition" -> "9th Edition";
"1 BSD" -> "2 BSD";
"2 BSD" -> "2.8 BSD";
"2.8 BSD" -> "Ultrix-11";
"2.8 BSD" -> "2.9 BSD";
"32V" -> "3 BSD";
"3 BSD" -> "4 BSD";
"4 BSD" -> "4.1 BSD";
"4.1 BSD" -> "4.2 BSD";
"4.1 BSD" -> "2.8 BSD";
"4.1 BSD" -> "8th Edition";
"4.2 BSD" -> "4.3 BSD";
"4.2 BSD" -> "Ultrix-32";
"PWB 1.0" -> "PWB 1.2";
"PWB 1.0" -> "USG 1.0";
"PWB 1.2" -> "PWB 2.0";
"USG 1.0" -> "CB Unix 1";
"USG 1.0" -> "USG 2.0";
"CB Unix 1" -> "CB Unix 2";
"CB Unix 2" -> "CB Unix 3";
"CB Unix 3" -> "Unix/TS++";
"CB Unix 3" -> "PDP-11 Sys V";
"USG 2.0" -> "USG 3.0";
"USG 3.0" -> "Unix/TS 3.0";
"PWB 2.0" -> "Unix/TS 3.0";
"Unix/TS 1.0" -> "Unix/TS 3.0";
"Unix/TS 3.0" -> "TS 4.0";
"Unix/TS++" -> "TS 4.0";
"CB Unix 3" -> "TS 4.0";
"TS 4.0" -> "System V.0";
"System V.0" -> "System V.2";
"System V.2" -> "System V.3";
}

View File

@@ -0,0 +1,67 @@
digraph world {
size="7,7";
{rank=same; S8 S24 S1 S35 S30;}
{rank=same; T8 T24 T1 T35 T30;}
{rank=same; 43 37 36 10 2;}
{rank=same; 25 9 38 40 13 17 12 18;}
{rank=same; 26 42 11 3 33 19 39 14 16;}
{rank=same; 4 31 34 21 41 28 20;}
{rank=same; 27 5 22 32 29 15;}
{rank=same; 6 23;}
{rank=same; 7;}
S8 -> 9;
S24 -> 25;
S24 -> 27;
S1 -> 2;
S1 -> 10;
S35 -> 43;
S35 -> 36;
S30 -> 31;
S30 -> 33;
9 -> 42;
9 -> T1;
25 -> T1;
25 -> 26;
27 -> T24;
2 -> {3 ; 16 ; 17 ; T1 ; 18}
10 -> { 11 ; 14 ; T1 ; 13; 12;}
31 -> T1;
31 -> 32;
33 -> T30;
33 -> 34;
42 -> 4;
26 -> 4;
3 -> 4;
16 -> 15;
17 -> 19;
18 -> 29;
11 -> 4;
14 -> 15;
37 -> {39 ; 41 ; 38 ; 40;}
13 -> 19;
12 -> 29;
43 -> 38;
43 -> 40;
36 -> 19;
32 -> 23;
34 -> 29;
39 -> 15;
41 -> 29;
38 -> 4;
40 -> 19;
4 -> 5;
19 -> {21 ; 20 ; 28;}
5 -> {6 ; T35 ; 23;}
21 -> 22;
20 -> 15;
28 -> 29;
6 -> 7;
15 -> T1;
22 -> T35;
22 -> 23;
29 -> T30;
7 -> T8;
23 -> T24;
23 -> T1;
}

View File

@@ -0,0 +1,266 @@
<!doctype html>
<html>
<head>
<title>Network | DataSet</title>
<style type="text/css">
html, body {
font: 11pt arial;
}
h1 {
font-size: 150%;
margin: 5px 0;
}
h2 {
font-size: 100%;
margin: 5px 0;
}
table.view {
width: 100%;
}
table td {
vertical-align: top;
}
table table {
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
}
table table td {
vertical-align: middle;
}
input[type=text], pre {
border: 1px solid lightgray;
}
pre {
margin: 0;
padding: 5px;
font-size: 10pt;
}
#network {
width: 100%;
height: 400px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
var nodes, edges, network;
// convenience method to stringify a JSON object
function toJSON(obj) {
return JSON.stringify(obj, null, 4);
}
function addNode() {
try {
nodes.add({
id: document.getElementById('node-id').value,
label: document.getElementById('node-label').value
});
}
catch (err) {
alert(err);
}
}
function updateNode() {
try {
nodes.update({
id: document.getElementById('node-id').value,
label: document.getElementById('node-label').value
});
}
catch (err) {
alert(err);
}
}
function removeNode() {
try {
nodes.remove({id: document.getElementById('node-id').value});
}
catch (err) {
alert(err);
}
}
function addEdge() {
try {
edges.add({
id: document.getElementById('edge-id').value,
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value
});
}
catch (err) {
alert(err);
}
}
function updateEdge() {
try {
edges.update({
id: document.getElementById('edge-id').value,
from: document.getElementById('edge-from').value,
to: document.getElementById('edge-to').value
});
}
catch (err) {
alert(err);
}
}
function removeEdge() {
try {
edges.remove({id: document.getElementById('edge-id').value});
}
catch (err) {
alert(err);
}
}
function draw() {
// create an array with nodes
nodes = new vis.DataSet();
nodes.on('*', function () {
document.getElementById('nodes').innerHTML = JSON.stringify(nodes.get(), null, 4);
});
nodes.add([
{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
edges = new vis.DataSet();
edges.on('*', function () {
document.getElementById('edges').innerHTML = JSON.stringify(edges.get(), null, 4);
});
edges.add([
{id: '1', from: '1', to: '2'},
{id: '2', from: '1', to: '3'},
{id: '3', from: '2', to: '4'},
{id: '4', from: '2', to: '5'}
]);
// create a network
var container = document.getElementById('network');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw();">
<p>
This example demonstrates dynamically adding, updating and removing nodes
and edges using a DataSet.
</p>
<h1>Adjust</h1>
<table>
<tr>
<td>
<h2>Node</h2>
<table>
<tr>
<td></td>
<td><label for="node-id">Id</label></td>
<td><input id="node-id" type="text" value="6"></td>
</tr>
<tr>
<td></td>
<td><label for="node-label">Label</label></td>
<td><input id="node-label" type="text" value="Node 6"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="node-add" onclick="addNode();">Add</button>
<button id="node-update" onclick="updateNode();">Update</button>
<button id="node-remove" onclick="removeNode();">Remove</button>
</td>
</tr>
</table>
</td>
<td>
<h2>Edge</h2>
<table>
<tr>
<td></td>
<td><label for="edge-id">Id</label></td>
<td><input id="edge-id" type="text" value="5"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-from">From</label></td>
<td><input id="edge-from" type="text" value="3"></td>
</tr>
<tr>
<td></td>
<td><label for="edge-to">To</label></td>
<td><input id="edge-to" type="text" value="4"></td>
</tr>
<tr>
<td></td>
<td>Action</td>
<td>
<button id="edge-add" onclick="addEdge();">Add</button>
<button id="edge-update" onclick="updateEdge();">Update</button>
<button id="edge-remove" onclick="removeEdge();">Remove</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
<h1>View</h1>
<table class="view">
<colgroup>
<col width="25%">
<col width="25%">
<col width="50%">
</colgroup>
<tr>
<td>
<h2>Nodes</h2>
<pre id="nodes"></pre>
</td>
<td>
<h2>Edges</h2>
<pre id="edges"></pre>
</td>
<td>
<h2>Network</h2>
<div id="network"></div>
</td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,174 @@
<!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>Dynamic Data - Importing from Gephi (JSON)</title>
<script type="text/javascript" src="../exampleUtil.js"></script>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css">
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
div.nodeContent {
position: relative;
border: 1px solid lightgray;
width: 480px;
height: 780px;
margin-top: -802px;
margin-left: 810px;
padding: 10px;
}
pre {
padding: 5px;
margin: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
</style>
</head>
<body>
<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how to import a JSON file exported by Gephi. The two
options available for the import are
available through the checkboxes. You can download the Gephi JSON exporter
here:
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
All of Gephi's attributes are also contained within the node elements. This
means you can access all of this data through the DataSet.
<br/>
</div>
<p>
<label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
<label><input type="checkbox" id="parseColor"/> Parse the color instead of
copy (adds borders, highlights etc.)</label>
</p>
<div id="mynetwork"></div>
<div class="nodeContent"><h4>Node Content:</h4>
<pre id="nodeContent"></pre>
</div>
<script type="text/javascript">
var network;
var nodes = new vis.DataSet();
var edges = new vis.DataSet();
var gephiImported;
var fixedCheckbox = document.getElementById('fixed');
fixedCheckbox.onchange = redrawAll;
var parseColorCheckbox = document.getElementById('parseColor');
parseColorCheckbox.onchange = redrawAll;
var nodeContent = document.getElementById('nodeContent');
loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
font: {
face: 'Tahoma'
}
},
edges: {
width: 0.15,
smooth: {
type: 'continuous'
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -10000,
springConstant: 0.002,
springLength: 150
}
}
};
network = new vis.Network(container, data, options);
network.on('click', function (params) {
if (params.nodes.length > 0) {
var data = nodes.get(params.nodes[0]); // get the data from selected node
nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
}
})
/**
* This function fills the DataSets. These DataSets will update the network.
*/
function redrawAll(gephiJSON) {
if (gephiJSON.nodes === undefined) {
gephiJSON = gephiImported;
}
else {
gephiImported = gephiJSON;
}
nodes.clear();
edges.clear();
var fixed = fixedCheckbox.checked;
var parseColor = parseColorCheckbox.checked;
var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
fixed: fixed,
parseColor: parseColor
});
// add the parsed data to the DataSets.
nodes.add(parsed.nodes);
edges.add(parsed.edges);
var data = nodes.get(2); // get the data from node 2 as example
nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
network.fit(); // zoom to fit
}
</script>
</body>
</html>

View File

@@ -0,0 +1,86 @@
<!doctype html>
<html>
<head>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3},
{from: 2, to: 9, value: 5},
{from: 2, to: 10,value: 1},
{from: 4, to: 6, value: 8},
{from: 5, to: 7, value: 2},
{from: 4, to: 5, value: 1},
{from: 9, to: 10,value: 2},
{from: 2, to: 3, value: 6},
{from: 3, to: 9, value: 4},
{from: 5, to: 3, value: 1},
{from: 2, to: 7, value: 4}
];
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
scaling: {
customScalingFunction: function (min,max,total,value) {
return value/total;
},
min:5,
max:150
}
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over nodes and edges to get more information.
</p>
<div id="mynetwork"></div>
</body>
</html>

View File

@@ -0,0 +1,79 @@
<!doctype html>
<html>
<head>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'},
{from: 2, to: 9, value: 5, title: '5 emails per week'},
{from: 2, to: 10,value: 1, title: '1 emails per week'},
{from: 4, to: 6, value: 8, title: '8 emails per week'},
{from: 5, to: 7, value: 2, title: '2 emails per week'},
{from: 4, to: 5, value: 1, title: '1 emails per week'},
{from: 9, to: 10,value: 2, title: '2 emails per week'},
{from: 2, to: 3, value: 6, title: '6 emails per week'},
{from: 3, to: 9, value: 4, title: '4 emails per week'},
{from: 5, to: 3, value: 1, title: '1 emails per week'},
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over the edges to get a popup with more information.
</p>
<div id="mynetwork"></div>
</body>
</html>

View File

@@ -0,0 +1,85 @@
<!doctype html>
<html>
<head>
<title>Network | Sizing</title>
<style type="text/css">
html, body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
// create people.
// value corresponds with the age of the person
nodes = [
{id: 1, value: 2, label: 'Algie' },
{id: 2, value: 31, label: 'Alston'},
{id: 3, value: 12, label: 'Barney'},
{id: 4, value: 16, label: 'Coley' },
{id: 5, value: 17, label: 'Grant' },
{id: 6, value: 15, label: 'Langdon'},
{id: 7, value: 6, label: 'Lee'},
{id: 8, value: 5, label: 'Merlin'},
{id: 9, value: 30, label: 'Mick'},
{id: 10, value: 18, label: 'Tod'},
];
// create connections between people
// value corresponds with the amount of contact between two people
edges = [
{from: 2, to: 8, value: 3, title: '3 emails per week'},
{from: 2, to: 9, value: 5, title: '5 emails per week'},
{from: 2, to: 10,value: 1, title: '1 emails per week'},
{from: 4, to: 6, value: 8, title: '8 emails per week'},
{from: 5, to: 7, value: 2, title: '2 emails per week'},
{from: 4, to: 5, value: 1, title: '1 emails per week'},
{from: 9, to: 10,value: 2, title: '2 emails per week'},
{from: 2, to: 3, value: 6, title: '6 emails per week'},
{from: 3, to: 9, value: 4, title: '4 emails per week'},
{from: 5, to: 3, value: 1, title: '1 emails per week'},
{from: 2, to: 7, value: 4, title: '4 emails per week'}
];
// Instantiate our network object.
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
scaling:{
label: {
min:8,
max:20
}
}
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<p>
Scale nodes and edges depending on their value. Hover over edges to get a popup with more information.
</p>
<div id="mynetwork"></div>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,77 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</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: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
The default is <code>'arrow'</code>.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'A'},
{id: 2, label: 'B'},
{id: 3, label: 'C'},
{id: 4, label: 'D'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:{
to: {
enabled: true,
type: 'circle'
}
}},
{from: 3, to: 4, arrows:{
to: {
enabled: true,
type: 'bar'
}
}},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
/*
// Enable this to make the endpoints smaller/larger
edges: {
arrows: {
to: {
scaleFactor: 5
}
}
}
*/
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
There are a lot of options with arrows! They can also be combined with dashed lines.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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'},
{id: 6, label: 'Node 6'},
{id: 7, label: 'Node 7'},
{id: 8, label: 'Node 8'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 8, arrows:'to', dashes:true},
{from: 1, to: 3, arrows:'to'},
{from: 1, to: 2, arrows:'to, from'},
{from: 2, to: 4, arrows:'to, middle'},
{from: 2, to: 5, arrows:'to, middle, from'},
{from: 5, to: 6, arrows:{to:{scaleFactor:2}}},
{from: 6, to: 7, arrows:{middle:{scaleFactor:0.5},from:true}}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,71 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:800px;
}
</style>
</head>
<body>
<p>
There are a lot of options with colors. You can manually define a color or inherit the color from the nodes. You can set the opacity
to override any opacity given by a color. <b>IN ORDER TO USE THE OPACITY, BOTH THE NODES AND THE EDGES NEED COLORS IN HEX OR RGB</b>!
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'node\none', shape: 'box', color:'#97C2FC'},
{id: 2, label: 'node\ntwo', shape: 'circle', color:'#FFFF00'},
{id: 3, label: 'node\nthree', shape: 'diamond', color:'#FB7E81'},
{id: 4, label: 'node\nfour', shape: 'dot', size: 10, color:'#7BE141'},
{id: 5, label: 'node\nfive', shape: 'ellipse', color:'#6E6EFD'},
{id: 6, label: 'node\nsix', shape: 'star', color:'#C2FABC'},
{id: 7, label: 'node\nseven', shape: 'triangle', color:'#FFA807'},
{id: 8, label: 'node\neight', shape: 'triangleDown', color:'#6E6EFD'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 8, color:{color:'red'}},
{from: 1, to: 3, color:'rgb(20,24,200)'},
{from: 1, to: 2, color:{color:'rgba(30,30,30,0.2)', highlight:'blue'}},
{from: 2, to: 4, color:{inherit:'to'}},
{from: 2, to: 5, color:{inherit:'from'}},
{from: 5, to: 6, color:{inherit:'both'}},
{from: 6, to: 7, color:{color:'#ff0000', opacity:0.3}},
{from: 6, to: 8, color:{opacity:0.3}},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'circle'
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,57 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Playing with dashes.
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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'},
{id: 6, label: 'Node 6'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3, dashes:true},
{from: 1, to: 2, dashes:[5,5]},
{from: 2, to: 4, dashes:[5,5,3,3]},
{from: 2, to: 5, dashes:[2,2,10,10]},
{from: 2, to: 6, dashes:false},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,78 @@
<!doctype html>
<html>
<head>
<title>Network | Static smooth curves</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 500px;
height: 500px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h2>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 node around 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 />
When you select the dynamic type, you can see the interaction with the fixed node and the edge, any other type will not interact with other nodes.
<br /> <br />
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Fixed node', x:0, y:0, fixed:true},
{id: 2, label: 'Drag me', x:150, y:130, physics:false},
{id: 3, label: 'Obstacle', x:80, y:-80, fixed:true, mass:10}
];
// create an array with edges
var edges = [
{from: 1, to: 2, arrows:'to'}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:true,
configure:function (option, path) {
if (path.indexOf('smooth') !== -1 || option === 'smooth') {
return true;
}
return false;
},
edges: {
smooth: {
type: 'continuous'
}
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -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-network.min.css">
<script src="../datasources/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
#optionsContainer {
height:280px;
}
</style>
</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>

View File

@@ -0,0 +1,132 @@
<!doctype html>
<html>
<head>
<title>Network | Interaction events</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges. Some of the events are logged in the console in improve readability.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1', title: 'I have a popup!'},
{id: 2, label: 'Node 2', title: 'I have a popup!'},
{id: 3, label: 'Node 3', title: 'I have a popup!'},
{id: 4, label: 'Node 4', title: 'I have a popup!'},
{id: 5, label: 'Node 5', title: 'I have a popup!'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction:{hover:true},
manipulation: {
enabled: true
}
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
network.on("doubleClick", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>doubleClick event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("oncontext", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("dragStart", function (params) {
// There's no point in displaying this event on screen, it gets immediately overwritten
params.event = "[original event]";
console.log('dragStart Event:', params);
console.log('dragStart event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
network.on("dragging", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>dragging event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("dragEnd", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
console.log('dragEnd Event:', params);
console.log('dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
});
network.on("zoom", function (params) {
document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);
});
network.on("showPopup", function (params) {
document.getElementById('eventSpan').innerHTML = '<h2>showPopup event: </h2>' + JSON.stringify(params, null, 4);
});
network.on("hidePopup", function () {
console.log('hidePopup Event');
});
network.on("select", function (params) {
console.log('select Event:', params);
});
network.on("selectNode", function (params) {
console.log('selectNode Event:', params);
});
network.on("selectEdge", function (params) {
console.log('selectEdge Event:', params);
});
network.on("deselectNode", function (params) {
console.log('deselectNode Event:', params);
});
network.on("deselectEdge", function (params) {
console.log('deselectEdge Event:', params);
});
network.on("hoverNode", function (params) {
console.log('hoverNode Event:', params);
});
network.on("hoverEdge", function (params) {
console.log('hoverEdge Event:', params);
});
network.on("blurNode", function (params) {
console.log('blurNode Event:', params);
});
network.on("blurEdge", function (params) {
console.log('blurEdge Event:', params);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,73 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
Create a simple network with some nodes and edges.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
network.on("startStabilizing", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Starting Stabilization</h3>';
console.log("started")
});
network.on("stabilizationProgress", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Stabilization progress</h3>' + JSON.stringify(params, null, 4);
console.log("progress:",params);
});
network.on("stabilizationIterationsDone", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Stabilization iterations complete</h3>';
console.log("finished stabilization interations");
});
network.on("stabilized", function (params) {
document.getElementById('eventSpan').innerHTML = '<h3>Stabilized!</h3>' + JSON.stringify(params, null, 4);
console.log("stabilized!", params);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:600px;
}
</style>
</head>
<body>
<p>
You can draw on the canvas using normal HTML5 canvas functions. The before drawing will be behind the network, the after drawing will be in front of the network.
</p>
<div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{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 = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
network.on("initRedraw", function () {
// do something like move some custom elements?
});
network.on("beforeDrawing", function (ctx) {
var nodeId = 1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = '#A6D5F7';
ctx.fillStyle = '#294475';
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,50);
ctx.fill();
ctx.stroke();
});
network.on("afterDrawing", function (ctx) {
var nodeId = 1;
var nodePosition = network.getPositions([nodeId]);
ctx.strokeStyle = '#294475';
ctx.lineWidth = 4;
ctx.fillStyle = '#A6D5F7';
ctx.circle(nodePosition[nodeId].x, nodePosition[nodeId].y,20);
ctx.fill();
ctx.stroke();
});
</script>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<html>
<head>
<style type="text/css">
#mynetwork {
width: 900px;
height: 850px;
border: 1px solid lightgray;
}
</style>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
<script src="disassemblerExample.js"></script>
</head>
<body>
<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
a program you wish to analyze.</p>
<p><div id="mynetwork"></div><br /></p>
<script type="text/javascript">
var container = document.getElementById('mynetwork');
var data = {'nodes': nodes, 'edges': edges}
var gph = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,53 @@
var options = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
var nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
];
//
// Note: there are a couple of node id's present here which do not exist
// - cfg_0x00417563
// - cfg_0x00403489
// - cfg_0x0042f03f
//
// The edges with these id's will not load into the Network instance.
//
var edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
];

View File

@@ -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-network.min.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: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {iterations: 150}
}
};
var network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<p>
Relations between the characters of "Les miserables".
</p>
<div id="mynetwork"></div>
</body>
</html>

View File

@@ -0,0 +1,504 @@
<!doctype html>
<html>
<head>
<title>Network | Les miserables</title>
<style type="text/css">
#mynetwork {
width: 900px;
height: 900px;
border: 1px solid lightgray;
}
#loadingBar {
position:absolute;
top:0px;
left:0px;
width: 902px;
height: 902px;
background-color:rgba(200,200,200,0.8);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
opacity:1;
}
#wrapper {
position:relative;
width:900px;
height:900px;
}
#text {
position:absolute;
top:8px;
left:530px;
width:30px;
height:50px;
margin:auto auto auto auto;
font-size:22px;
color: #000000;
}
div.outerBorder {
position:relative;
top:400px;
width:600px;
height:44px;
margin:auto auto auto auto;
border:8px solid rgba(0,0,0,0.1);
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
border-radius:72px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
#border {
position:absolute;
top:10px;
left:10px;
width:500px;
height:23px;
margin:auto auto auto auto;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
border-radius:10px;
}
#bar {
position:absolute;
top:0px;
left:0px;
width:20px;
height:20px;
margin:auto auto auto auto;
border-radius:11px;
border:2px solid rgba(30,30,30,0.05);
background: rgb(0, 173, 246); /* Old browsers */
box-shadow: 2px 0px 4px rgba(0,0,0,0.4);
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.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
},
layout:{
randomSeed:34
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled:true,
iterations:2000,
updateInterval:25
}
}
};
var network = new vis.Network(container, data, options);
network.on("stabilizationProgress", function(params) {
var maxWidth = 496;
var minWidth = 20;
var widthFactor = params.iterations/params.total;
var width = Math.max(minWidth,maxWidth * widthFactor);
document.getElementById('bar').style.width = width + 'px';
document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
});
network.once("stabilizationIterationsDone", function() {
document.getElementById('text').innerHTML = '100%';
document.getElementById('bar').style.width = '496px';
document.getElementById('loadingBar').style.opacity = 0;
// really clean the dom element
setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
});
}
</script>
</head>
<body onload="draw()">
<p>
With the new stabilization events you can implement your own custom loading bar for all those long loading times!
</p>
<div id="wrapper">
<div id="mynetwork"></div>
<div id="loadingBar">
<div class="outerBorder">
<div id="text">0%</div>
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,162 @@
<!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-network.min.css">
<script src="../datasources/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
</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 1ms, 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 allNodes;
var highlightActive = false;
var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
function redrawAll() {
var container = document.getElementById('mynetwork');
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: false,
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js
network = new vis.Network(container, data, options);
// get a JSON object
allNodes = nodesDataset.get({returnType:"Object"});
network.on("click",neighbourhoodHighlight);
}
function neighbourhoodHighlight(params) {
// if something is selected:
if (params.nodes.length > 0) {
highlightActive = true;
var i,j;
var selectedNode = params.nodes[0];
var degrees = 2;
// mark all nodes as hard to read.
for (var nodeId in allNodes) {
allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
if (allNodes[nodeId].hiddenLabel === undefined) {
allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
allNodes[nodeId].label = undefined;
}
}
var connectedNodes = network.getConnectedNodes(selectedNode);
var allConnectedNodes = [];
// get the second degree nodes
for (i = 1; i < degrees; i++) {
for (j = 0; j < connectedNodes.length; j++) {
allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
}
}
// all second degree nodes get a different color and their label back
for (i = 0; i < allConnectedNodes.length; i++) {
allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
}
}
// all first degree nodes get their own color and their label back
for (i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
allNodes[connectedNodes[i]].hiddenLabel = undefined;
}
}
// the main node gets its own color and its label back.
allNodes[selectedNode].color = undefined;
if (allNodes[selectedNode].hiddenLabel !== undefined) {
allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
allNodes[selectedNode].hiddenLabel = undefined;
}
}
else if (highlightActive === true) {
// reset all nodes
for (var nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].hiddenLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
allNodes[nodeId].hiddenLabel = undefined;
}
}
highlightActive = false
}
// transform the object into an array
var updateArray = [];
for (nodeId in allNodes) {
if (allNodes.hasOwnProperty(nodeId)) {
updateArray.push(allNodes[nodeId]);
}
}
nodesDataset.update(updateArray);
}
redrawAll()
</script>
</body></html>

View File

@@ -0,0 +1,163 @@
<!DOCTYPE html>
<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Network | Images</title>
<style type="text/css">
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mynetwork {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
var LENGTH_MAIN = 350,
LENGTH_SERVER = 150,
LENGTH_SUB = 50,
WIDTH_SCALE = 2,
GREEN = 'green',
RED = '#C5000B',
ORANGE = 'orange',
//GRAY = '#666666',
GRAY = 'gray',
BLACK = '#2B1B17';
// Called when the Visualization API is loaded.
function draw() {
// Create a data table with nodes.
nodes = [];
// Create a data table with links.
edges = [];
nodes.push({id: 1, label: '192.168.0.1', group: 'switch', value: 10});
nodes.push({id: 2, label: '192.168.0.2', group: 'switch', value: 8});
nodes.push({id: 3, label: '192.168.0.3', group: 'switch', value: 6});
edges.push({from: 1, to: 2, length: LENGTH_MAIN, width: WIDTH_SCALE * 6, label: '0.71 mbps'});
edges.push({from: 1, to: 3, length: LENGTH_MAIN, width: WIDTH_SCALE * 4, label: '0.55 mbps'});
// group around 2
for (var i = 100; i <= 104; i++) {
var value = 1;
var width = WIDTH_SCALE * 2;
var color = GRAY;
var label = null;
if (i === 103) {
value = 5;
width = 3;
}
if (i === 102) {
color = RED;
label = 'error';
}
nodes.push({id: i, label: '192.168.0.' + i, group: 'desktop', value: value});
edges.push({from: 2, to: i, length: LENGTH_SUB, color: color, fontColor: color, width: width, label: label});
}
nodes.push({id: 201, label: '192.168.0.201', group: 'desktop', value: 1});
edges.push({from: 2, to: 201, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE});
// group around 3
nodes.push({id: 202, label: '192.168.0.202', group: 'desktop', value: 4});
edges.push({from: 3, to: 202, length: LENGTH_SUB, color: GRAY, width: WIDTH_SCALE * 2});
for (var i = 230; i <= 231; i++ ) {
nodes.push({id: i, label: '192.168.0.' + i, group: 'mobile', value: 2});
edges.push({from: 3, to: i, length: LENGTH_SUB, color: GRAY, fontColor: GRAY, width: WIDTH_SCALE});
}
// group around 1
nodes.push({id: 10, label: '192.168.0.10', group: 'server', value: 10});
edges.push({from: 1, to: 10, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 6, label: '0.92 mbps'});
nodes.push({id: 11, label: '192.168.0.11', group: 'server', value: 7});
edges.push({from: 1, to: 11, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE * 3, label: '0.68 mbps'});
nodes.push({id: 12, label: '192.168.0.12', group: 'server', value: 3});
edges.push({from: 1, to: 12, length: LENGTH_SERVER, color: GRAY, width: WIDTH_SCALE, label: '0.3 mbps'});
nodes.push({id: 204, label: 'Internet', group: 'internet', value: 10});
edges.push({from: 1, to: 204, length: 200, width: WIDTH_SCALE * 3, label: '0.63 mbps'});
// legend
var mynetwork = document.getElementById('mynetwork');
var x = - mynetwork.clientWidth / 2 + 50;
var y = - mynetwork.clientHeight / 2 + 50;
var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, fixed: true, physics:false});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, fixed: true, physics:false});
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, fixed: true, physics:false});
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, fixed: true, physics:false});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, fixed: true, physics:false});
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
scaling: {
min: 16,
max: 32
}
},
edges: {
color: GRAY,
smooth: false
},
physics:{
barnesHut:{gravitationalConstant:-30000},
stabilization: {iterations:2500}
},
groups: {
'switch': {
shape: 'triangle',
color: '#FF9900' // orange
},
desktop: {
shape: 'dot',
color: "#2B7CE9" // blue
},
mobile: {
shape: 'dot',
color: "#5A1E5C" // purple
},
server: {
shape: 'square',
color: "#C5000B" // red
},
internet: {
shape: 'square',
color: "#109618" // green
}
}
};
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw()">
<div id="mynetwork"></div>
</body></html>

View File

@@ -0,0 +1,98 @@
<!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-network.min.css">
<script src="../datasources/WorldCup2014.js"></script>
<style type="text/css">
#mynetwork {
width: 800px;
height: 800px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<h2>Performance - World Cup Network</h2>
<div style="width:700px; font-size:14px;">
This example shows the performance of vis with a larger network. The edges in
particular (~9200) are very computationally intensive
to draw. Drag and hold the graph to see the performance difference if the
edges are hidden.
<br/><br/>
We use the following physics configuration: <br/>
<code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001,
springLength: 200}}</code>
<br/><br/>
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
var network;
function redrawAll() {
// remove positoins
for (var i = 0; i < nodes.length; i++) {
delete nodes[i].x;
delete nodes[i].y;
}
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -80000,
springConstant: 0.001,
springLength: 200
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
// Note: data is coming from ./datasources/WorldCup2014.js
network = new vis.Network(container, data, options);
}
redrawAll()
</script>
</body>
</html>

View File

@@ -0,0 +1,133 @@
/**
* Created by Alex on 5/20/2015.
*/
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText));
}
else {
error(xhr);
}
}
};
xhr.open('GET', path, true);
xhr.send();
}
function getScaleFreeNetwork(nodeCount) {
var nodes = [];
var edges = [];
var connectionCount = [];
// randomly create some nodes and edges
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]++;
}
}
return {nodes:nodes, edges:edges};
}
var randomSeed = 764; // Math.round(Math.random()*1000);
function seededRandom() {
var x = Math.sin(randomSeed++) * 10000;
return x - Math.floor(x);
}
function getScaleFreeNetworkSeeded(nodeCount, seed) {
if (seed) {
randomSeed = Number(seed);
}
var nodes = [];
var edges = [];
var connectionCount = [];
var edgesId = 0;
// randomly create some nodes and edges
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({
id: edgesId++,
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
else if (i > 1) {
var conn = edges.length * 2;
var rand = Math.floor(seededRandom() * 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({
id: edgesId++,
from: from,
to: to
});
connectionCount[from]++;
connectionCount[to]++;
}
}
return {nodes:nodes, edges:edges};
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -0,0 +1,82 @@
<html>
<head>
<title>Network | Selected/Unselected Image</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font: 10pt arial;
}
#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([{
id: 1,
shape: 'image',
size: 20,
label: 'No select image',
image: './unselected.svg',
}, {
id: 2,
shape: 'image',
size: 20,
label: 'Select image broken',
image: {
unselected: './unselected.svg',
selected: './BROKEN_LINK/selected.svg',
},
}, {
id: 3,
shape: 'image',
size: 20,
label: 'Select works!',
image: {
unselected: './unselected.svg',
selected: './selected.svg',
},
shapeProperties: {
borderDashes: [15, 5],
interpolation: false,
}
}]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 3},
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {
layout:{
randomSeed: 5
},
nodes: {
brokenImage: './broken-image.png',
}
};
// initialize!
var network = new vis.Network(container, data, options);
</script>
</body>
</html>

View File

@@ -0,0 +1,53 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="svg4137" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="504.566px"
height="577.672px" viewBox="0 0 504.566 577.672" enable-background="new 0 0 504.566 577.672" xml:space="preserve">
<g id="path4697_1_">
<polygon fill="#FFCB94" points="16,152.415 252.29,15.998 488.572,152.415 488.572,425.249 252.29,561.667 16.008,425.249 "/>
<g>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="16,152.425 16,152.415 16.009,152.41
"/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2077,0,68.2077,68.2032" x1="75.075" y1="118.309" x2="222.748" y2="33.053"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="252.281,16.002 252.29,15.998
252.299,16.002 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2058,0,68.2058,68.2013" x1="311.363" y1="50.104" x2="459.031" y2="135.36"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="488.563,152.41 488.572,152.415
488.572,152.425 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2056,0,68.2056,68.2011" x1="488.572" y1="220.626" x2="488.572" y2="391.138"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="488.572,425.239 488.572,425.249
488.563,425.253 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2059,0,68.2059,68.2014" x1="429.499" y1="459.354" x2="281.831" y2="544.611"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="252.299,561.662 252.29,561.667
252.281,561.662 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2061,0,68.2061,68.2016" x1="193.218" y1="527.561" x2="45.549" y2="442.304"/>
<polyline fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" points="16.017,425.253 16.008,425.249
16.008,425.239 "/>
<line fill="none" stroke="#214255" stroke-width="40" stroke-miterlimit="100" stroke-dasharray="68.2056,0,68.2056,68.2011" x1="16.006" y1="357.038" x2="16.001" y2="186.525"/>
</g>
</g>
<g id="path4697">
<g>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="16.002,228.415 16,152.415
81.819,114.416 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="186.472,53.997 252.29,15.998
318.108,53.998 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="422.754,114.415 488.572,152.415
488.572,228.415 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="488.572,349.249 488.572,425.249
422.754,463.249 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="318.108,523.667 252.29,561.667
186.472,523.667 "/>
<polyline fill="none" stroke="#F7941E" stroke-width="40" stroke-miterlimit="100" points="81.826,463.249 16.008,425.249
16.006,349.249 "/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="svg4137" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="203.79mm" width="178mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 630.70347 722.08501">
<g id="layer1" transform="translate(61.066 -28.463)">
<path id="path4697" stroke-linejoin="round" fill="#f57f17" stroke="#37474e" stroke-linecap="round" stroke-miterlimit="100" stroke-width="40" d="m-41.066 218.98 295.36-170.52l295.35 170.52 0.00001 341.04-295.35 170.52-295.35-170.52z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 636 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1000 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

View File

@@ -0,0 +1,14 @@
Refresh Cl icon set
http://www.iconarchive.com/show/refresh-cl-icons-by-tpdkdesign.net.html
http://www.iconarchive.com/artist/tpdkdesign.net.html
Artist: TpdkDesign.net
License: Free for non-commercial use.
Name: TpdkDesign.net
URL: http://www.tpdkdesign.net
Available for custom work: No
Default License: Free for non-commercial use.
Commercial usage: Not allowed

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 873 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 874 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Some files were not shown because too many files have changed in this diff Show More