Drag any marker to move it. Click empty space to drop the pin and see which site is nearest. Arrow keys nudge the selected marker; press N for the next one.
“Delaunay” joins every pair of sites whose cells share a boundary. “Cone view” shades each cell by distance from its site — the diagram is exactly what you see looking down on a field of cones.
Move every site to the centre of its own cell, then redraw. Repeat, and the cells even out into the honeycomb-ish patches of a giraffe's coat.
Where's the maths? This is geometry of constructions and coordinates — the ruler-and-compasses work you do in Sec 3, put on a map. Start with a handful of points called sites: schools, hospitals, water pumps, mobile phone masts. Colour every other point of the map according to which site is closest to it. The map breaks into regions called cells, and the surprise is that the boundaries are always straight lines, never curves. Each boundary is the perpendicular bisector of two sites, because being the same distance from two points is exactly the condition that construction draws. Distances are measured with the coordinate formula √((x₂−x₁)² + (y₂−y₁)²), which is Pythagoras in disguise. Hover any edge on the map and the whole construction — midpoint, right angle, two equal lengths — is drawn for you.
Beyond the syllabus: computational geometry algorithms are enrichment.
The cell of a site S is the set of points closer to S than to any other site:
cell(S) = { P : |PS| ≤ |PT| for all other sites T }
Take just two sites A and B. The points with |PA| = |PB| form the perpendicular bisector of AB — the line through the midpoint of AB at right angles to it — and it cuts the plane into two half-planes: nearer A on one side, nearer B on the other. With many sites, a point is in A's cell only if it beats every rival, so A's cell is the overlap of one half-plane per rival. An overlap of half-planes is always a convex polygon, which is why the picture is made of straight edges and why no cell can ever have a dent in it. That is also how this page computes the diagram: start with the whole map, then slice it once for every other site.
A shared edge means two sites are neighbours. Join every such pair and you get the Delaunay triangulation (turn it on) — the diagram's dual. Its triangles are as close to equilateral as possible, so it is the standard way to turn scattered survey points into a terrain mesh. Where three edges meet, the corner is the centre of the circle through three sites: it is equidistant from all three, the same fact as the circumcentre you build with three perpendicular bisectors.
Lloyd relaxation repeats one simple step: move each site to the centre of gravity of its own cell, then rebuild. The cells drift towards equal, roundish patches with mostly six neighbours — the pattern on a giraffe's coat, on a dragonfly's wing, in dried mud and in soap foam, all of which grow outwards from scattered starting points at the same rate and stop where they meet, which is precisely the Voronoi rule.
In 1854 Dr John Snow mapped the cholera deaths in Soho, London. He drew on his map a dotted boundary around the area whose nearest water pump was the one in Broad Street — a Voronoi cell in all but name — and showed the deaths sat inside it. The pump handle came off, and the idea that cholera travelled in water, not in bad air, began to win. Switch to the cholera mode and drag the pumps to see the count change.
Try this: switch to “Nearest school”, hover one edge and read the two distances — they stay equal wherever on that edge you point. Now drag one site slowly towards its neighbour: predict, before you let go, which way the shared edge slides. Then drag a site right up against another and watch its cell shrink to a sliver: a site can never lose its cell completely, because the midpoint of the two is always nearer to it than to anyone else.
Controls: drag a marker to move it · click empty space to drop the pin · hover an edge for the bisector construction · arrow keys nudge the selected site.