Skip to main content
SimilarExport ZIP
100%

Selectable Projection Demo

✓ Published0🌍 Public
RRichMorin
Last edited Mar 9, 2012
Created on Mar 9, 2012

This demo shows how map projections transform a sphere onto a 2D surface by displaying a grid of points—one every 10 degrees of latitude and longitude—mapped between an Albers equal-area projection and an orthographic azimuthal projection. Moving the mouse changes the orthographic projection’s origin, redrawing the corresponding circles and the connecting lines that link each point from the Albers to the orthographic view. Built with D3 v2, it uses `d3.geo.albers`, `d3.geo.azimuthal`, and `d3.geo.path` to render the projections, updating SVG circle and path elements on `mousemove`.

AI-generated description

Similar vizzes

Loading thumbnail…

Selectable Projection Demo

The demo displays a global grid of points every 10 degrees of latitude and longitude, simultaneously projected through two map projections and connected by curved lines. A static Albers projection is paired with an interactive orthographic projection, whose origin shifts as the mouse moves over the SVG. A dropdown menu changes the static projection to Mercator or stereographic, triggering a smooth transition of point positions and connection paths. The visualization uses D3 v2 methods such as `d3.geo.albers`, `d3.geo.azimuthal`, `transition().duration`, and jQuery event binding for the select control.

RRichMorin
93% match
Loading thumbnail…

d3v5 - Selective Projection Map

This example visualizes a world map with a dropdown menu to switch between over 40 different geospatial projections, including Miller, Mercator, and Robinson. The map is rendered as SVG using d3.geoPath, while the projection options are defined with d3-geo-projection methods like d3.geoMercator and d3.geoMiller. World coastlines come from a GeoJSON file, and a graticule and sphere outline are added to each view.

HHirosaji
76% match
Loading thumbnail…

Poor man's Composite projection

Four map projections—Lagrange, azimuthal equal-area, orthographic, and azimuthal equidistant—are arranged in a 2x2 grid to form a single composite projection. The d3.geoPath renderer draws world landmasses from TopoJSON, a graticule, and the sphere outline, with each projection clipped to its quadrant. A custom `projection.invert` method tests each quadrant to locate mouse positions, and the red inverted point follows the cursor. Continuous rotation of all four projections via d3.timer produces an animated display.

PPhilippe Rivière
73% match
Loading thumbnail…

Projection Transitions

This example demonstrates seamless transitions between dozens of geographic map projections, cycling automatically through options like Aitoff, Mercator, and Robinson. A dropdown menu also lets users manually select any projection. The visualization uses d3.geo.path with the geo.projection plugin to render world landmasses from TopoJSON data, along with graticules and sphere outlines. The code interpolates between projections using d3's transition system, updating the path generator's projection on a timer to animate the morphing effect smoothly in SVG.

MMicrobie
73% match
Loading thumbnail…

D3 map drag demo

This demo displays an interactive orthographic globe where users can click and drag to rotate the Earth, with country boundaries rendered as SVG paths and tooltips revealing country names on hover. The sphere, graticule, and countries are drawn using d3.geoPath with a d3.geoOrthographic projection, while rotation is handled manually through d3.drag events that adjust the projection’s rotate values. Country geometries come from the world-atlas TopoJSON dataset (50m resolution) paired with a TSV file for name lookups, and the visualization also supports d3.zoom for additional transformations.

GGlebenator
73% match
Loading thumbnail…

Albers with Resampling

This example shows a world map in an Albers equal-area conic projection, with landmasses drawn in dark gray, country boundaries in white, and a graticule overlaid on a sphere outline. It uses d3.geo.conicEqualArea with a precision setting for resampled geometries, and d3.geo.path to render the projected features. Graticule lines are generated via d3.geo.graticule, while the land and boundary data come from a TopoJSON file fetched with d3.json, processed through topojson.feature and topojson.mesh. The SVG output uses class-based styling for strokes and fills.

Mmbostock
72% match
Loading thumbnail…

Projection Transitions

Projection Transitions showcases a rotating sequence of over 40 map projections, including Aitoff, Mercator, and Winkel Tripel. The visualization draws world land boundaries from TopoJSON and overlays a geographic graticule, rendering each projection with d3.geo.path. A dropdown menu allows manual selection, while an automatic timer cycles through projections every 1.5 seconds. The code uses the d3.geo.projection plugin and applies SVG animations to transition smoothly between geographic coordinate systems.

MMicrobie
72% match
Loading thumbnail…

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.

Mmbostock
72% match