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

Created some screenshots from examples

css_transitions
josdejong 11 years ago
parent
5dbd9f0135
commit
fc0cff10c2
10 changed files with 26 additions and 16 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      examples/graph/04_shapes.html
  2. +1
    -1
      examples/graph/09_sizing.html
  3. +8
    -0
      examples/graph/10_multiline_text.html
  4. +4
    -1
      examples/graph/15_dot_language_playground.html
  5. +1
    -8
      examples/graph/graphviz/data/world.gv.txt
  6. +11
    -5
      examples/graph/graphviz/graphviz_gallery.html
  7. BIN
      examples/graph/graphviz/screenshots/fsm.png
  8. BIN
      examples/graph/graphviz/screenshots/hello.png
  9. BIN
      examples/graph/graphviz/screenshots/softmaint.png
  10. BIN
      examples/graph/graphviz/screenshots/traffic_lights.png

+ 1
- 1
examples/graph/04_shapes.html View File

@ -8,7 +8,7 @@
font: 10pt arial; font: 10pt arial;
} }
#mygraph { #mygraph {
width: 780px;
width: 100%;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }

examples/graph/09_automatic_sizing.html → examples/graph/09_sizing.html View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph | Automatic sizing</title>
<title>Graph | Sizing</title>
<style type="text/css"> <style type="text/css">
html, body { html, body {

+ 8
- 0
examples/graph/10_multiline_text.html View File

@ -3,6 +3,14 @@
<head> <head>
<title>Graph | Multiline text</title> <title>Graph | Multiline text</title>
<style type="text/css">
#mygraph {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../vis.js"></script> <script type="text/javascript" src="../../vis.js"></script>
<script type="text/javascript"> <script type="text/javascript">

+ 4
- 1
examples/graph/15_dot_language_playground.html View File

@ -38,6 +38,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
} }
textarea.example { textarea.example {
@ -52,7 +55,7 @@
<col width="50%"> <col width="50%">
<tr> <tr>
<td colspan="2" style="height: 50px;"> <td colspan="2" style="height: 50px;">
<h1>Directed graph from data in DOT language</h1>
<h1>DOT language playground</h1>
<div> <div>
<a href="javascript: drawExample('example1')">example 1</a> <a href="javascript: drawExample('example1')">example 1</a>
<a href="javascript: drawExample('example2')">example 2</a> <a href="javascript: drawExample('example2')">example 2</a>

+ 1
- 8
examples/graph/graphviz/data/world.gv.txt View File

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

+ 11
- 5
examples/graph/graphviz/graphviz_gallery.html View File

@ -10,10 +10,10 @@
width: 600px; width: 600px;
} }
html, body, select { html, body, select {
font: 11pt verdana;
font: 11pt arial;
} }
#mygraph { #mygraph {
width: 600px;
width: 100%;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
@ -29,7 +29,7 @@
'restrictions in JavaScript. Run the example from a server ' + 'restrictions in JavaScript. Run the example from a server ' +
'instead of as a local file to resolve this problem. ' + 'instead of as a local file to resolve this problem. ' +
'Alternatively, you can load DOT graphs in ' + 'Alternatively, you can load DOT graphs in ' +
'the <a href="../20_dot_language_playground.html" ' +
'the <a href="../15_dot_language_playground.html" ' +
'style="color:red;">playground</a>.' + 'style="color:red;">playground</a>.' +
'</p>'); '</p>');
} }
@ -38,7 +38,11 @@
<p> <p>
The following examples are unmodified copies from the The following examples are unmodified copies from the
<a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>. <a href="http://www.graphviz.org/Gallery.php" target="_blank">Graphviz Gallery</a>.
Note that vis.js does not support all attributes of Graphviz, and
</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>
<p> <p>
@ -53,11 +57,13 @@
<option value="data/transparency.gv.txt">transparency</option> <option value="data/transparency.gv.txt">transparency</option>
<option value="data/twopi2.gv.txt">twopi2</option> <option value="data/twopi2.gv.txt">twopi2</option>
<option value="data/unix.gv.txt">unix</option> <option value="data/unix.gv.txt">unix</option>
<!-- TODO: get example world working (needs some extension of the DOT parser)
<option value="data/world.gv.txt">world</option> <option value="data/world.gv.txt">world</option>
-->
</select> </select>
</p> </p>
<div id="mygraph"></div>
<div id="mygraph"></div>
<script type="text/javascript"> <script type="text/javascript">
var container = document.getElementById('mygraph'); var container = document.getElementById('mygraph');
var url = document.getElementById('url'); var url = document.getElementById('url');

BIN
examples/graph/graphviz/screenshots/fsm.png View File

Before After
Width: 894  |  Height: 593  |  Size: 69 KiB

BIN
examples/graph/graphviz/screenshots/hello.png View File

Before After
Width: 921  |  Height: 264  |  Size: 18 KiB

BIN
examples/graph/graphviz/screenshots/softmaint.png View File

Before After
Width: 1237  |  Height: 729  |  Size: 262 KiB

BIN
examples/graph/graphviz/screenshots/traffic_lights.png View File

Before After
Width: 1108  |  Height: 591  |  Size: 58 KiB

Write Preview
Loading…
Cancel
Save