Two Point Equidistant

100%

Two Point Equidistant

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jan 13, 2013

This example demonstrates the two-point equidistant projection, showing great circles centered on Honolulu and Washington, D.C. as red and blue circles. The map includes world landmasses with the projection applied. The code uses `d3.geo.twoPointEquidistant()` with specified points, `d3.geo.circle()` for generating circles, and `d3.geo.path()` for rendering. It renders to SVG using D3.v3 and topojson, loading world data from a JSON file. The projection is noted as a work in progress with visual artifacts requiring elliptical clipping.

AI-generated description

This example demonstrates the unique property of the two-point equidistant projection: great circles centered around either of the two reference points (here Honolulu and Washington, D.C.) are projected as circles.

The projection implementation is still a work in progress, hence the visual artifacts; it requires elliptical clipping.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Two Point Equidistant

This example visualizes the Two Point Equidistant projection, which preserves accurate distances from two specified points—here, Honolulu and Washington, D.C. The map displays graticules and landmasses over a stylized background, with a warning that artifacts appear beyond 145° due to incomplete elliptical clipping. It uses `d3.geo.twoPointEquidistant()` with custom scale, translation, and `clipAngle`, along with `d3.geo.path` and `d3.geo.graticule`. Land data comes from a TopoJSON world file, rendered as SVG with styled foreground, graticule, and land paths.

Mmbostock

92% match

Loading thumbnail…

Azimuthal Equidistant

This example demonstrates the azimuthal equidistant projection, a map projection that preserves accurate distances from a central point. The map is centered on San Francisco, with the world rendered using outlines and filled landmasses. The visualization uses D3’s `d3.geoAzimuthalEquidistant` projection and `d3.geoPath` to draw the sphere, graticule, and geographic features. Land and boundary data come from a world-atlas TopoJSON file, processed using the `topojson-client` library. The SVG output includes a graticule, a stroked sphere outline, and a white-filled sphere background.

Mmbostock

76% match

Loading thumbnail…

geoCircle in d3.v4 (geoOrthographic)

This example visualizes concentric circles radiating from two geographic points—the North Pole and Washington, DC—using a d3.geoOrthographic projection. The circles, generated with d3.geoCircle, are drawn as SVG paths via d3.geoPath, with radii incrementing from 5 to 85 degrees. The map includes land masses rendered from TopoJSON world data, styled with fills and strokes. The code loads d3.v4 and topojson.v1 from CDNs, and the interaction between the circle generator and projection demonstrates how to create geodesic rings on a globe-like view.

PPhilippe Rivière

75% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to map geospatial data using d3.js projections. It renders a world map with a custom cylindrical projection and highlights two points with red circles, including one at San Francisco’s coordinates. The code uses `d3.geo.projection`, `d3.geo.path`, and `d3.geo.mercator`, along with TopoJSON to load world-110m GeoJSON data. The map and points are drawn as SVG elements, with the projection scale and translation set explicitly.

KKristinHenry

75% match

Loading thumbnail…

geoCircle in d3.v4

This example visualizes concentric geo-circles radiating from two fixed points on a world map: the North Pole and Washington, D.C. It uses `d3.geoCircle()` to generate spherical circles at increasing radii, with `d3.geoPath()` and an equirectangular projection to render them as SVG paths. The code draws the circles in red and blue before overlaying landmasses from TopoJSON. It demonstrates how d3.v4’s geographic circle generator computes geodesic rings, with radii ranging from 5 to 85 degrees. The map is rendered at 960×500 pixels using D3’s `d3.geoEquirectangular` projection.

PPhilippe Rivière

75% match

Loading thumbnail…

Equidistant Conic Projection

This example shows a world map drawn with the equidistant conic projection, including a graticule, landmasses, and country boundaries. The map is rendered as SVG using D3’s `d3.geo.conicEquidistant` projection and `d3.geo.path` to generate the paths. A sphere outline and graticule are drawn first, then geographic data from a TopoJSON file (`world-50m.json`) is loaded with `topojson.feature` and `topojson.mesh` to display land and political borders.

Mmbostock

73% match

Loading thumbnail…

Cylindrical Equal-Area

This example shows a world map rendered using the cylindrical equal-area projection, with dark landmasses and light country boundaries overlaid on a graticule. The projection’s shape is modified by selecting different standard parallels, such as Gall–Peters or Hobo–Dyer, highlighting how the choice affects the map’s proportions. The visualization uses `d3.geoCylindricalEqualArea` and `d3.geoPath` from the `d3-geo-projection` library to draw the paths, while geodata is loaded as TopoJSON from a GitHub-hosted file. The SVG output is styled with CSS classes for the graticule, land, and boundaries.

Mmbostock

72% match

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how latitude and longitude coordinates from a world GeoJSON file are projected onto an SVG canvas using a custom cylindrical map projection, with red circles marking London and San Francisco. Built with D3.js version 3.5.5, the code uses `d3.geo.projection` to define the cylindrical transformation and `d3.geo.path` to render the world map from the 110m-resolution GeoJSON data. The `projection([0,52])` and `projection([-122.4194,37.7749])` calls place the two cities, while the commented-out alternative projections (Mercator and azimuthal equidistant) show the flexibility of the approach.

KKristinHenry

72% match