Skip to main content
SimilarExport ZIP
100%

Quadtree Window

✓ Published0🌍 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
MIT Licensed

Similar vizzes

Loading thumbnail…

Quadtree

A quadtree accelerates two-dimensional point filtering in an interactive scatterplot. The visualization shows 2,500 random points that users select by dragging a rectangular brush. Orange points are scanned by the algorithm but not selected, while red points fall within the brush extent. The code uses d3.quadtree to recursively subdivide space and d3.brush for interaction, rendering SVG circles and cell outlines.

FFrissAnalytics
79% match
Loading thumbnail…

Quadtree

This example demonstrates accelerated two-dimensional filtering using d3-quadtree. A quadtree recursively subdivides square cells into four equal-sized subcells, with each leaf containing a single point from a dataset of 2,500 randomly generated coordinates. When a d3.brush selection is dragged, the quadtree’s visit method only scans points in intersecting cells, coloring scanned-but-unselected points orange and selected points red. The SVG rendering shows the quadtree’s subdivision rectangles in gray, highlighting how the algorithm avoids checking points outside the brush extent.

Mmbostock
77% match
Loading thumbnail…

Quadtree Search

This example visualizes a quadtree spatial index by rendering its hierarchical rectangular cells as SVG rectangles. As the mouse moves, it searches the quadtree for the nearest of 2,500 randomly generated points, highlighting the closest point in red. The visualization uses the d3.quadtree API to build and search the index, with d3.select and d3.mouse handling mouse events. The quadtree’s cells are drawn via the visit method, while points are displayed as SVG circles.

FFrissAnalytics
77% match
Loading thumbnail…

Animated Quadtree

This animation demonstrates how a quadtree structure changes as new points are added, displaying each red dot as a point, gray rectangles as leaf nodes, and black lines as internal boundaries. The code uses the `d3_quadtree` JavaScript library with `tree.add`, `tree.visit`, and canvas rendering via `getContext("2d")`. Points are generated using `d3_random.randomNormal` to create a normal distribution centered at the midpoint of the canvas, with each addition triggering a partial redraw to highlight the affected region.

Mmbostock
76% match
Loading thumbnail…

Quadtree Panning & Zooming PoC

This example demonstrates an adaptive quadtree-based rendering technique for panning and zooming over geographic data. It visualizes world country boundaries from the visionscarto-world-atlas dataset using a Mercator projection via `d3.geoMercator` and `d3.geoPath`. A grid of points covering the northeastern United States is indexed into a `d3.quadtree`, which is then traversed during zoom to draw colored rectangles that subdivide the viewport only to the necessary depth, with a visible cutoff threshold. Pan and zoom interactions are handled by `d3.zoom` and `d3.zoomIdentity`.

CCurran Kelleher
75% match
Loading thumbnail…

Quadtree Panning & Zooming on Canvas

A canvas-based map of world countries renders with a graticule, while a quadtree dynamically subdivides a grid of coordinate points based on zoom level. The D3 quadtree traversal projects each cell and colors visible subdivisions using a sequential scale only when they form a regular grid. Panning and zooming via d3.zoom updates the projection transform, triggering redraws that intersect quadtree cells with the viewport, showing how spatial indexing adapts resolution to map scale.

CCurran Kelleher
75% match
Loading thumbnail…

Quadtree - nearest neighbor

Clicking on the diagram places a yellow query point and a quadtree nearest-neighbor search identifies its closest orange base point, highlighted red. The d3.geom.quadtree recursively visits green rectangles, with color saturation indicating depth, while untested base points remain gray. Only orange points are measured for Euclidean distance, and the code uses d3.svg and SVG circles and rectangles to render the animated search process.

FFrissAnalytics
72% match
Loading thumbnail…

Census Tract Quadtree Contours

This visualization uses a quadtree-based indexing technique to render U.S. Census Tract demographic data as an interactive, zoomable map. It precomputes a uniform grid of sampled values from tract polygons indexed in an R-tree, aggregates those values into a quadtree, and then renders the visible quadtree nodes as colored rectangles using Canvas. The map displays racial composition data (e.g., white, black, Asian populations) from the 2023 ACS, with countries and graticule lines from the VisionsCarto world atlas. Built with D3.js, React, and Turf, it demonstrates a performant alternative to traditional choropleth rendering for large polygon datasets.

CCurran Kelleher
71% match