html
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
<!DOCTYPE html>
<html>
<head>
<title>K-means</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src = "main.js"></script>
</head>
<body>
<canvas id="c"></canvas>
<div id="con">
<button id="zoomO" onclick="zoomOut()">Zoom-</button>
<button id="draw" onclick=start()>Start</button>
<button id="zoomI" onclick="zoomIn()">Zoom+</button>
<button id="plot1" onclick="plot1()">Plot1</button>
<button id="plot2" onclick="plot2()">Plot2</button>
<button id="plot3" onclick="plot3()">Plot3</button>
<button id="plot4" onclick="plot4()">Random</button>
<button id="kp" onclick="kp()">Clusters+</button>
<button id="km" onclick="km()">Clusters-</button>
<p id="text">Iterations: <a id="iters">0</a> ----- Clusters: <a id="k">2</a></p>
</div>
<script>
var c = document.getElementById("c")
var ctx = c.getContext("2d")
c.height = window.innerHeight*.7 //70%
Enter to Rename, Shift+Enter to Preview
css
css
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
html, body { width: 98%; height:98%; background: black;}
p, #p {
font-size:2.75vmax;
color: white;
position: absolute;
bottom: 2%;
}
button {
background: black;
border: 1px solid black;
box-shadow: 0px 0px 5px 5px blue;
font-size: 3vmax;
position: absolute;
}
#c {
width: 96%;
height: 70%;
border: 1px solid black;
box-shadow: 0px 0px 1vmax 1vmax blue;
}
#con {
width:90%;
}
#draw {
color: green;
Enter to Rename, Shift+Enter to Preview
js
js
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
/*
K-MEANS ALGORITHM PSEUDO:
Initialization:
- set all centroids (midpoints for each cluster k)
near the middle of the scattered plot
Main loop:
- connect each data point with the nearest
centroid and assign it to the corresponding
cluster
- set each centroid to the middle of its clusters
data points
-> reconnect each point with the closest centroid
and assign it to the centroids cluster
Methods:
Initialization: setCentroids()
Main loop: - connect(points,centroids)
- changeCentroids()
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run