← All Labs
IDEA #37 · MACHINE LEARNING FROM THE GROUND UP

Four models, one idea: descend the error

Machine learning looks like magic and is mostly calculus rolling downhill. Each tab below builds a real, hand-rolled model in JavaScript — no libraries, no faked plots — and lets you turn its knobs. A perceptron rotates a line until two clouds of points fall apart; a ball skis a loss landscape you can only ever see in slices; a tiny two-layer network lights up its activations forward and its gradients backward; and a polynomial slides from lazy underfit to memorised noise while a held-out test curve quietly betrays it. Press TRAIN ONE EPOCH up top and every model takes a single step at once. Watch the loss fall — that falling number is the whole of learning.

GLOBAL EPOCH
0
MEAN LOSS · ALL MODELS
TAB 1 · LINEAR CLASSIFIER
Perceptron
Drag points; watch a line rotate until it separates the two classes. The first learning rule, 1958.
TAB 2 · OPTIMISATION
Gradient descent
A ball skis a loss surface toward a minimum. Learning-rate and momentum change everything.
TAB 3 · NEURAL NETWORK
Backpropagation
A 2-layer net learns XOR. Activations light up forward; gradients flow backward as arrows.
TAB 4 · GENERALISATION
Overfitting
A polynomial slides from underfit to memorised noise. The held-out test curve tells the truth.
01

Drive it — rotate a line until the classes fall apart

Two clouds of points, blue and red. The white line is the perceptron's current guess at a boundary; the faint arrow is its weight vector, pointing toward "blue". Drag any point to move it, click empty space to drop a new one (of the active class), and press TRAIN up top — each epoch nudges the line toward every point it currently gets wrong.
DRIVE IT
epoch0 · accuracy not separated
The update is Rosenblatt's 1958 rule: for every misclassified point x with true label y=±1, move the weights w ← w + η·y·x and the bias b ← b + η·y. If the two classes can be split by a straight line, this is guaranteed to find one in finite steps — the Perceptron Convergence Theorem. Make them overlap and it will circle forever.
LEARNING RATE η0.10
MISCLASSIFIED
points wrong
POINTS
0
total
MARGIN
min gap
w = (—, —), b = —
02

Walkthrough

Watch a line learn from its mistakes.
WALKTHROUGH
1
Start on the separable dataset. Press TRAIN a few times. The white line swings around, and after enough epochs MISCLASSIFIED hits 0 — the two clouds sit cleanly on opposite sides.
2
Watch the faint weight arrow. Every wrong point tugs it: the rule literally adds the point's coordinates (scaled by η) to the weight vector, rotating the boundary until nobody is on the wrong side.
3
Drag a red point deep into the blue cloud, or load overlapping. Now no straight line can separate them: the counter never reaches zero and the line keeps twitching — the algorithm can't converge because the promise it relies on is broken.
4
Turn η up near 1 and press TRAIN: the line lurches in big, jerky jumps. Turn it down: slow, smooth, patient. Same trade-off you'll meet again in every other tab.
THE INSIGHT
"A perceptron doesn't 'understand' anything — it just keeps adding its mistakes back into its own weights until it stops making them. That single reflex, stacked and softened, is the seed of every neural network."
03

Explanation

A weighted sum, a threshold, a correction.
EXPLANATION

A perceptron scores a point by a weighted sum s = w·x + b and predicts blue if s > 0, red otherwise. Geometrically, w·x + b = 0 is a straight line (a hyperplane in higher dimensions); w is the normal vector pointing into the blue side, and b slides the line off the origin.

Learning is pure error-correction. Present a point; if the prediction is right, do nothing. If it's wrong, add η·y·x to w. Because that pushes w·x in the direction of the correct label, the same point is now scored a little more correctly — the line rotates toward it.

Rosenblatt proved in 1958 that if a separating line exists, this loop finds one after a finite number of updates, bounded by (R/γ)² where R is the data radius and γ the margin. No line exists for problems like XOR — which is exactly why a single perceptron can't learn it, a limitation Minsky & Papert made famous in 1969.

The escape, twenty years later, was to stack perceptrons into layers and replace the hard threshold with a smooth curve so the whole thing is differentiable — then descend the error with calculus. That is tabs 2 and 3.

04

Research note

The update rule, exactly.
RESEARCH NOTE
The boundary you see is drawn straight from the live weights w, b; the misclassified count and margin are recomputed over every point each frame, so convergence (or its failure) is measured, not scripted. The margin card shows the smallest signed distance any correctly-classified point has to the line — bigger is a more confident split.
Go deeper: Rosenblatt, "The Perceptron" (1958); Novikoff's convergence proof (1962); Minsky & Papert, Perceptrons (1969). The smooth, stackable successor is ▶ Tab 3 · backprop; the optimisation it relies on is ▶ Tab 2 · gradient descent.
01

Drive it — ski the loss surface toward a minimum

