Neural Network Learning Lab – Gradient Descent explained visually

An interactive demo of how neural networks learn through error calculation, gradients, and weight updates.

This demo intentionally uses a small neural network so the essential learning mechanisms remain visible and understandable.

HTML · CSS · Vanilla JavaScript · runs locally

Data

Model

Speed

Didactics

Underfitting: model too simple, high bias, poor training and test performance. Overfitting: model too flexible, low training error but weaker generalization.

Visualization

Main plot

2D classification and decision boundary

Probability heatmap for class 1

Neural network

Weights, gradients, and signal flow

Das langfristig gelernte Wissen eines neuronalen Netzes steckt nicht in einem einzelnen Neuron, sondern verteilt in Gewichten und Biases. Dickere Verbindungen zeigen stärkere gelernte Kopplungen.

Loss chart

Binary cross entropy: training and test

Training status

Live metrics
Epoch / steps0
Learning rate0.080
Train loss0.0000
Test loss0.0000
Train accuracy0.0%
Test accuracy0.0%
Generalization gap0.0 PP
Misclassified: training0
Misclassified: test0
Hidden layers1
Neurons per layer6
ArchitectureArchitecture: 2 → 6 → 1
Predictiony_hat = f(x, W, b)
LossL = -[y * log(y_hat) + (1 - y) * log(1 - y_hat)]
Gradientgradient = dL / dW
Update ruleW_new = W_old - learning_rate * gradient
Key ideaGradient descent moves in the direction opposite to the loss gradient.

Test preview

Unseen data – not used for training

Confusion Matrix – Test Data

Predicted 0Predicted 1 Actual 000 Actual 100

Precision: 0.0% · Recall: 0.0% · F1: 0.0%

Bias-Variance Diagnosis

Training and test performance are compared after the first training steps.

What is happening?

XOR
Ready

Start training or the guided explanation. The network begins with random weights and learns a decision function.

The gradient points in the direction of the steepest loss increase. Gradient descent moves in the opposite direction.