https://k-means-explorable.vercel.app/

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5
6    <link rel="icon" href="/favicon.ico" />
7
8    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10    <meta http-equiv="content-security-policy" content="">
11		<link href="./_app/immutable/assets/_layout-72e8a769.css" rel="stylesheet">
12		<link href="./_app/immutable/assets/_page-96c483a4.css" rel="stylesheet">
13		<link rel="modulepreload" href="./_app/immutable/start-eb35878e.js">
14		<link rel="modulepreload" href="./_app/immutable/chunks/index-b3876c05.js">
15		<link rel="modulepreload" href="./_app/immutable/chunks/singletons-5131e63d.js">
16		<link rel="modulepreload" href="./_app/immutable/chunks/index-df6520b5.js">
17		<link rel="modulepreload" href="./_app/immutable/components/pages/_layout.svelte-9a5776f1.js">
18		<link rel="modulepreload" href="./_app/immutable/modules/pages/_layout.js-7b9cbfbc.js">
19		<link rel="modulepreload" href="./_app/immutable/chunks/_layout-8d2a742b.js">
20		<link rel="modulepreload" href="./_app/immutable/components/pages/_page.svelte-6ddb21ab.js"><title>K-Means Clustering: An Explorable Explainer</title><meta name="description" content="An Explorable Explainer of K-Means Clustering" data-svelte="svelte-1po04in"><meta name="author" content="Yi Zhe Ang" data-svelte="svelte-1po04in"><meta name="news_keywords" content="k-means, clustering, unsupervised, machine learning, explorable, explainer, interactive, ai, visualization, tutorial" data-svelte="svelte-1po04in"><meta property="og:title" content="K-Means Clustering: An Explorable Explainer" data-svelte="svelte-1po04in"><meta property="og:site_name" content="Yi Zhe Ang" data-svelte="svelte-1po04in"><meta property="og:url" content="https://k-means-explorable.vercel.app/" data-svelte="svelte-1po04in"><meta property="og:description" content="An Explorable Explainer of K-Means Clustering" data-svelte="svelte-1po04in"><meta property="og:type" content="article" data-svelte="svelte-1po04in"><meta property="og:locale" content="en_US" data-svelte="svelte-1po04in"><meta property="og:image" content="https://k-means-explorable.vercel.app/social.png" data-svelte="svelte-1po04in"><meta name="twitter:card" content="summary_large_image" data-svelte="svelte-1po04in"><meta name="twitter:site" content="https://yizhe-ang.github.io/" data-svelte="svelte-1po04in"><meta name="twitter:creator" content="@yizhe_ang" data-svelte="svelte-1po04in"><meta name="twitter:title" content="K-Means Clustering: An Explorable Explainer" data-svelte="svelte-1po04in"><meta name="twitter:description" content="An Explorable Explainer of K-Means Clustering" data-svelte="svelte-1po04in"><meta name="twitter:image:src" content="https://k-means-explorable.vercel.app/social.png" data-svelte="svelte-1po04in"><meta name="robots" content="max-image-preview:large" data-svelte="svelte-1po04in"><link rel="canonical" href="https://k-means-explorable.vercel.app//" data-svelte="svelte-1po04in">
21  </head>
22
23  <body>
24    <div>
25
26
27<main id="content">
28
29
30
31
32<div class="header-wrapper svelte-77k0o8"><div class="wrapper"><h1 class="svelte-4nuhg7">K-Means<br>Clustering</h1>
33  <h4 class="svelte-4nuhg7">An Explorable Explainer</h4>
34  <p class="svelte-4nuhg7">By <a href="https://yizhe-ang.github.io/" target="_blank" rel="noopener noreferrer">Yi Zhe Ang</a></p></div>
35
36<a target="_blank" rel="noopener noreferrer"></a></div>
37  <div class="wrapper svelte-hrqxrl"><div class="svelte-u8ew5l" style="max-width: 75ch; padding-left: 32px; padding-right: 32px;"><p class="svelte-hrqxrl"><i>Whoops!</i> This article has not yet been designed for smaller
38      screens... do view it on
39      <b>a desktop with a larger screen size instead</b>!
40    </p>
41</div>
42</div>
43
44<div class="wrapper svelte-1xjnu8f"><div class="svelte-u8ew5l" style="max-width: 75ch; padding-left: 32px; padding-right: 32px;"><div class="content-wrapper svelte-1xjnu8f"><div class="kofi-button"><a class="kofi-link" href="https://ko-fi.com/U7U4NH69A" target="_blank"><img height="48" style="border:0px;height:48px;" src="https://storage.ko-fi.com/cdn/kofi5.png?v=3" border="0" alt="Buy Me a Coffee at ko-fi.com"></a></div>
45      <p class="acknowledgements svelte-1xjnu8f">Special thanks to <a href="https://jetnew.io/" target="_blank" rel="noopener noreferrer">Jet New</a> and <a href="https://www.linkedin.com/in/chan-guan-hao/" target="_blank" rel="noopener noreferrer">Guan Hao Chan</a> for their awesome feedback on this article.
46      </p>
47      <div class="source-wrapper svelte-1xjnu8f"><p class="svelte-1xjnu8f">The <b>source code</b> for this article can be found here:</p>
48
49        <a href="https://github.com/yizhe-ang/k-means-explorable" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github svelte-qf9fp3" style="width: 1.75rem; height: 1.75rem; transform: rotate(0deg);"><g><!-- HTML_TAG_START --><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path><!-- HTML_TAG_END --></g></svg>
50  <div class="visually-hidden svelte-d90an4">Source code</div></a></div>
51      <div class="socials-wrapper"><p class="svelte-1xjnu8f">Do you have any questions or suggestions? I&#39;m happy to connect! Feel
52          free to <b>reach out to me</b> on:
53        </p>
54        <div class="icons-wrapper svelte-1xjnu8f"><div class="home-icon"><a href="https://yizhe-ang.github.io/" aria-label="Yi Zhe Ang's Portfolio" target="_blank"><img src="/home-icon.png" style="height: 36px; transform: translate(0, -5px);"></a></div>
55          
56          <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail svelte-qf9fp3" style="width: 1.75rem; height: 1.75rem; transform: rotate(0deg);"><g><!-- HTML_TAG_START --><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline><!-- HTML_TAG_END --></g></svg>
57  <div class="visually-hidden svelte-d90an4">Email</div></a>
58          <a href="https://twitter.com/yizhe_ang" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter svelte-qf9fp3" style="width: 1.75rem; height: 1.75rem; transform: rotate(0deg);"><g><!-- HTML_TAG_START --><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path><!-- HTML_TAG_END --></g></svg>
59  <div class="visually-hidden svelte-d90an4">Twitter</div></a>
60          <a href="https://www.linkedin.com/in/yizhe-ang/" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin svelte-qf9fp3" style="width: 1.75rem; height: 1.75rem; transform: rotate(0deg);"><g><!-- HTML_TAG_START --><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle><!-- HTML_TAG_END --></g></svg>
61  <div class="visually-hidden svelte-d90an4">Linkedin</div></a>
62          <a href="https://github.com/yizhe-ang" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github svelte-qf9fp3" style="width: 1.75rem; height: 1.75rem; transform: rotate(0deg);"><g><!-- HTML_TAG_START --><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path><!-- HTML_TAG_END --></g></svg>
63  <div class="visually-hidden svelte-d90an4">Github</div></a></div></div></div>
64    
65</div>
66</div>
67
68<div class="wrapper svelte-zsy1ep"><div class="wrapper svelte-1yajpup" style="--size: 60px; --floatSize: 60; --ballTopLeftColor: hsl(180, 50%, 82%); --ballTopRightColor: hsl(51, 90%, 71%); --ballBottomLeftColor: hsl(262, 48%, 85%); --ballBottomRightColor: hsl(14, 100%, 84%); --duration: 1.5s;"><div class="inner svelte-1yajpup"><div class="ball-container svelte-1yajpup"><div class="single-ball svelte-1yajpup"><div class="ball ball-top-left svelte-1yajpup"> </div></div>
69      <div class="contener_mixte"><div class="ball ball-top-right svelte-1yajpup"> </div></div>
70      <div class="contener_mixte"><div class="ball ball-bottom-left svelte-1yajpup"> </div></div>
71      <div class="contener_mixte"><div class="ball ball-bottom-right svelte-1yajpup"> </div></div></div></div></div>
72</div></main>
73
74
75		

75<script type="module" data-sveltekit-hydrate="byvkdc">
76			import { start } from "./_app/immutable/start-eb35878e.js";
77
78			start({
79				env: {},
80				hydrate: {
81					status: 200,
82					error: null,
83					node_ids: [0, 2],
84					params: {},
85					routeId: "",
86					data: [null,null],
87					form: null
88				},
89				paths: {"base":"","assets":""},
90				target: document.querySelector('[data-sveltekit-hydrate="byvkdc"]').parentNode,
91				trailing_slash: "always"
92			});
93		</script>

93
94	</div>
95  </body>
96</html>