go_ndm_01

Projection Transitions

A drop-down menu and an auto-advancing timer cycle through dozens of map projections, each rendered over a world map with a graticule and sphere outline. The example shows how D3’s `d3.geo.path` and the `d3.geo.projection` plugin smoothly interpolate between projections using the `transition` API, with land from TopoJSON. A menu allows manual selection, while a periodic random selection demonstrates animated morphing between projections.

81% match

Orthographic to Equirectangular

This example animates the transition between two map projections: starting with an orthographic view of the globe and morphing into a flat equirectangular projection. A red equator line and gray graticule remain visible throughout, highlighting how geographic coordinates shift between the two representations. The animation runs continuously, cycling through the interpolation in both directions. The implementation uses a custom projection function that blends the output coordinates of `d3.geo.orthographic` and `d3.geo.equirectangular`, driven by a transition tween that updates the projection’s alpha parameter and redraws SVG paths rendered by `d3.geo.path`.

80% match

Globe to Map transition

This interactive visualization demonstrates a smooth animated transition between two geographic projections of the same world map. A slowly rotating orthographic globe morphs into a flat equirectangular projection when a country is clicked, with a double-click on any country triggering the reverse transformation. The example highlights the shortest path between these two projection states. The code uses d3.v3, specifically the `d3.geo.orthographic()` and `d3.geo.equirectangular()` projections, along with the `d3.geo.path()` for generating SVG paths. Country boundaries come from a TopoJSON file, and country names are loaded from a TSV file.

77% match

Globe to Map transition

A world map transitions between two geographic projections: an interactive 3D globe and a flat, equirectangular map. Users rotate the globe by dragging, and a single click triggers a smooth 7.5-second animation that interpolates between the orthographic and equirectangular projections, with the map always cut along the antimeridian for an unrolling effect. Double-clicking a country reverses the transition. Built with D3 v3 and TopoJSON, it uses `d3.geo.orthographic()`, `d3.geo.equirectangular()`, `d3.geo.path()`, and `d3.transition()` for tweening the projection, rendering country boundaries from a 110m world dataset in SVG with hover tooltips.

77% match

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.

76% match

Natural Earth

This example demonstrates the Natural Earth projection, a pseudo-cylindrical map projection that balances the appearance of landmasses with minimal shape distortion. It renders a world map from a TopoJSON dataset, displaying country borders and land areas as filled paths, with a graticule overlay and a spherical outline. The visualization uses D3.js v3 with the `d3.geo.naturalEarth` projection, `d3.geo.path`, and `d3.geo.graticule` APIs to draw vector graphics as SVG elements. The code loads world geography data from a gist-hosted JSON file and applies styling for land, boundaries, and graticule strokes.

76% match

Globe to Map transition

A world map continuously rotates as a globe on a canvas, and clicking it triggers a smooth animation that interpolates between the orthographic and equirectangular projections, creating an effect of unrolling the globe into a flat map. The transition is implemented using `d3.transition` and `d3.interpolate` to tween between the two projection functions, while `d3.geo.path` renders the land and border geometries from a TopoJSON world dataset. A second click reverses the animation, reeling the map back into a rotating globe.

75% match

Globe to Map transition

A world map transitions between an orthographic globe and an equirectangular projection. The globe rotates via a D3 drag behavior, and clicking a country triggers a path-by-path transition to the flat map, while double-clicking returns to the globe. The visualization uses D3 v3 with `d3.geo.orthographic`, `d3.geo.equirectangular`, and `d3.geo.path` to render TopoJSON country boundaries as SVG paths, with CSS-based tooltips and hover highlighting.