k-nearest neighbours k-nearest neighbours (k-NN)

1. Ask k neighbours, take a vote

One neighbour can be a weird one — a sweet lemon, a sour mango. Safer: ask the k closest neighbours and take a majority vote. That is k-NN.

1. sort the training rows by distance to the new point
2. keep the first k
3. count votes per label; the label with most votes wins
4. tie? pick the label of the nearest neighbour among the tied ones

Try it above: click to add 🥭 and 🍋 points, then move the k slider. Small k makes a jagged, nervous map; bigger k makes it smooth (too big and it just votes for the most common fruit).

Challenge: k-NN with a vote

Write knnPredict(train, point, k):

1. sort a copy of train by distance from row.point to point (closest first)
2. take the first k rows
3. count votes per label and return the winner
4. on a tie, return the tied label that appears first in the sorted list (the nearest)

2. Paint the decision map

A model is easier to understand when you can see it. Split the board into a 10 × 10 grid. For the centre of every cell, ask k-NN “mango or lemon?” and paint the cell gold or green.

The border where gold meets green is the model’s decision boundary. Nobody wrote that border — it came out of the examples.

Two loops do it: one for rows, one for columns inside it. cellToPoint(col, row) already turns a cell into a 0–1 point.

Challenge: Mango-or-lemon map

Complete the two TODOs:

1. For every row 0–9 and col 0–9, predict with knnPredict(TRAIN, cellToPoint(col, row), 3). Set ctx.fillStyle to "gold" for mango or "lightgreen" for lemon, and paint ctx.fillRect(col * 20, row * 20, 20, 20). Add 1 to mangoCells for every mango cell.
2. Show the count in #summary exactly like Mango cells: 42 of 100.