This is a contour map of a loss surface: tight rings are steep, dark valleys are low. The dot is a parameter setting; each TRAIN step reads the gradient (the steepest-uphill direction) and takes a step the opposite way. Tune learning rate and momentum and watch it glide, stall in a saddle, or overshoot and diverge. Click anywhere to drop the skier at a new start.
DRIVE IT
step0 · loss skiing
The step is θ ← θ − η·∇L(θ) with a momentum term that keeps a running velocity, so the ball builds speed downhill and coasts across flat spots. The gradient ∇L is computed live by finite differences on whichever surface is selected — the arrow on the ball shows the actual descent direction each step.
LEARNING RATE η0.030
MOMENTUM β0.80
|∇L|
slope
SPEED
|velocity|
STATE
of descent
Too big an η and the ball leaps over the valley and blows up; too small and it crawls. Momentum is the difference between a marble and a boulder.
02

Walkthrough

Feel why the step size is everything.
WALKTHROUGH
1
On the convex bowl, press TRAIN a few times. The dot slides straight to the bottom and loss drops toward 0. This is the easy case — one minimum, every downhill road leads home.
2
Crank η up past ~0.13 and step again: the ball overshoots, ricochets up the far wall, and the loss increases. Too big a step turns descent into escape. Turn it back down and it settles.
3
Switch to rugged. Now there are several valleys. Where the ball lands depends entirely on where it started — click around and watch it fall into different local minima. There is no single "right" answer it always finds.
4
Try Rosenbrock — the banana valley. With momentum near 0 the ball zig-zags painfully along the floor; raise β toward 0.9 and it coasts down the curved trough. That's why real optimisers carry velocity.
THE INSIGHT
"Training a model is just rolling downhill on an error surface you can never fully see — you only ever feel the slope beneath your feet. The learning rate is how big a stride you dare to take into the fog."
03

Explanation

Gradients, steps, and momentum.
EXPLANATION

Every model has parameters θ and a loss L(θ) that measures how wrong it is on the data. Learning means finding θ that makes L small. The loss is a landscape over parameter space — here just 2-D so we can draw it, but in a real network it lives in millions of dimensions.

The gradient ∇L is the vector of partial derivatives; it points in the direction of steepest increase. So to go down, step the opposite way: θ ← θ − η∇L. The scalar η, the learning rate, is the stride length.

Momentum keeps a running velocity v ← βv − η∇L, then θ ← θ + v. Consistent downhill directions accumulate into speed; oscillations across a narrow valley partly cancel. It damps zig-zag and powers through flat saddle regions where the raw gradient nearly vanishes.

Because you only ever consult the local slope, gradient descent finds a nearby minimum, not necessarily the global one — the reason initialisation and randomness matter. Astonishingly, in the huge landscapes of deep networks, most local minima turn out to be nearly as good as the best.

04

Research note

The update, exactly.
RESEARCH NOTE
The gradient here is a genuine central-difference estimate of the chosen analytic surface, and the trajectory is the real iterate sequence — divergence when η is too large is a computed fact, not an animation. This tab is the compact companion to the full 3-D loss-landscape lab, which renders the same idea as a ball skiing a Three.js surface.
Go deeper: Cauchy (1847), first gradient method; Polyak's heavy-ball momentum (1964); Kingma & Ba, Adam (2015). Full 3-D version: ▶ #25 · Gradient descent skiing a loss landscape. It powers the network in ▶ Tab 3.
01

Drive it — a tiny network learns XOR

A 2 → 3 → 1 network, drawn live. Forward pass: a training input flows left-to-right, each neuron glowing by how active it is. Backward pass: the error flows right-to-left, and each edge turns green or red and thick or thin to show the gradient — how much that weight wants to change. Press TRAIN and watch the network teach itself the one function a single perceptron famously cannot: exclusive-or.
DRIVE IT
epoch0 · loss learning
Every number on screen is real: the forward activations use tanh hidden units and a sigmoid output; the backward arrows are the exact partial derivatives ∂L/∂w from the chain rule. Backprop is just the chain rule applied layer by layer, reusing each layer's result to get the next — which is why a network with millions of weights can still be trained.
LEARNING RATE η0.50
OUTPUT
for shown case
TARGET
wanted
SOLVED
0/4
cases right
XOR needs a bend no straight line can make. Watch the loss stall on a plateau, then break — the hidden layer has just discovered a curved boundary.
02

Walkthrough

Forward to predict, backward to blame.
WALKTHROUGH
1
Press re-init weights. The output is near random and SOLVED reads 0 or 1 of 4. Click the four input-case buttons to watch each example flow forward and see how wrong the raw network is.
2
Switch to gradient flow and press TRAIN once. Error propagates backward: thick red/green edges are weights with a strong gradient — the ones most to blame — and they'll change most. This is the "back" in backprop.
3
Hold down TRAIN (or run). The loss falls, stalls on a plateau where all four cases sit near ½, then suddenly cracks as the hidden units specialise. SOLVED climbs to 4/4.
4
Raise η toward 2 and re-init: training is faster but can thrash or get stuck. Drop it low: slow but steady. Same knob, same trade-off as tabs 1 and 2 — because it is gradient descent, just on a network's weights.
THE INSIGHT
"Backpropagation is nothing but the chain rule, bookkept efficiently: run forward to see the answer, then walk backward handing each weight its exact share of the blame. Repeat, and a pile of numbers learns to compute XOR — and, at scale, to see and to speak."
03

