The K-Means algorithm is a popular and simple clustering algorithm. This visualization shows you how it works.

• 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.

D3.js and ActionScript 3

This visualization is JavaScript port of my past work -- Visualization of K-means algorithm with ActionScript 3 (Japanese only) -- with D3.js.

I like D3.js's powerful data binding and animation APIs. It makes my code simple. But Flash shows smoother animations.