Home▸Machine Learning & Neural Networks▸Advanced Technology Machine Learning Simulation

🧪 Advanced Technology Machine Learning Simulation

Click into a 2D feature space to plant labelled examples of three classes and watch a real k-nearest-neighbours classifier recompute its decision boundary live, rendered as a 3D confidence landscape.

Machine Learning & Neural Networks2DModerate60 FPS

How it Works

Every vertex of the 3D grid corresponds to a point in a 2D feature space (x₁, x₂). The coloured spheres are labelled training examples of three classes. For any point in the grid, the classifier finds the k nearest training examples and lets them vote on a class; the winning class's vote share becomes that point's confidence, mapped to both the landscape's height and its colour. There is no training phase and nothing is "learned" ahead of time — every click that adds a point changes the raw dataset the classifier looks up at query time, which is why the whole landscape can reshape instantly.

Two extra knobs change how the vote is counted. The distance metric switches between Euclidean distance (straight-line) and Manhattan distance (grid-step, "taxicab") between a query point and each training example. The voting mode switches between uniform votes (every one of the k neighbours counts equally) and distance-weighted votes (closer neighbours count more, so a single very close point can outvote several farther ones).

Prediction for query point q: d(q, pᵢ) = √[(q₁−p₁ᵢ)² + (q₂−p₂ᵢ)²] (Euclidean) d(q, pᵢ) = |q₁−p₁ᵢ| + |q₂−p₂ᵢ| (Manhattan) N_k(q) = the k training points pᵢ with smallest d(q, pᵢ) vote(c) = Σ_{i ∈ N_k(q), class(pᵢ)=c} wᵢ wᵢ = 1 (uniform) wᵢ = 1 / (d(q,pᵢ)+ε) (distance-weighted) ŷ(q) = argmax_c vote(c) confidence = vote(ŷ) / Σ_c vote(c)

The "Leave-one-out accuracy" stat is a cheap generalisation estimate: every training point is temporarily removed from its own neighbour pool and reclassified using only the rest of the dataset, then checked against its true label. It updates after every click, slider move, or toggle — a direct, visible readout of how the current k, metric and weighting choice actually performs on the data you've planted.

Frequently Asked Questions

What is k-nearest neighbours (k-NN)?

k-NN is a supervised classification algorithm with no training phase: to label a new point it simply finds the k closest labelled examples in feature space and lets them vote. The "model" is the training set itself.

Why does the landscape get taller near clusters of one colour?

Height encodes confidence — the winning class's share of the k nearest votes. Deep inside a single-class cluster nearly all k neighbours agree, so confidence and height are near maximum. Near a boundary the vote is split, so the landscape dips toward a valley.

What does the k slider actually change?

k is how many nearest neighbours get a vote. A small k (1-3) lets the boundary hug every single point tightly, including noise. A large k smooths the boundary by averaging over a wider neighbourhood, at the risk of blurring genuinely separate regions together.

What is Leave-One-Out accuracy?

For every training point, the classifier is asked to predict its label using every other point but not itself, then the prediction is checked against the true label. It's a cheap way to estimate how well the current k, metric and weighting would generalise to points not yet seen.

How is this different from a neural network classifier?

There are no weights, layers or gradient descent here. k-NN is an instance-based ("lazy") learner — it stores the raw examples and defers all computation to prediction time, recomputing distances to every stored point. That's exactly why adding one click-point changes the landscape instantly, with nothing to retrain.

About this simulation

This is a real k-nearest-neighbours classifier, not an animation of one. Three seeded clusters of labelled points sit in a 2D feature space rendered as a 3D landscape: height and colour both encode the classifier's confidence at that location, recomputed by an actual distance-and-vote calculation against every stored point. Click to plant a new example of your chosen class and the whole surface reshapes to reflect it — there's no pre-baked animation, no training loop, and no neural network involved.

🔬 What it shows

A live k-NN classifier over a click-editable dataset: distance-based voting, an adjustable k, a Euclidean/Manhattan metric switch, and uniform vs. distance-weighted voting, all recomputed on every change and rendered as an animated confidence landscape.

🎮 How to use

Pick a class (A/B/C), then click or tap inside the 3D grid to plant a point. Drag to orbit the landscape, scroll or pinch to zoom. Adjust k, the distance metric, the voting mode and the grid resolution to see the boundary reshape live.

💡Did you know?

k-NN was one of the earliest classification algorithms (1951) and is still a standard baseline today — it needs no training step at all, which is exactly why this simulation can rebuild its entire decision surface the instant you click.

Frequently asked questions

Why does a single new click sometimes flip a large area of the landscape?

If you click far from existing points, or with a small k, that one new example can become one of the k nearest neighbours for a wide region of the grid — with k=1 it can single-handedly dominate the vote for its entire local neighbourhood.

Why does distance-weighted voting change the boundary shape?

Uniform voting treats all k neighbours equally, so a distant neighbour counts as much as a close one. Distance-weighting divides each vote by roughly its distance, letting very close points dominate even when outnumbered by farther ones — this tends to produce sharper, less symmetric boundaries.

What happens if I set k larger than the number of points?

The classifier automatically caps k at the current number of training points, so every point simply votes and the result is the same regardless of how high the slider is set.

Why does raising the grid resolution slow things down?

Every additional grid vertex needs its own k-NN classification against the full training set, so the cost scales roughly with resolution² × number of points. "Detailed" mode trades some frame budget for a smoother-looking boundary.

Is this simulation using a real machine learning library?

No — the entire k-NN classifier, including distance computation, sorting, voting and leave-one-out accuracy, is a small amount of plain JavaScript running in your browser. That's part of the point: k-NN's logic is simple enough to implement from scratch in a few dozen lines.

⚙ Under the hood

This simulation dives into the core mechanics of machine learning algorithms, allowing you to train and test predictive models on simulated datasets. Explore how different algorithms learn patterns and make predictions – a fundamental aspect of modern AI development.

Machine LearningAlgorithmsPredictive Modeling

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install