Explanation

Chain rule, layer by layer.
EXPLANATION

Each neuron computes a = σ(w·x + b) — a weighted sum passed through a non-linear activation (here tanh, then a sigmoid at the output). Stacking a hidden layer lets the network carve curved decision regions, escaping the single perceptron's straight-line limit and solving XOR.

To train, define a loss (squared error, or cross-entropy) and ask: how does L change if I nudge this one weight? That's the partial derivative ∂L/∂w. Computing millions of these naively would be hopeless.

Backpropagation makes it cheap. The chain rule says a deep derivative is a product of local ones. So compute the error at the output, then propagate a "sensitivity" signal δ backward through each layer, multiplying by that layer's local derivative. Every weight's gradient falls out as δ · (its input).

One forward pass, one backward pass, and you have every gradient — then take a gradient-descent step (Tab 2) on the whole weight vector. Rumelhart, Hinton & Williams popularised this in 1986; it is the engine under essentially every modern neural network.

04

Research note

The backward pass, exactly.
RESEARCH NOTE
The weights, activations, and gradients shown are the network's actual state — forward pass, squared-error loss, and analytic backprop are all computed in JavaScript with no library. Edge colour is the sign of ∂L/∂w and edge width is its magnitude, so you are literally watching the chain rule assign blame.
Go deeper: Rumelhart, Hinton & Williams, "Learning representations by back-propagating errors" (1986); Werbos (1974); Minsky & Papert's XOR objection (1969). The optimiser it feeds is ▶ Tab 2; its single-layer ancestor is ▶ Tab 1.
01

Drive it — the polynomial that memorises noise

The hollow blue dots are training data; the solid gold dots are held-out test data the model never sees. A polynomial of degree 3 is fit to the blue points by least squares. Slide the degree up: the curve hugs the training dots ever tighter — but keep an eye on the test error. Somewhere it stops learning the signal and starts memorising the wiggles.
DRIVE IT
train err · test err
The fit is a genuine least-squares solve of the normal equations for a degree-d polynomial. The true function (dashed) is a gentle curve plus noise; low degree underfits (too stiff to follow it), high degree overfits (flexible enough to thread every noisy point, inventing wild swings between them that the test dots expose).
POLYNOMIAL DEGREE d3
NOISE σ0.18
TRAINING POINTS n12
TRAIN ERR
seen data
TEST ERR
unseen data
BEST d
min test
The little error-vs-degree chart under the curve is the classic U: training error falls forever, test error dips then soars. The bottom of the test U is the sweet spot.
02

Walkthrough

Watch the test curve tell the truth.
WALKTHROUGH
1
Set degree to 0 or 1. The fit is a flat or straight line that misses the curve's shape — both train err and test err are high. This is underfitting: the model is too simple to capture the signal.
2
Slide degree up to around 3. The curve now follows the true shape, and test error hits its minimum. The model has learned the pattern without chasing the noise — this is the sweet spot the BEST-d card is tracking.
3
Push degree to 12–15. The curve now passes almost exactly through every blue training dot — train err → 0 — but whips violently between them. The gold test dots land nowhere near it, and test err explodes. That gap is overfitting.
4
Now raise training points to 40 and push the degree high again. More data tames the wild swings — the model can't wiggle freely when there are dots everywhere. Data is the cheapest regulariser there is.
THE INSIGHT
"A model that fits its training data perfectly has told you nothing — the only error that counts is on data it has never seen. Memorising is easy; generalising is the whole job."
03

Explanation

Bias, variance, and the test set.
EXPLANATION

Fitting a degree-d polynomial means choosing coefficients that minimise squared error on the training points — a linear least-squares solve. As d grows, the model class gets more flexible: it can represent ever more wiggly curves, so it can always drive training error lower.

But low training error is not the goal. We want low error on new data drawn from the same source. That's why we hold out a test set and never fit to it — it's an honest estimate of how the model behaves in the wild.

The famous bias–variance trade-off: a too-simple model has high bias (systematically wrong, underfit); a too-complex one has high variance (wildly sensitive to the particular noise in the training sample, overfit). Total test error is roughly bias² + variance + irreducible noise — a U-shaped curve in model complexity.

The cures are more data, simpler models, and regularisation (penalising large coefficients). Every modern network — however enormous — lives or dies by this same gap between training loss and held-out loss.

04

Research note

The fit, exactly.
RESEARCH NOTE
The coefficients are a real least-squares solution (normal equations with a light ridge term for numerical stability at high degree), and both errors are mean-squared residuals recomputed live over the fixed train and test splits. The U-shaped test curve is measured across every degree, not drawn by hand.
Go deeper: Geman, Bienenstock & Doursat on bias–variance (1992); Vapnik's statistical learning theory; the modern "double descent" puzzle (Belkin et al., 2019). The optimisation view of fitting is ▶ Tab 2; the network whose capacity you'd regularise is ▶ Tab 3.
Idea #37 of the maths-visual-teaching series · four models, one falling loss · every perceptron, gradient, network and fit computed live in the browser · no libraries, no build step.