-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (169 loc) · 9.46 KB
/
index.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
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web Clustering Visualizer</title>
<meta name="description" content="Web Clustering Visualizer">
<link rel="stylesheet" href="style/main.css">
<script src="webclust-0.15.js"></script>
</head>
<body onload="init();update_settings();show_data();show_version();">
<!-- Header logo -->
<center>
<table>
<tr>
<td width="100"> </td>
<td width="530"><center><img class="round" src="style/logo.png"/></center></td>
<td width="100" style="text-align:right;vertical-align: bottom;"><span class="lblue" onclick="javascript:toggle('about');">About</span></td>
</tr>
</table>
</center>
<!-- End Header -->
<br/>
<h3 class="f18b">Visualizer</h3>
<div class="smalltext">
This is a visualization of how different clustering algorithms learn clusters for some different datasets. You can also experiment with how hyperparameter settings affect the algorithms.
</div>
<div class="smalltext">
<br>
<table>
<tr>
<th width="780" class="dark">Select Dataset <span class="help" onclick="javascript:toggle('helpselect');"> ? </span></th>
</tr>
<tr>
<td>
<input type="radio" name="sel-ds" value="spiral" id="spiral" onchange="javascript:show_data();update_settings()" checked />
<label for="spiral">
<img src="gfx/spiral.png" alt="" width=100/>
</label>
<input type="radio" name="sel-ds" value="flame" id="flame" onchange="javascript:show_data();update_settings()"/>
<label for="flame">
<img src="gfx/flame.png" alt="" width=100/>
</label>
<input type="radio" name="sel-ds" value="moons" id="moons" onchange="javascript:show_data();update_settings()"/>
<label for="moons">
<img src="gfx/moons.png" alt="" width=100/>
</label>
<input type="radio" name="sel-ds" value="gaussian" id="gaussian" onchange="javascript:show_data();update_settings()"/>
<label for="gaussian">
<img src="gfx/gaussian.png" alt="" width=100/>
</label>
<input type="radio" name="sel-ds" value="blobs" id="blobs" onchange="javascript:show_data();update_settings()"/>
<label for="blobs">
<img src="gfx/blobs.png" alt="" width=100/>
</label>
</td>
</tr>
</table>
</div>
<div class="smalltext">
<br>
<table>
<tr>
<th width="780" class="dark" title="Select which machine learning algorithm you want to use on the dataset you have selected above">Select Algorithm</th>
</tr>
<tr>
<td>
<input type="radio" name="sel-cl" value="kmeans" id="kmeans" onchange="javascript:update_settings()" checked />
<label for="kmeans">K-Means</label>
<input type="radio" name="sel-cl" value="dbscan" id="dbscan" onchange="javascript:update_settings()"/>
<label for="dbscan">DBSCAN</label>
<input type="radio" name="sel-cl" value="meanshift" id="meanshift" onchange="javascript:update_settings()"/>
<label for="meanshift">Mean-Shift</label>
</td>
</tr>
</table>
</div>
<div class="smalltext">
<br>
<table>
<tr>
<th width="780" class="dark">
<span width="30" id="hyper_bt" style="cursor:pointer;" onclick="javascript:toggle_bt('hyper');">►</span>
Set Hyperparameters <span class="help" onclick="javascript:toggle('helphyper');"> ? </span>
</th>
</tr>
<tr id="hyper" style="display:none;">
<td id="opts"></td>
</tr>
</table>
</div>
<div class="smalltext">
<br>
<table>
<tr>
<th width="780" colspan="5" class="dark">Visualization <span class="help" onclick="javascript:toggle('helpvis');"> ? </span></th>
</tr>
<tr>
<td width="30">
<button class="enabled" id="demo" onclick="javascript:demo();">►</button>
</td>
<td width="90">
<button class="disabled" id="stop" onclick="javascript:stop_demo();">◼</button>
</td>
<td id="citer" width="100" style="vertical-align: middle;"> </td>
<td id="clusters" width="100" style="vertical-align: middle;"> </td>
<td></td>
</tr>
</table>
</div>
<br>
<center>
<canvas id="can" width="500" height="500"></canvas>
<img id="canvasimg" class="cimg">
</center>
<div class="popup" id="helpselect" style="display:none;">
<div style='text-align:right;' width='100%'><span class='lred' onclick="toggle('helpselect')">Close</span></div>
<h3>Dataset selection</h3>
Visualizer contains five generated two-dimensional datasets that can be used to demonstrate how different clustering
algorithms learn clusters for different problems. Each algorithm learnsx clusters in different ways, which is visualized
in this demonstrator.
<br>
</div>
<div class="popup" id="helpvis" style="display:none;">
<div style='text-align:right;' width='100%'><span class='lred' onclick="toggle('helpvis')">Close</span></div>
<h3>Visualization</h3>
The visualization shows the decision boundaries for the clusters an algorithm learns on the dataset.
<br><br>
The small circles show the examples in the dataset, and the colored areas show which cluster each point belongs
to. The small red squares show important concepts of an algorithm, such as centroids in K-means and Mean-Shift or
core instances in DBSCAN.
<br>
</div>
<div class="popup" id="helphyper" style="display:none;">
<div style='text-align:right;' width='100%'><span class='lred' onclick="toggle('helphyper')">Close</span></div>
Click ► to expand the Set Hyperparameters section.
<h3>Hyperparameters</h3>
The hyperparameters (configuration of algorithms) are set so each algorithm learn good clusters on each dataset.
You can change the hyperparameters to see how different configurations affect how algorithms learn clusters.
<h3>Distance functions</h3>
Clustering is based on calculating distances between examples, and there are a wide range of different distance
functions that can be used. For numerical attributes, it is common to use the Euclidean distance (or L2-norm).
Two other common distance functions are Manhattan distance (L1-norm) and Chebyshev distance (L∞-norm).<br>
Consider the figure below. We shall calculate the distance between the two points <em>A</em> and <em>B</em>. The
length of the two sides are denoted as <em>x</em> and <em>y</em>.<br>
<img src="docs/distance.png"><br>
The formulas for calculating the different distance metrics are then:<br><br>
<img src="docs/distfunctions.png" width="150">
<br>
</div>
<div class="popup" id="about" style="display:none;">
<div style='text-align:right;' width='100%'><span class='lred' onclick="toggle('about')">Close</span></div>
<center><img class="round" src="style/logo.png" width="200"/></center>
<h3>About Web Clustering Demonstrator</h3>
Web Clustering Demonstrator is a demonstrator for clustering algorithms running purely on the client browser. All algorithms
are implemented in JavaScript for the purpose of this demonstrator. They are not optimized for high performance and don't
have all the functionality of state-of-the-art implementations. The main purpose of this demonstrator is to be used as a
tool when teaching and explaining clustering and clustering related concepts.
<br><br>
Web ML Demonstrator is developed by Johan Hagelbäck, senior lecturer at Linnaeus University in Kalmar, Sweden. Contact details
for the developer is <a href="https://lnu.se/personal/johan.hagelback/" target="_blank">here</a>.<br><br>
All code is available on <a href="https://github.com/jhagelback/webclust" target="_blank">GitHub</a>.<br><br>
Library version: <span id="version" style="color:#c00;"></span>
<br>
</div>
</body>
</html>