Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Quadtree Window

Public visualization

Viewing a saved revision (read-only)

c07b2362663e430593ff47636abf5814

Quadtree Window

0 stars0🌍 Public
CCurran Kelleher
Last edited May 16, 2024
Created on May 16, 2024

This example demonstrates a spatial data structure by overlaying a quadtree visualization on a set of colored circles. Circles are placed at fixed coordinates with varying radii and opacity, and the quadtree partitions the 2D space into hierarchical rectangles. The quadtree nodes are rendered as semi-transparent white rectangles that subdivide the canvas, revealing the tree’s internal structure. Pan and zoom interactions are enabled via D3’s `zoom` behavior, which updates a transform applied to the entire group. The quadtree is built and traversed using D3’s `quadtree` API with `visitAfter` to collect node bounds.

AI-generated description

A demonstration of how to add panning and zooming using d3-zoom.

Challenge

  • Use this technique to add zooming to a visualization you created, such as a map