Viewing a saved revision (read-only)
c07b2362663e430593ff47636abf5814
Quadtree Window
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 descriptionA 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