jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Reworked the dot language playground and merged with the graphviz gallery

flowchartTest
jos 10 years ago
parent
c817962b35
commit
d82973769c
23 changed files with 276 additions and 328 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -219
      examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html
  2. +23
    -0
      examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt
  3. +19
    -0
      examples/network/categories/data/dotLanguage/data/computer_network.gv.txt
  4. +15
    -0
      examples/network/categories/data/dotLanguage/data/simple.gv.txt
  5. +22
    -0
      examples/network/categories/data/dotLanguage/dotLanguage.html
  6. +195
    -0
      examples/network/categories/data/dotLanguage/dotPlayground.html
  7. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/fsm.gv.txt
  8. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/hello.gv.txt
  9. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/process.gv.txt
  10. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/fsm.png
  11. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/hello.png
  12. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/softmaint.png
  13. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png
  14. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/siblings.gv.txt
  15. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/softmaint.gv.txt
  16. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/traffic_lights.gv.txt
  17. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/transparency.gv.txt
  18. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/twopi2.gv.txt
  19. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/unix.gv.txt
  20. +0
    -0
      examples/network/categories/data/dotLanguage/graphvizGallery/world.gv.txt
  21. +0
    -23
      examples/network/categories/data/dot_language.html
  22. +0
    -86
      examples/network/graphviz/graphviz_gallery.html
  23. +2
    -0
      lib/network/dotparser.js

+ 0
- 219
examples/network/categories/data/JOIN ME WITH GRAPHVIZ.html View File

@ -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>

+ 23
- 0
examples/network/categories/data/dotLanguage/data/cellular_automata.gv.txt 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 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 ;
}

+ 19
- 0
examples/network/categories/data/dotLanguage/data/computer_network.gv.txt 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];
}

+ 15
- 0
examples/network/categories/data/dotLanguage/data/simple.gv.txt 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,
]
}

+ 22
- 0
examples/network/categories/data/dotLanguage/dotLanguage.html View File

@ -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>

+ 195
- 0
examples/network/categories/data/dotLanguage/dotPlayground.html View File

@ -0,0 +1,195 @@
<!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;
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>
<table id="frame">
<col width="50%">
<col width="50%">
<tr>
<td colspan="2" style="height: 50px;">
<h1>DOT language playground</h1>
<p id="warning" style="color: red; display: none;">
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.
</p>
<script>
if (location.href.substr(0, 5) == 'file:') {
$('#warning').show();
}
</script>
<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 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</sup></a>,
<a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</sup></a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">gallery of GraphViz</a>.
</p>
<div>
<br>
<button id="draw">Draw</button>
<span id="error"></span>
</div>
</td>
</tr>
<tr>
<td>
<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>
</td>
<td>
<div id="mynetwork"></div>
</td>
</tr>
</table>
<script type="text/javascript">
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()
};
$('button.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$(window).load(draw);
// 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);
// parse and draw the data
function draw () {
try {
txtError.innerHTML = '';
// Provide a string with data in DOT language
data = vis.network.convertDot(txtData.value);
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]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
}
}
// show an error message
txtError.innerHTML = err.toString();
}
}
</script>
</body>
</html>

examples/network/graphviz/data/fsm.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/fsm.gv.txt View File


examples/network/graphviz/data/hello.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/hello.gv.txt View File


examples/network/graphviz/data/process.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/process.gv.txt View File


examples/network/graphviz/screenshots/fsm.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/fsm.png View File


examples/network/graphviz/screenshots/hello.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/hello.png View File


examples/network/graphviz/screenshots/softmaint.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/softmaint.png View File


examples/network/graphviz/screenshots/traffic_lights.png → examples/network/categories/data/dotLanguage/graphvizGallery/screenshots/traffic_lights.png View File


examples/network/graphviz/data/siblings.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/siblings.gv.txt View File


examples/network/graphviz/data/softmaint.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/softmaint.gv.txt View File


examples/network/graphviz/data/traffic_lights.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/traffic_lights.gv.txt View File


examples/network/graphviz/data/transparency.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/transparency.gv.txt View File


examples/network/graphviz/data/twopi2.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/twopi2.gv.txt View File


examples/network/graphviz/data/unix.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/unix.gv.txt View File


examples/network/graphviz/data/world.gv.txt → examples/network/categories/data/dotLanguage/graphvizGallery/world.gv.txt View File


+ 0
- 23
examples/network/categories/data/dot_language.html View File

@ -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>

+ 0
- 86
examples/network/graphviz/graphviz_gallery.html View File

@ -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>

+ 2
- 0
lib/network/dotparser.js View File

@ -4,6 +4,8 @@
* *
* DOT language reference: http://www.graphviz.org/doc/info/lang.html * DOT language reference: http://www.graphviz.org/doc/info/lang.html
* *
* DOT language attributes: http://graphviz.org/content/attrs
*
* @param {String} data Text containing a graph in DOT-notation * @param {String} data Text containing a graph in DOT-notation
* @return {Object} graph An object containing two parameters: * @return {Object} graph An object containing two parameters:
* {Object[]} nodes * {Object[]} nodes

Write Preview
Loading…
Cancel
Save