Scale-Dependent Sampling

100%

Scale-Dependent Sampling

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 7, 2013

This example animates a map projection zooming in and out, demonstrating scale-dependent sampling. As the equirectangular projection scales from 145 to 4,640, the graticule and sphere outline remain smooth, while the red equator line is resampled; its resampled points are drawn as circles, showing how point density changes with map scale. The animation uses D3 v3’s `d3.geo.path`, `d3.geo.graticule`, and `d3.interpolate` to tween the projection's scale and translation, rendering to a Canvas via a buffered path context that extracts the resampled coordinates.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating world map rendered on a Canvas element, with countries and a graticule drawn in grayscale against a dark sphere. Using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`, the code redefines the projected sphere each frame via a `d3.timer` that increments the rotation speed. Land polygons are loaded from a local `land.geojson` file, and the animation highlights how reprojection affects visible geography as the globe spins.

AAlexanderDavidson

76% match

Loading thumbnail…

Adaptive Resampling

Three D3 v3 projections apply adaptive resampling to a rotating world map, showing how line simplification improves efficiency. The example compares no resampling, uniform resampling, and adaptive resampling, with red points marking each projected sample. The code uses `d3.geo.path` and a custom buffer context to extract resampled points from a graticule and a sample line. Animation runs via `d3.timer`, updating the equirectangular projection continuously.

Mmbostock

76% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates map reprojection with zoom and rotation using D3 v4 and canvas rendering. It displays geographic data from `ne_110m_admin_0_sovereignty.geojson` and a graticule, drawn with `d3.geoPath` and a `d3.geoEquirectangular` projection that rotates over time via `d3.timer`. The scene is embedded in an A-Frame 0.5.0 environment with multiple canvas textures applied to 3D entities, including a sphere and plane, using the `draw-canvas` component.

AAlexanderDavidson

75% match

Loading thumbnail…

Map Pan & Zoom II

This example demonstrates interactive pan and zoom on a world map using a dynamic Mercator projection. The map renders country landmasses as black paths, with white boundaries and a light gray sphere background, all within an SVG element. Using the `d3.behavior.zoom` API, user drag or scroll actions trigger reprojection and redraw the geospatial data via `d3.geo.path`. The underlying geographic data is loaded as JSON from a gist, and the projection translates and scales dynamically with each zoom event.

Mmbostock

74% match

Loading thumbnail…

Transversing Equirectangular

Animated equirectangular projection of the world sphere, with a red equator and graticule lines, rotates the globe to show how the projection distorts paths. The animation cycles through three phases: a pure rotation, a zoom-out with a simultaneous SVG rotation, and a return. Built with D3 v3, it uses `d3.geo.equirectangular`, `d3.geo.path`, and `d3.geo.graticule`, and animates via D3’s `.transition()` and `.tween()` methods to recompute geographic paths in real time.

Mmbostock

74% match

Loading thumbnail…

Zoom and Rotating (Reprojecting)

This example demonstrates a dynamic equirectangular world map that is rendered onto a canvas and then applied as a texture to both a plane and a sphere in a 3D A-Frame scene, allowing for zoom and rotation. The map, sourced from a GeoJSON file, uses `d3.geoEquirectangular` projection and a `d3.geoPath` generator to draw graticules and country boundaries. A `d3.timer` drives continuous redraws to the canvas, while the A-Frame `draw-canvas` component integrates it into the virtual environment, with the sphere and camera controls enabling interactive reprojection.

AAlexanderDavidson

73% match

Loading thumbnail…

Adaptive Resampling

Adaptive resampling recursively subdivides input polygons, applying the Douglas–Peucker perpendicular distance check to determine whether additional samples are needed. The animation cycles through eight stages, starting with a red equator as a polyline of five coordinates and progressively refining it through resampling. Each stage shows the projected resampled points, with black circles and lines highlighting newly inserted samples and their original positions. The example uses d3.geo.equirectangular, d3.geo.interpolate, and d3.geo.path, rendering with SVG and transitions, and demonstrates the adaptive subdivision of a geographic line on a graticule sphere.

Mmbostock

73% match

Loading thumbnail…

go_ndm_01

This example demonstrates smooth transitions between two map projections, Equirectangular and Natural Earth, with a red dot marking the origin [0,0] on each projection. The visualization cycles through projections every 1.5 seconds with a 750-millisecond tween, combining animated morphing of map paths with graticule and land outlines from a world-110m GeoJSON dataset. Using D3 v4, it employs `d3.geoPath`, `d3.geoGraticule`, and a custom projection tween based on `attrTween`, along with a dropdown menu to manually switch projections and pause the automatic rotation.

HHakkahi

73% match