forked from karanveerm/kmeans
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathkmeans.html
88 lines (88 loc) · 3.34 KB
/
kmeans.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
<!DOCTYPE html>
<html>
<head>
<title>Visualizing K-Means Clustering</title>
<link
href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="range-slider.css" type="text/css" />
<link rel="stylesheet" href="kmeans.css" type="text/css" />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script
type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
></script>
</head>
<body>
<div class="container">
<div class="row col-xs-12">
<h2>Visualizing K-Means Clustering</h2>
<br />
</div>
<div class="row">
<div class="col-xs-7">
<div id="kmeans-vis"></div>
<div class="mean-square-error">
Mean square point-centroid distance:
<span class="mean-square-value">not yet calculated</span>
</div>
</div>
<div class="col-xs-5">
<div class="row">
The $k$-means algorithm is an iterative method for clustering a set
of $N$ points (vectors) into $k$ groups or clusters of points.
<hr />
<h3>Algorithm</h3>
<div class="algorithm-start">Repeat until convergence:</div>
<div class="step-title closest active">Find closest centroid</div>
<div class="step-description closest active">
Find the closest centroid to each point, and group points that
share the same closest centroid.
</div>
<div class="step-title update">Update centroid</div>
<div class="step-description update">
Update each centroid to be the mean of the points in its group.
</div>
<a class="step btn btn-primary find">Find closest centroid</a>
<hr />
</div>
<div class="row">
<h3 class="data-header">Data</h3>
Clustered points
<div class="range-slider" id="range-slider"></div>
Random
<br />
<div class="input">Number of clusters</div>
: <input id="num-clusters" type="text" value="3" />
<br />
<div class="input">Number of centroids</div>
: <input id="num-centroids" type="text" value="3" />
<br />
<br />
<a class="new-points btn btn-danger">New points</a>
<a class="new-centroids btn btn-danger">New centroids</a>
</div>
</div>
</div>
<footer>
<div style="text-align: center"></div>
Forked by <a href="https://shenshen.mit.edu">Shen²</a> | Bug
<a href="https://github.com/shensquared/demos">Report</a>
<br />
Original code by
<a href="http://www.stanford.edu/~kvmohan">Karanveer Mohan</a> for
<a href="http://ee103.stanford.edu/">EE103</a>. Original source code on
<a href="https://github.com/karanveerm/kmeans">Github</a>.
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="d3.min.js"></script>
<script src="range-slider.js"></script>
<script src="kmeans.js"></script>
</body>
</html>