Loximuthal projection & rhumb line

100%

Loximuthal projection & rhumb line

✓ Published0🌍 Public

Last edited Feb 23, 2018

Created on Feb 22, 2018

This interactive map uses the loximuthal projection, where rhumb lines (shown in green) appear as straight lines, with the reference parallel adjustable via mouse movement. It demonstrates a custom implementation of the projection using D3 v4 and the d3-geo-projection plugin, rendering land masses from TopoJSON world-atlas data and a graticule via d3.geoPath. The rhumb line is computed from a parametric formula and drawn as an SVG path, while projection.parallel() updates dynamically on mousemove or click events. The visualization also supports window resizing through projection.fitExtent.

AI-generated description

The loximuthal projection is available as d3.geoLoximuthal in the extended geographic projections plugin.

Projection introduced by Karl Siemon in 1935, it was published and forgotten -- then independently recreated by Waldo R. Tobler in 1966, who named it. Implemented in d3-geo-projection by @JasonDavies.

With the loximuthal projection, rhumb lines (aka loxodromes, in green) are straight lines. Formula adapted from http://www.mathpages.com/home/kmath502/kmath502.htm

Mouse over the map to change the reference parallel.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3867220'>Loximuthal</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Loximuthal

This example displays a world map using the Loximuthal projection, a pseudocylindrical equal-area projection. The map shows landmasses in black with white country boundaries overlaid on a graticule, all enclosed within a circular sphere outline. The visualization uses d3.geo.loximuthal from the extended geographic projections plugin, along with d3.geo.path and d3.geo.graticule to render the vector data. TopoJSON provides the world-50m geographic data, which is converted to GeoJSON features and meshes for the land and boundary layers.

Mmbostock

85% match

Loading thumbnail…

Littrow

The example displays a world map using the Littrow projection, with landmasses in dark gray and country boundaries in white, clipped to a spherical outline. It also overlays a graticule to show latitude and longitude lines. The visualization uses D3 v3 with the `d3.geo.littrow` projection plugin, `d3.geo.path`, and `d3.geo.graticule` to render geographic data from a TopoJSON file containing world land and country boundaries, all drawn as SVG elements.

Mmbostock

77% match

Loading thumbnail…

Interactive Orthographic

This interactive orthographic map displays a world landmass that the viewer can rotate by moving the mouse. As the cursor moves, the projection’s center re-orients to the new longitude and latitude, redrawing the SVG paths in real time. Built with D3 v3, it uses `d3.geo.orthographic`, `d3.geo.path`, and a linear scale to map pixel coordinates to degrees. The geographic data comes from a TopoJSON file (`world-110m.json`) loaded via `d3.json`, with features extracted using `topojson.feature`.

Mmbostock

77% match

Loading thumbnail…

Larrivée

This example displays a world map using the Larrivée projection, a pseudocylindrical equal-area projection that resembles a flattened globe with curved meridians. Landmasses appear as dark shapes with white country boundaries, set against a graticule and a spherical outline. The map is rendered with SVG via D3’s `d3.geo.path` and the `d3.geo.larrivee` projection from the geo.projection plugin, while TopoJSON data (`world-50m.json`) supplies the land and country meshes. The visualization includes a graticule layer and a white-filled sphere background.

Mmbostock

77% match

Loading thumbnail…

Bottomley projection

This example demonstrates the Bottomley projection, a pseudocylindrical map projection that preserves shapes along the central meridian, with a configurable variant parameter. The code loads world land and country boundary data from a TopoJSON file and renders it via SVG paths created with `d3.geoPath` and the custom `d3.geoBottomley` projection. A graticule and sphere outline are also drawn, and the projection’s variant can be adjusted through the `projection.variant` method, highlighting the projection’s flexibility.

PPhilippe Rivière

76% match

Loading thumbnail…

Interactive Gnomonic

An interactive map renders the world in a gnomonic projection, a perspective view where great circles appear as straight lines. Moving the mouse over the SVG scene reorients the projection’s center by rotating it based on the cursor’s position, updating the displayed landmasses. The visualization uses d3.geo.gnomonic and d3.geo.path to draw the topojson world-110m data, with d3.scale.linear mapping pixel coordinates to longitude and latitude for rotation.

Mmbostock

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

76% match

Loading thumbnail…

Tetrahedric Gnomonic Projection

This example visualizes the world using a tetrahedric gnomonic projection, a polyhedral map projection that unfolds the globe onto four triangular faces. The map renders landmasses and graticules on a Canvas via `d3.geoPath`, with the projection implemented through a custom `d3.geoTetrahedralLee` function that uses `d3.geoPolyhedral` and per-face gnomonic projections. The code includes a dashed inner triangle and outlined sphere boundary, and loads world data from the World Atlas TopoJSON dataset. It also spins the projection interactively using D3's rotation APIs and renders at devicePixelRatio for sharp output.

PPhilippe Rivière

75% match