Neural Network Playground: Train a Real Network and Watch It Learn

How to use the Neural Network Playground

1. 1. Choose a datasetStart with Circle, then try XOR and Spiral.
2. 2. Shape the networkSet hidden layers, activation, learning rate and extra features.
3. 3. TrainPress Train to run 200 epochs; press again to keep going.

What is really happening

This is a genuine multilayer perceptron written in JavaScript. Each point passes forward through the layers: every neuron computes a weighted sum plus bias and applies the activation, and the output neuron uses a sigmoid to give a probability. The loss is binary cross-entropy, and backpropagation pushes gradients back through each layer so mini-batch gradient descent can update every weight.

The default network is 2-4-4-1: two inputs (x and y), two hidden layers of four neurons and one output. It has (2 × 4 + 4) + (4 × 4 + 4) + (4 × 1 + 1) = 37 trainable parameters, the number shown in the result. The orange and navy background shows what the network predicts at every spot.

Experiments

• No hidden layer: clear the hidden layers box. The network can only draw a straight line, so the circle fails.
• Add x², y², xy: with these features even a tiny network separates the circle, which shows the value of feature engineering.
• XOR needs at least one hidden layer, the classic proof that single perceptrons are limited.
• Spiral needs more neurons and patience; try 8, 8 with tanh.
• Learning rate 3 often makes the loss jump around or blow up.

The same seed gives the same data and starting weights, so you can compare settings fairly. Training accuracy is measured on the training points. Inspired by the idea of the TensorFlow Playground, but built from scratch for this page. See a single neuron learn in the perceptron simulator.

Frequently asked questions

More free tools

• Activation Function PlotterPlot neural network activation functions and their
• Perceptron SimulatorTrain a single perceptron on AND, OR, NAND, NOR, XOR or your
• Gradient Descent VisualizerSee gradient descent step down a curve. Change the learning
• Neural Network Parameter Count CalculatorCount trainable parameters in a dense network or a CNN layer
• Learning Rate Schedule VisualizerPlot learning rate schedules for deep learning: cosine
• K-Means Clustering VisualizerInteractive k-means clustering visualizer. Add points

See all free tools