Skip to main content
SimilarExport ZIP
100%

Quadtree Panning & Zooming PoC

✓ Published1🌍 Public
CCurran Kelleher
Last edited May 16, 2024
Created on May 16, 2024

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`.

AI-generated description

Inspired by Observable: Zoomable Raster & Vector

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Mercator Panning & Zooming

This example demonstrates a Mercator projection map of the world that supports interactive panning and zooming. The visualization renders country boundaries as vector paths and includes a graticule grid, with an outline representing the sphere. The interaction is managed through the `d3.zoom` API, which adjusts the projection's scale and translation. Map data is fetched from the *visionscarto* world atlas, and the rendering pipeline uses `d3.geoPath` and `d3.geoGraticule`, with the `topojson-client` library processing the topology data into geographic features.

CCurran Kelleher
81% match
Loading thumbnail…

Panning & Zooming on a Globe - old

This example shows an interactive orthographic globe that supports panning and zooming. Users drag to rotate the Earth and use the mouse wheel to scale the projection. The visualization renders world landmasses from TopoJSON data using `d3.geoOrthographic` and `d3.geoPath`. Panning is implemented with `d3.drag` to adjust the projection’s rotation, while zooming uses `d3.zoom` to modify its scale. The code also uses `d3.select` and `d3.json` to load and render the geographic features.

CCurran Kelleher
76% match
Loading thumbnail…

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.

CCurran Kelleher
75% match
Loading thumbnail…

Orthographic Zoom III

This interactive globe displays country boundaries using an orthographic projection, panning and zooming smoothly with the mouse. During interaction, it renders the lower-resolution 110m world-atlas dataset, then switches to the higher-resolution 50m dataset once the motion stops for crisp detail. Built with D3 v4, it uses `d3.geoPath` and TopoJSON to project geographic features, with drag and zoom behaviors from `d3.drag` and `d3.zoom` controlling the globe's rotation and scale.

CCurran Kelleher
75% match
Loading thumbnail…

Map Pan & Zoom IV

This example demonstrates fast map panning and zooming on a Canvas. It uses pre-projected geometry from a `world.json` file, rendered via d3.geo.path. Pan and zoom use `d3.behavior.zoom`, with dynamic simplification via a custom `d3.geo.transform` and viewport clipping via `d3.geo.clipExtent`. The map shows country boundaries and a sphere outline.

Mmbostock
74% match
Loading thumbnail…

Orthographic Zoom II

This example demonstrates panning and zooming on an orthographic globe projection, allowing users to rotate the Earth by dragging and scale it with a zoom gesture. Building on a prior version, it improves panning accuracy by accounting for latitude during the rotation adjustment. The implementation uses D3 v4 with `d3.geoOrthographic` and `d3.geoPath` for rendering, alongside `d3.drag` and `d3.zoom` for interaction. Landmasses come from the `world-110m` dataset in TopoJSON format, and the globe is drawn as SVG paths.

CCurran Kelleher
74% match
Loading thumbnail…

Canvas Globe with Panning & Zooming

This canvas globe visualization displays country boundaries using an orthographic projection, allowing users to pan and zoom. Built with D3's `geoOrthographic`, `geoPath`, and `geoGraticule` APIs, it renders directly to a Canvas context. The map supports drag-based rotation and scroll-based zooming via D3's `drag` and `zoom` interactions. It loads world topology data from a remote JSON file and animates state transitions, with retina display support through device pixel ratio scaling.

CCurran Kelleher
74% match