@ -1,219 +0,0 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<title>Network | DOT language playground</title> | |||
<script type="text/javascript" src="../../../../dist/vis.js"></script> | |||
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<style type="text/css"> | |||
body, html { | |||
font: 10pt sans; | |||
width: 100%; | |||
height: 100%; | |||
padding: 0; | |||
margin: 0; | |||
color: #4d4d4d; | |||
} | |||
#frame { | |||
width: 100%; | |||
height: 99%; | |||
} | |||
#frame td { | |||
padding: 10px; | |||
height: 100%; | |||
} | |||
#error { | |||
color: red; | |||
} | |||
#data { | |||
width: 100%; | |||
height: 100%; | |||
border: 1px solid #d3d3d3; | |||
} | |||
#mynetwork { | |||
float: left; | |||
width: 100%; | |||
height: 100%; | |||
border: 1px solid #d3d3d3; | |||
box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
overflow: hidden; | |||
} | |||
textarea.example { | |||
display: none; | |||
} | |||
</style> | |||
<script src="../../../googleAnalytics.js"></script> | |||
</head> | |||
<body onload="drawExample('example1')"> | |||
<table id="frame"> | |||
<col width="50%"> | |||
<col width="50%"> | |||
<tr> | |||
<td colspan="2" style="height: 50px;"> | |||
<h1>DOT language playground</h1> | |||
<div> | |||
<a href="javascript: drawExample('example1')">example 1</a> | |||
<a href="javascript: drawExample('example2')">example 2</a> | |||
<a href="javascript: drawExample('example3')">example 3</a> | |||
</div> | |||
<div> | |||
<br> | |||
<button id="draw">Draw</button> | |||
<span id="error"></span> | |||
</div> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td> | |||
<textarea id="data"></textarea> | |||
</td> | |||
<td> | |||
<div id="mynetwork"></div> | |||
</td> | |||
</tr> | |||
</table> | |||
<script type="text/javascript"> | |||
var network = null; | |||
var data = null; | |||
var btnDraw = document.getElementById('draw'); | |||
var txtData = document.getElementById('data'); | |||
var txtError = document.getElementById('error'); | |||
btnDraw.onclick = draw; | |||
// resize the network when window resizes | |||
window.onresize = function () { | |||
network.redraw() | |||
}; | |||
function destroy() { | |||
if (network !== null) { | |||
network.destroy(); | |||
network = null; | |||
} | |||
} | |||
// parse and draw the data | |||
function draw () { | |||
destroy(); | |||
try { | |||
txtError.innerHTML = ''; | |||
// Provide a string with data in DOT language | |||
data = { | |||
dot: txtData.value | |||
}; | |||
// create a network | |||
var container = document.getElementById('mynetwork'); | |||
var options = { | |||
physics: { | |||
barnesHut: { | |||
springLength: 200 | |||
} | |||
} | |||
}; | |||
network = new vis.Network(container, data, options); | |||
} | |||
catch (err) { | |||
// set the cursor at the position where the error occurred | |||
var match = /\(char (.*)\)/.exec(err); | |||
if (match) { | |||
var pos = Number(match[1]); | |||
if(txtData.setSelectionRange) { | |||
txtData.focus(); | |||
txtData.setSelectionRange(pos, pos); | |||
} | |||
} | |||
// show an error message | |||
txtError.innerHTML = err.toString(); | |||
} | |||
} | |||
/** | |||
* Draw an example | |||
* @param {String} id HTML id of the textarea containing the example code | |||
*/ | |||
function drawExample(id) { | |||
txtData.value = document.getElementById(id).value; | |||
draw(); | |||
} | |||
</script> | |||
<textarea id="example1" class="example"> | |||
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> | |||
<textarea id="example2" class="example"> | |||
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]; | |||
} | |||
</textarea> | |||
<textarea id="example3" class="example"> | |||
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 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 ; | |||
} | |||
</textarea> | |||
</body> | |||
</html> |
@ -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 ; | |||
} |
@ -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]; | |||
} |
@ -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, | |||
] | |||
} |
@ -0,0 +1,22 @@ | |||
<html> | |||
<head> | |||
<title>Network | DOT Language</title> | |||
<script src="../../../../../dist/vis.js"></script> | |||
<link href="../../../../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script src="../../../../googleAnalytics.js"></script> | |||
</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> |
@ -0,0 +1,208 @@ | |||
<!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.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> | |||
<script src="../../../../googleAnalytics.js"></script> | |||
</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">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); | |||
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> |
@ -1,23 +0,0 @@ | |||
<html> | |||
<head> | |||
<title>Network | DOT Language</title> | |||
<script type="text/javascript" src="../../../../dist/vis.js"></script> | |||
<link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<script src="../../../googleAnalytics.js"></script> | |||
</head> | |||
<body> | |||
<p> | |||
Network supports the DOT language. | |||
</p> | |||
<div id="mynetwork"></div> | |||
<script type="text/javascript"> | |||
var container = document.getElementById('mynetwork'); | |||
var data = { | |||
dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }' | |||
}; | |||
var network = new vis.Network(container, data); | |||
</script> | |||
</body> | |||
</html> |
@ -1,86 +0,0 @@ | |||
<html> | |||
<head> | |||
<title>Network | Graphviz Gallery</title> | |||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |||
<script type="text/javascript" src="../../../dist/vis.js"></script> | |||
<style type="text/css"> | |||
p { | |||
width: 600px; | |||
} | |||
html, body, select { | |||
font: 11pt arial; | |||
} | |||
#mygraph { | |||
width: 100%; | |||
height: 600px; | |||
border: 1px solid lightgray; | |||
} | |||
</style> | |||
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head> | |||
<body> | |||
<script> | |||
if (location.href.substr(0, 5) == 'file:') { | |||
document.write( | |||
'<p style="color: red;">' + | |||
'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 load DOT graphs in ' + | |||
'the <a href="../15_dot_language_playground.html" ' + | |||
'style="color:red;">playground</a>.' + | |||
'</p>'); | |||
} | |||
</script> | |||
<p> | |||
The following examples are unmodified copies from the | |||
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>. | |||
</p> | |||
<p> | |||
Note that some style attributes of Graphviz are not supported by vis.js, | |||
and that vis.js offers options not supported by Graphviz (which could make | |||
some examples look much nicer). | |||
</p> | |||
<p> | |||
<label for="url">Select an example:</label> | |||
<select id="url" onchange="loadData()"> | |||
<option value="data/fsm.gv.txt">fsm</option> | |||
<option value="data/hello.gv.txt">hello</option> | |||
<option value="data/process.gv.txt">process</option> | |||
<option value="data/siblings.gv.txt">siblings</option> | |||
<option value="data/softmaint.gv.txt">softmaint</option> | |||
<option value="data/traffic_lights.gv.txt">traffic_lights</option> | |||
<option value="data/transparency.gv.txt">transparency</option> | |||
<option value="data/twopi2.gv.txt">twopi2</option> | |||
<option value="data/unix.gv.txt">unix</option> | |||
<option value="data/world.gv.txt">world</option> | |||
</select> | |||
</p> | |||
<div id="mygraph"></div> | |||
<script type="text/javascript"> | |||
var container = document.getElementById('mygraph'); | |||
var url = document.getElementById('url'); | |||
var network = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}}); | |||
function loadData () { | |||
$.ajax({ | |||
type: "GET", | |||
url: url.value | |||
}).done(function(data) { | |||
network.setOptions({ | |||
stabilize: false | |||
}); | |||
network.setData( { | |||
dot: data | |||
}); | |||
}); | |||
} | |||
loadData(); | |||
</script> | |||
</body> | |||
</html> |