-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIVCMT.html
171 lines (163 loc) · 8.24 KB
/
IVCMT.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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Visual Comparison of Multiple Trees</title>
<link rel="stylesheet" href="libs/jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="libs/jqwidgets/styles/jqx.summer.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="libs/modernizr-2.5.3.js"></script>
<script src="libs/jscolor/jscolor.js"></script>
<script type="text/javascript" src="libs/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="libs/scripts/knockout-2.0.0.js"></script>
<script type="text/javascript" src="libs/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="libs/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="libs/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="libs/jqwidgets/jqxdocking.js"></script>
<script type="text/javascript" src="libs/jqwidgets/jqxwindow.js"></script>
<!-- internal js files -->
<script src="Vis2TreeManager.js"></script>
<script src="Vis2SelectionManager.js"></script>
<script src="Vis2Helper.js"></script>
<script src="Vis2NodeVisualizer.js"></script>
<script src="Vis2ColorMap.js"></script>
<script src="Vis2ViewManager.js"></script>
<script src="Vis2Globals.js"></script>
<script src="Vis2Node.js"></script>
<script src="Vis2ParseFile.js"></script>
<script src="Vis2LeafMeasure.js"></script>
<script src="Vis2ElementMeasure.js"></script>
<script src="Vis2EdgeMeasure.js"></script>
<script src="Views/Vis2ComparisonOverview.js"></script>
<script src="Views/Vis2ReferenceTreeView.js"></script>
<script src="Views/Vis2ScoreDistributionView.js"></script>
<script src="Views/Vis2TreeComparisonView.js"></script>
<script src="Vis2Main.js"></script>
</head>
<body class='default'>
<div id="settings">
<table class="settings_structure">
<tr>
<td>
<table class="settings_structure">
<tr>
<td>Select Measure: </td>
<td>
<select id="measure-select" onchange='window.TreeManager.SetGlobalMeasure(this.options[this.selectedIndex].value)'>
<option value="leaf" selected="selected">leaf-based</option>
<option value="element">element-based</option>
<option value="edge">edge-based</option>
</select></td>
</tr>
<tr>
<td>Automatic threshold: </td>
<td>
<select id="threshold-select" onchange='window.TreeManager.SetThreshold(this.options[this.selectedIndex].value)'>
<option value="0.0" selected="selected">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select></td>
</tr>
</table></td>
<td style="text-align: right"><h1>Vis2: Interactive Visual Comparison of Multiple Trees</h1><span class="info">Florian Spechtenhauser 0826226, Christian Möllinger 0725979 / <a id="show_help_link" href="javascript: window.ViewManager.ShowHelpWindow()">show help</a></span></td>
</tr>
</table>
</div>
<div id='content'>
<div id='jqxSplitter' style="width: auto; height: auto; background-color: #FFFFFF">
<div id="jqxSplitter2" style="background-color: red; height: 100%">
<div id="ComparisonOverviewPane">
<div class="titlebar">
Comparison Overview
</div>
<div class="view">
<canvas id="ComparisonOverviewCanvas" title="Click to select reference tree">
One does not simply use HTML5 Canvas with this browser
</canvas>
</div>
</div>
<div id="ScoreDistributionPane">
<div class="titlebar">
Score Distribution View
</div>
<div class="view" title="Click to open/close Tree Comparison View for specific tree">
<canvas>
One does not simply use HTML5 Canvas with this browser
</canvas>
</div>
</div>
<div id="ReferenceTreePane">
<div class="titlebar">
Consensus Tree View
</div>
<div class="view">
<canvas title="Click to select nodes">
One does not simply use HTML5 Canvas with this browser
</canvas>
</div>
</div>
</div>
<div id="docking" style="width: 100%" data-bind="template: { foreach: OpenViews, afterRender: buildWindow }">
<div class="knockout-section">
<div class="knockout-window">
<div class="titlebar">
</div>
<div class="content" style="width: 100%; height: 100%;">
<canvas>
not simply use HTML5 Canvas with this browser
</canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="help">
<h1>Help</h1>
<h2>1. The Views</h2>
<h3>1.1 Comparison Overview</h3>
An overview of pairwise similarities of all trees in the test data set is
presented by the similarity matrix. Every row/column represents
one tree. The cells encode the global similarity evaluation of tree
pairs. This view allows for an overview of global similarities among
trees and thereby offers the possibility to select a reference tree for
more detailed 1:n tree comparison in other views. The reference tree is selected by clicking on a <b>column</b>.
If a new reference tree is selected, all measures are recalculated and the views are updated.
<br/>
The selected reference tree is highlighted with a black border, while currently compared trees are highlighted with a red border.
<h3>Score Distribution Overview</h3>
The Score Distribution Overview provides a compact overview of the score distribution of all nodes in each tree when compared to the selected reference tree.
Clicking on a histogram opens/closes the detailed Tree Comparison View for the selected tree (compared against the selected reference tree). Trees which are currently
viewed in the Tree Comparison View are highlighted with a red border.
<h3>1.2 Consensus Tree View</h3>
The Consensus Tree View shows the selected reference tree and provides a compact form of a comparison between the reference tree and all other trees. Each displayed score
is the average of the scores comparing the reference tree node against its best matching unit in all other trees.
<br/>In The Consensus Tree View, tree nodes can be selected by clicking on it. If a node is selected, the matching nodes and leaves in all open Tree Comparison Views are highlighted with a purple color.
<h3>1.3 Tree Comparison Views</h3>
The tree comparison view is the most detailed view presented in the paper, and it contains the comparison tree scored against the selected reference tree.
Nodes which have a score below the user-defined threshold are automatically collapsed, but the user can manually collapse/open nodes by clicking on it. Collapsed nodes are represented by a green square.
<h2>2. How to use the program</h2>
<ol>
<li>Select the measure which you want to use to calculate the similarity scores and set the threshold for automatic node collapsing</li>
<li>Use the Comparison Overview to get an overview of the loaded trees and their similarity</li>
<li>Select a reference tree by clicking on a column in the Comparison Overview</li>
<li>Use the Score Distribution Overview to get an overview of the scores of the other trees compared to the reference tree</li>
<li>Open detailed Tree Comparison Views by clicking on the histograms in the Score Distribution Overview</li>
<li>Feel free to select nodes in the Consensus Tree View, which then will get highlighted in the open Tree Comparison Views</li>
</ol>
<h2>3. Notes</h2>
The application is optimized for a resolution with at least 1280x800 pixels and should be used in <b>fullscreen</b>.
<h2>4. References</h2>
S. Bremm, T. Landesberger, M. Heß, T. Schreck, Ph. Weil, K. Hamacher. <i>Interactive visual comparison of multiple trees. </i> IEEE Computer Society, Technical Committee on Visualization and Graphics:
IEEE Conference on Visual Analytics Science and Technology, VAST 2011. Proceedings : 23-28 October 2011
</div>
</body>
</html>