@ -0,0 +1,108 @@ | |||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||
<html> | |||
<head> | |||
<title>Graph | Mobile friendly</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt arial; | |||
padding: 0; | |||
margin: 0; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
#mygraph { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
</style> | |||
<!-- for mobile devices like android and iphone --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |||
<script type="text/javascript" src="../../vis.js"></script> | |||
<script type="text/javascript"> | |||
var nodes = null; | |||
var edges = null; | |||
var graph = null; | |||
// Called when the Visualization API is loaded. | |||
function draw() { | |||
nodes = []; | |||
edges = []; | |||
var EDGE_LENGTH = 50; | |||
var connectionCount = []; | |||
// randomly create some nodes | |||
var nodeCount = 20; | |||
var cols = parseInt(Math.sqrt(nodeCount)); | |||
for (var i = 0; i < nodeCount; i++) { | |||
nodes.push({ | |||
id: i, | |||
label: '' + i | |||
}); | |||
connectionCount[i] = 0; | |||
// create links in a scale-free-network way | |||
if (i == 1) { | |||
var from = i; | |||
var to = 0; | |||
edges.push({ | |||
from: from, | |||
to: to, | |||
length: EDGE_LENGTH | |||
}); | |||
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, | |||
length: EDGE_LENGTH | |||
}); | |||
connectionCount[from]++; | |||
connectionCount[to]++; | |||
} | |||
} | |||
// Create a graph | |||
var container = document.getElementById('mygraph'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
stabilize: false, | |||
nodes: { | |||
shape: 'dot', | |||
radius: 24, | |||
fontSize: 24 | |||
}, | |||
edges: { | |||
width: 2 | |||
} | |||
}; | |||
graph = new vis.Graph(container, data, options); | |||
} | |||
</script> | |||
</head> | |||
<body onload="draw()" onresize="graph.redraw();"> | |||
<div id="mygraph"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,80 @@ | |||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||
<html> | |||
<head> | |||
<title>Graph | Automatic sizing</title> | |||
<style type="text/css"> | |||
html, body { | |||
font: 10pt arial; | |||
} | |||
#mygraph { | |||
width: 600px; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script type="text/javascript" src="../../vis.js"></script> | |||
<script type="text/javascript"> | |||
var nodes = null; | |||
var edges = null; | |||
var graph = null; | |||
var DIR = 'img/soft-scraps-icons/'; | |||
function draw() { | |||
// create people. | |||
// value corresponds with the age of the person | |||
nodes = [ | |||
{id: 1, value: 2, label:'Algie', title: 'Algie (2 years old)'}, | |||
{id: 2, value: 31, label: 'Alston', title: 'Alston (31 years old)'}, | |||
{id: 3, value: 12, label: 'Barney', title: 'Barney (12 years old)'}, | |||
{id: 4, value: 16, label: 'Coley', title: 'Coley (16 years old)'}, | |||
{id: 5, value: 17, label: 'Grant', title: 'Grant (17 years old)'}, | |||
{id: 6, value: 15, label: 'Langdon', title: 'Langdon (15 years old)'}, | |||
{id: 7, value: 6, label: 'Lee', title: 'Lee (6 years old)'}, | |||
{id: 8, value: 5, label: 'Merlin', title: 'Merlin (5 years old)'}, | |||
{id: 9, value: 30, label: 'Mick', title: 'Mick (30 years old)'}, | |||
{id: 10, value: 18, label: 'Tod', title: 'Tod (18 years old)'} | |||
]; | |||
// create connections. | |||
// 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 graph object. | |||
var container = document.getElementById('mygraph'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = { | |||
nodes: { | |||
shape: 'dot' | |||
}, | |||
edges: { | |||
color: '#97C2FC' | |||
} | |||
}; | |||
graph = new vis.Graph(container, data, options); | |||
} | |||
</script> | |||
</head> | |||
<body onload="draw()"> | |||
<div id="mygraph"></div> | |||
</body> | |||
</html> |
@ -0,0 +1,42 @@ | |||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |||
<html> | |||
<head> | |||
<title>Graph | Multiline text</title> | |||
<script type="text/javascript" src="../../vis.js"></script> | |||
<script type="text/javascript"> | |||
function draw() { | |||
// create some nodes | |||
var nodes = [ | |||
{id: 1, label: 'Node in\nthe center', shape: 'text'}, | |||
{id: 2, label: 'Node\nwith\nmultiple\nlines', shape: 'circle'}, | |||
{id: 3, label: 'This is a lot of text\nbut luckily we can spread\nover multiple lines', shape: 'database'}, | |||
{id: 4, label: 'This is text\non multiple lines', shape: 'box'}, | |||
{id: 5, label: 'Little text', shape: 'ellipse'} | |||
]; | |||
// create some edges | |||
var edges = [ | |||
{from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, | |||
{from: 1, to: 3, style: 'dash-line', width: 1, length: 200}, | |||
{from: 1, to: 4, style: 'line', width: 1, length: 200}, | |||
{from: 1, to: 5, style: 'arrow', width: 3, length: 200} | |||
]; | |||
// create a graph | |||
var container = document.getElementById('mygraph'); | |||
var data = { | |||
nodes: nodes, | |||
edges: edges | |||
}; | |||
var options = {}; | |||
var graph = new vis.Graph(container, data, options); | |||
} | |||
</script> | |||
</head> | |||
<body onload="draw()"> | |||
<div id="mygraph"></div> | |||
</body> | |||
</html> |