Neural network visualization you can train in your browser

A neural network visualization shows a network's layers, its weights and what it has learned, so you can see how it turns inputs into an answer. Our Neural Network Trainer gives you a live neural network visualization: pick a dataset of coloured points, build a network of up to 4 hidden layers, and watch it train in your browser. The decision boundary takes shape, the connections thicken or thin as the weights change, and the loss curve falls.

Try it

Neural Network Trainer

Build a network and watch it learn in real time

Open the simulatorGo to its page

What you see

• The data and the decision boundary: 240 points of two classes on a plane. Three quarters are used for training and a quarter, drawn hollow, are held back as a test. The background colour shows which class the network would give each spot, so the boundary is where the colour changes.
• The network: the 2 inputs (the x and y of a point), each hidden unit, and the output p, the probability of class 1. Each connection is drawn thicker for a bigger weight and coloured by its sign.
• The loss curve: training loss and test loss against training steps.
• Readings: the epoch (full passes through the training points), both losses, both accuracies, and a line on what the curve is doing: learning, settled, or jumping about.

It is a real multilayer perceptron: a forward pass, cross-entropy loss and backpropagation, run live in JavaScript. It isn't a pretend animation, so what you see is what the network has really learned.

How to use the neural network playground

1. Open the Neural Network Trainer. It opens on circles: one class inside a ring of the other, with a 6-4 network.
2. Under Network, set the units in each hidden layer (1 to 8), use Add a layer for up to 4 layers, and pick the activation: tanh, ReLU or sigmoid. It shows how many weights and biases the network has.
3. Under Data, choose circles, XOR, spirals, moons or two clusters, and the noise. New points and weights deals a fresh set.
4. Under Training, choose the optimiser (SGD, momentum, RMSProp or Adam), the learning rate (0.001 to 1) and the batch size (1 to 64). You can change these while it trains.
5. Under Run, press play. Changing the network or the data starts training again from new random weights.

How the network decides

Each unit multiplies its inputs by its weights, adds a bias and passes the total through an activation function. For a ReLU unit with weights w₁ and w₂:

The last unit squashes its total into a probability between 0 and 1. Training compares that probability with the true class using cross-entropy loss, −ln p when the point is class 1, and backpropagation works out how to nudge every weight to make the loss smaller. The number of weights and biases is each layer's units × (units in the layer before + 1), added up: the 2-6-4-1 network at the start has 6 × 3 + 4 × 7 + 1 × 5 = 51.

Experiments to try

These results come from running the trainer on its opening data. With New points and weights your numbers will differ a little, but the story is the same.

Experiment 1: the circles

Press play on the opening set-up. By about epoch 26 the boundary is a rough blob, with 93% of the training points and 80% of the test points right. By about epoch 90 it is a clean circle and both accuracies reach 100%, with the training loss near 0.01.

Experiment 2: no hidden layer

Remove both hidden layers. With no hidden layer the network can only draw a straight line, and no straight line separates a ring from its centre: accuracy stalls at about 56% on the training points, little better than guessing. Try Two clusters with no hidden layer and it reaches 100%, because one line does separate them.

Experiment 3: XOR

Choose XOR: the classes sit in opposite corners. With no hidden layer it stays near 50%. Add one hidden layer of 4 units, 17 weights and biases, and it reaches 98% by about epoch 26 and 100% soon after. A hidden layer lets the network bend its boundary.

Experiment 4: spirals and overfitting

Choose spirals, the hard one. A 6-4 network is stuck near 64% for a long time. Give it three layers of 8 units (177 weights and biases): by about epoch 270 it gets 100% of the training points and 97% of the test points. Keep it running to about epoch 530: the training loss keeps falling, but the test loss rises from 0.06 to 0.15 and test accuracy slips to 95%. The network has started memorising the training points instead of learning the pattern. That is overfitting, and the gap between the two loss curves is how you spot it.

Experiment 5: the learning rate

On circles with Adam, set the learning rate to 1. Each step overshoots, the loss jumps about at around 0.7, and the trainer says to try a lower rate. Now switch to SGD at 0.001: the steps are so small that after more than 250 epochs it is still only at 61% training accuracy. Somewhere between, here Adam at 0.01, learns quickly and settles.

Read a loss curve like these, then press Mark to check your answer in the AI Models course.

What the trainer doesn't do

• Your own data. It uses its five built-in datasets of two-dimensional points.
• More than two classes, regression, or images and text.
• Big or special networks: at most 4 hidden layers of 8 units, and no convolutional, recurrent or transformer layers. The AI Models course explains those.
• Extra input features such as x² or sin x. Only the x and y of each point go in.

Common misunderstandings

• Low training loss means a good network. Not if the test loss is rising: watch both curves.
• Bigger is always better. More layers can fit harder shapes but train slower and overfit more easily.
• A higher learning rate learns faster. Only up to a point; too high and the loss jumps about or blows up.
• The network understands circles. It only learns weights that put a boundary in a useful place.

Read next

AI · How AI worksNeural network weights and biases explainedWhat weights and biases are in a neural network, how a neuron uses them, why the bias matters, how to count them, and how training learns them.