Great Arc

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 4, 2013

This example visualizes a great arc between Washington, D.C. and Beijing as a red LineString on an equirectangular projection. The projection is rotated to keep the entire arc visible without interruption. It also renders a graticule, land masses, and country boundaries from a TopoJSON world-50m dataset. The code uses d3.geo.equirectangular, d3.geo.path, d3.geo.graticule, and topojson.feature to draw the SVG elements.

AI-generated description

A simple example drawing a great arc as a LineString. The projection is rotated to avoid interrupting the arc. See also an earlier example with multiple great arcs.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Click and drag to create great arcs

Clicking and dragging on the map generates two sets of expanding great-circle arcs, drawn in lime green and black, while a red line connects the start and end points on an equirectangular projection of the world. The visualization uses d3-geo to draw circular arcs centered on the click points, with the drag path rendered as a great circle, overlaid on topojson land and country outlines.

AAlexDaGr8

74% match

Loading thumbnail…

Two Point Equidistant

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.

Mmbostock

72% match

Loading thumbnail…

fresh block

This example overlays a red geodesic circle around Pyongyang on a world map, using an azimuthal equidistant projection to show the range of a missile strike as a consistent distance on the globe. It also draws a red line between Pyongyang and Washington, D.C., with red points marking both cities. The visualization uses D3 v4 with `d3.geoCircle`, `d3.geoPath`, and `d3.geoAzimuthalEquidistant` to render SVG paths. Country boundaries come from a GeoJSON file loaded via `d3.json`, while the sphere outline and projected features are drawn as SVG path elements.

JJeanLucPinol

72% 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

72% match

Loading thumbnail…

Let's make a map with D3.js!

This example presents a static world map rendered with a light green fill on a dark blue background. It uses the equirectangular projection to display country boundaries as SVG paths, with data from the world-atlas TopoJSON dataset. The code builds the visualization with D3 v5’s `geoPath` and `geoEquirectangular` functions, alongside TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features. Each country is appended as a separate `path` element to the SVG canvas.

AArriannePandaraoan

71% match

Loading thumbnail…

Arc Deduplication

The animation demonstrates arc deduplication during TopoJSON topology construction, replaying each arc of U.S. state boundaries as a stroked line. Red arcs appear first, then blue arcs highlight duplicate paths shared between states. Using d3.json, d3.geo.path, and topojson.mesh, the visualization reconstructs coordinates from quantized delta-encoded arcs and animates SVG path transitions with setInterval. A play button triggers the sequence, which runs until all arcs are traced and faded.

Mmbostock

71% 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

71% 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

70% match