k mean cluster 1d example Simplifed example to help understand the concept of finding clusters centroid points Step 1 Determine the number of clusters call that K Step 2 Randomly select K distinct centroids random starting points Step 3 Measure the distance euclidean distance between each point and each centroid that point is assigned to the shorted Euclidean distance note Euclidean distance works in 1d 2d 3d 4d Step 4 Assign the each point to the nearest centroid i e cluster Step 5 Calculate the mean of each cluster as new centroid each point was assigned to each centroid cluster used to update new centroid Step 6 Repeat step 35 with the new center of cluster Some further reading examples References https en wikipedia org wiki K means_clustering https medium com data folks indonesia step by step to understanding k means clustering and implementation with sklearn b55803f519d6 script type text javascript src https d3js org d3 v7 min js script button onclick kmeanIterate id step Iteration Step button br script create 10 random points 0 10 index assigned centroid value const points Array 10 fill map d i return i Math random 10 var centroids 2 5 9 3 clusters K var iteration 0 update function to calculate k mean step function kmeanIterate iteration console log step assigned each point to th nearest centroid for let i 0 i points length i let d Math abs points i 1 centroids 0 points i 0 0 nearest for let k 1 k centroids length k let dn Math abs points i 1 centroids k if dn d d dn points i 0 k update centroids for let k 0 k centroids length k let dsum 0 let dcount 0 for let i 0 i points length i if points i 0 k dsum points i 1 dcount if Math abs dcount 0 dsum dcount centroids k dsum console log centroids svg selectAll centroid data centroids attr cx d return x d svg selectAll point data points style fill d return blue green orange d 0 document getElementById step innerHTML Iteration Step iteration end iteration document body style height 500px let svg d3 select body append svg attr width 400 attr height 400 var x d3 scaleLinear domain 0 10 range 0 400 svg selectAll centroid data centroids enter append circle attr class centroid style stroke gray style fill d i return blue green orange i attr r 10 attr cx d return x d attr cy 20 svg selectAll point data points enter append circle attr class point style stroke gray style fill gray attr r 5 attr cx d return x d 1 attr cy 20 console log ready script More compact version script type text javascript src https d3js org d3 v7 min js script button onclick kmeanIterate id step Iteration Step button br script const numrandoms 10 create 10 random points 0 10 index assigned centroid value const points Array numrandoms fill map d i return k i value Math random 10 var centroids 2 5 9 3 clusters K var iteration 0 document body style height 500px let svg d3 select body append svg attr width 400 attr height 400 var x d3 scaleLinear domain 0 10 range 0 400 update function to calculate k mean step function kmeanIterate iteration assigned each point to th nearest centroid for let i 0 i points length i var dn Number MAX_VALUE points i k 0 centroids forEach element indx let d Math abs points i value element if d dn dn d points i k indx end for i update centroids for let k 0 k centroids length k let kpoints points filter d return d k k let dsum d3 sum kpoints d d value centroids k dsum kpoints length end for k svg selectAll centroid data centroids enter append circle attr class centroid style stroke gray style fill d i return blue green orange i attr r 10 attr cx d return x d attr cy 20 svg selectAll point data points enter append circle attr class point style stroke gray style fill d i return blue green orange d k attr r 5 attr cx d return x d value attr cy 20 document getElementById step innerHTML Iteration Step iteration end kmeanIterate kmeanIterate console log ready script
ange 0 400 svg selectAll centroid data centroids enter append circle attr class centroid style stroke gray style fill d i return blue green orange i attr r 10 attr cx d return x d attr cy 20 svg selectAll point data points enter append circle attr class point style stroke gray style fill gray attr r 5 attr cx d return x d 1 attr cy 20 console log ready script More compact version script type text javascript src https d3js org d3 v7 min js script button onclick kmeanIterate id step Iteration Step button br script const numrandoms 10 create 10 random points 0 10 index assigned centroid value const points Array numrandoms fill map d i return k i value Math random 10 var centroids 2 5 9 3 clusters K var iteration 0 document body style height 500px let svg d3 select body append svg attr width 400 attr height 400 var x d3 scaleLinear domain 0 10 range 0 400 update function to calculate k mean step function kmeanIterate iteration assigned each point to th nearest centroid for let i 0 i points length i var dn Number MAX_VALUE points i k 0 centroids forEach element indx let d Math abs points i value element if d dn dn d points i k indx end for i update centroids for let k 0 k centroids length k let kpoints points filter d return d k k let dsum d3 sum kpoints d d value centroids k dsum kpoints length end for k svg selectAll centroid data centroids enter append circle attr class centroid style stroke gray style fill d i return blue green orange i attr r 10 attr cx d return x d attr cy 20 svg selectAll point data points enter append circle attr class point style stroke gray style fill d i return blue green orange d k attr r 5 attr cx d return x d value attr cy 20 document getElementById step innerHTML Iteration Step iteration end kmeanIterate kmeanIterate console log ready script