07 Nov 2013
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.
- 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:
- Initialization: Create N nodes (circle) and randomly put initial K cluster (cross).
- Assignment step: Assign each node (circle) to the nearest cluster (cross).
- Update step: Each cluster (cross) move to the centroid of its nodes.
- Go to step 2.
D3.js and ActionScript 3
I like D3.js's powerful data binding and animation APIs. It makes my code simple. But Flash shows smoother animations.