-
Notifications
You must be signed in to change notification settings - Fork 0
/
helpText.html
119 lines (90 loc) · 8.65 KB
/
helpText.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<head>
<style type="text/css">
<!--
.tab { margin-left: 10px; }
-->
</style>
</head>
<body>
<h1 class="tab">Graph drawing</h1>
<p class="tab">
This is a simple application to visualize graphs using different layout methods. This help page contains some basic information on how to work with this application. The following sections are contained:
</p>
<ol>
<li>Loading a graph</li>
<li>Supported layouts</li>
<li>Additional information</li>
</ol>
<h2 class="tab">Loading a graph</h2>
<p class="tab">A graph can be loaded using the "Load" field in the menu. Then, a txt-file has to be provided containing the information about the graph. The txt-file has to be of a certain format in order to be compatible with this application:</p>
<p class="tab">
Each line of the file must contain two strings seperated by a single whitespace (e.g. <i>Alice</i> <i>Bob</i> or <i>1</i> <i>2</i>). These two strings are then interpreted as nodes of the graph with the given names which are connected by an edge going from the first string to the second one (or in case of undirected graphs just connected by an edge). For example, a valid input file for a graph with three nodes named <i>Alice</i>, <i>Bob</i> and <i>Charly</i>, where there is an edge from <i>Alice</i> to <i>Bob</i>, an edge from <i>Bob</i> to <i>Charly</i> and an edge from <i>Alice</i> to <i>Charly</i> would be:</p>
<p class="tab">Alice Bob<br>
Bob Charly<br>
Alice Charly</p>
<p class="tab">
Lines of the form <i>Alice Alice</i> or <i>1 1</i> are not interpreted as loops but as a single node without any edges. So, for example the input</p>
<p class="tab">
1 1<br>
2 2<br>
3 3</p>
<p class="tab"> would give a graph consisting of 3 nodes without any edges.</p>
<h2 class="tab">Supported layouts</h2>
<p class="tab">The following layouts are available:</p>
<ul>
<li> Circular embedding
<li> Grid embedding
<li> Layered embedding
<li> Linear embedding
<li> Random embedding
<li> Spectral embedding
<li> Spring embedding
</ul>
<p class="tab"> For detailled informations on the different layouts, please see the following subsections.</p>
<p class="tab">By default, when a graph is loaded, it will be displayed using the Grid embedding. To switch to a different layout, simply click on the menu field "Layout" and then choose the desired layout.</p>
<h3 class="tab">Circular embedding</h3>
<p class="tab">The circular embedding aligns all nodes equidistant on a circle centered in the middle of the drawing area. Edges between the nodes are drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph).
</p>
<h3 class="tab">Grid embedding</h3>
<p class="tab">The grid embedding aligns all nodes equidistant in form of a grid. The nodes are ordered according to their appearence in the txt-file used to load the graph. Edges between the nodes are drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph).
</p>
<h3 class="tab">Layered embedding</h3>
<p class="tab">The layered embedding aligns all nodes on horizontal layers such that (almost) all edges of the graph show downwards and such that the number of total crossings of edges in each layer is minimized. Edges between the nodes are drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph).
</p>
<h3 class="tab">Linear embedding</h3>
<p class="tab">With the linear embedding, all nodes of the graph will be aligned on a horizontal line in the middle of the drawing area ordered according to their appearence in the txt-file used to load the graph. Edges between adjacent nodes will be drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph) and edges between nodes further away are drawn as semicircles (which also end in an arrow when working with a directed graph).</p>
<h3 class="tab">Random embedding</h3>
<p class="tab">
Using the random embedding, the nodes of the graph will be placed randomly and the edges between the nodes are drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph).
</p>
<h3 class="tab">Spectral embedding</h3>
<p class="tab">The spectral embedding uses the eigenvectors of the Laplacian matrix of the graph as Cartesian coordinates of the graph's nodes. This embedding can be done in two or in three dimensions.
The idea of the layout is to compute the two or three, respectively, smallest non-zero eigenvalues (the smallest eigenvalue of the Laplacian matrix is always 0 and contains no interesting information) and corresponding eigenvectors of the Laplacian matrix of the graph. Then, the x-coordinate of the i-th node is the value of the i-th coordinate of the first eigenvector. Correspondingly the i-th component of the second eigenvector describes the y-coordinate of the node i. And if working in three dimensions, the z-coordinate of the i-th node is given by the i-th component of the third eigenvector. Edges between the nodes are drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph).
</p>
<h3 class="tab">Spring embedding</h3>
<p class="tab">
The spring embedding starts from either the grid embedding or random embedding, depending on what the user wants. From this on, all nodes are considered as electrical charges that repel each other. This force is inversely proportional to the distance between two nodes. If two nodes are connected by an edge, one more force is acting on them: They are attracted to each other, as if they were connected by a spring. This force is proportional to the square of distance of those two nodes. Spring embedding now tries to position the nodes in such a way that all forces on all nodes are zero. This is done by iterating over all nodes and move nodes in the direction of the acting force. This procedure is repeated several times and the final embedding is reached either if a maximum number of iterations is reached, or the movement of the nodes (new positions compared to previous positions) is very small. Like the Spectral embedding, also the Spring embedding can be executed in two or in three dimesions. Edges between the nodes are drawn as straight lines (with an arrow at the end indicating the direction of the edge in case of a directed graph).</p>
<h2 class="tab">Additional information</h2>
<p class="tab">In this section, some further functionality provided by this application
is listed.
</p>
<h3 class="tab">Information about the graph</h3>
<p class="tab">
When a graph is loaded, in the section to the right of the drawing area some information about the graph is provided. This consists of a listing of the nodes of the graph and its edges. The user can also click on a certain node, in this case the node clicked on will be coloured differently and information about this node will be displayed. This information consists of the name of the node, all outgoing edges as well as all incoming edges. Also, all adjancent nodes of the node clicked on are coloured differently depending on their relation to the clicked node. If a neighbouring node has an edge going to the clicked node it is coloured blue, if a neighbouring node has an edge coming from the clicked node it is coloured red and if a neighbouring node has both, an edge going to the clicked node as well as a node coming from the clicked node, it is coloured in magenta. In case of undirected graphs, all adjacent nodes are coloured in magenta.
</p>
<h3 class="tab">Saving a graph</h3>
<p class="tab">
Using the "Save" button to the right of the drawing area, the user can save the currently displayed graph as a png image. Clicking on this button opens a dialog window where the user has to specify the name under which the picture will be saved and where the picture should be saved.
</p>
<h3 class="tab">Zooming & Dragging</h3>
<p class="tab">
When working with larger graphs it is very likely that several nodes get placed close together. Then, in order to better see what is going on, the user can zoom in to certain positions and can drag the current part of the picture around. The zooming can be done by placing the mouse over a certain position and turning the mousewheel, then the application will zoom into this position. By moving the mouse around while holding the left mouse button the currently displayed part of the graph can be shifted around.
</p>
<h3 class="tab">Rotation</h3>
<p class="tab">
When working with the Spectral or Spring embedding in three dimensions, it is possible to rotate the graph using the keys "a" (rotation to the left), "d" (rotation to the right), "w" (rotation up) and "s" (rotation down).
</p>
<p><br>
</p>
</body></html>