A simple HTML5 canvas + JavaScript program that demonstrates the Self-Organising Map algorithm by using random colours as training vectors.

License: GPLv3
Source code: coloursom.js

This is something I initially programmed many years ago after taking a course in neural networks. It is an implementation of the Self-Organising Map (SOM) algorithm which orders input vectors of a high-dimensional space into a two-dimensional grid. A neighbourhood function is used to preserve the topology of the input space.

I used colours given as 3-dimensional RGB vectors as the input data. Thus, the model vectors of the SOM can be represented by different colours. The map is first initialised randomly, but then — as the training proceeds — differently coloured areas appear as similar input vectors are placed near to each other on the 2D grid. The program stops after 1000 iterations. To restart it, just reload the page.

Update (May 5, 2013): My old version of ColourSOM was implemented as a Java applet which can be downloaded as Since Java applets are no longer very popular (I don’t even have the Java plugin installed in my web browser anymore), I thought it would be a good exercise to reimplement it using JavaScript and HTML5 canvas.

It seems that you have JavaScript disabled, or your web browser doesn't support JavaScript. Sorry, this application requires JavaScript to run!

Your browser doesn't support the HTML5 canvas tag, sorry!