visual-cs

Quadtree - 2D spatial partitioning with range and nearest-neighbor search

← All visualizations

Quadtree
Spatial Explorer

Build a point quadtree interactively and watch the canvas subdivide only where density increases. Switch between insert, range query, and nearest-neighbor modes to see how spatial pruning avoids visiting most quadrants.

Points
0
stored 2D samples
Leaves
1
terminal regions after subdivision
Depth
0
deepest occupied branch
Visited
0
nodes touched in current replay
Speed 680ms
Preset Stories
Canvas
Click to insert points Drag a rectangle for range search Click once for nearest neighbor Pink flash = subdivision
Insert mode Click anywhere on the canvas to add a point.
Status: Ready.
Point
Subdivision line
Range rectangle / visited node
Nearest point
Fresh split

How it works

A point quadtree stores points in axis-aligned rectangles. Each node holds up to capacity points. When another point would overflow the leaf, the node subdivides into four equal quadrants, and its points are redistributed downward.

For a range query, the algorithm first tests rectangle intersection. If a quadrant does not intersect the query box, the entire subtree is skipped. For nearest-neighbor search, the tree explores the child that contains the query first, then only visits other children when their bounding boxes could still contain a closer point.

Replay Snapshot

Insert
Mode
4
Capacity
0
Range Hits
-
Best Dist

Operation Log

Interaction Notes

Insert mode: each click inserts one point and may trigger a subdivision cascade.
Range mode: press and drag to draw a query rectangle, then replay node pruning step by step.
Nearest mode: click a target point to see bounding-box checks narrow the search.