Skip to Content

Neural Network Visualization in JavaScript - Part 1

This is a quick experiment in using a canvas from JavaScript to visualize the weights between any two layers in a neural network. In this implementation we view the connections between the input and output layers so that training can be watched in real time.

This example creates a two layer network with 50 nodes in each layer. The image shows the weights between the two layers. Brighter colors represent higher weights. The red squares show the strongest link from the input node to the output layer. After they have been trained they shift towards purple. The network starts off with random weights.

For the purpose of a simple demonstration the network is being trained so that X = Y. For example, if you fire into the fifth node in the input layer, the proper result would be firing out of the 5th node in the output layer. This means that the end result of a trained network will be a diagonal line across the image.

The network is trained using an algorithm that demotes the strongest links until the correct one has the highest weight. This isn't a very good training algorithm as it only works in two-layer networks, but it does a good enough job for the purposes here.

This has been tested in Chrome and Firefox. It will not likely work in Internet Explorer.