Visualizing K-Means algorithm with D3.js

The K-Means algorithm is a popular and simple clustering algorithm. This visualization shows you how it works. Full credit for the original post here

Place Starting Positions Manually
  • Click figure or push [Step] button to go to next step.
  • Push [Restart] button to go back to initialization step.
  • Push [New] button to start new simulation with given N (the number of nodes) and K (the number of clusters).
  • Requires modern browsers (tested on IE 10, Firefox 25 and Chrome 30).

What is K-Means

You can find a detail description at k-means clustering - Wikipedia, the free encyclopedia, but it's too complecated to understand.

Here is simpler steps:

  1. Initialization: Create N nodes (circle) and randomly put initial K cluster (cross).
  2. Assignment step: Assign each node (circle) to the nearest cluster (cross).
  3. Update step: Each cluster (cross) move to the centroid of its nodes.
  4. Go to step 2.