Cox Projection

100%

Cox Projection - Wallpaper

✓ Published0🌍 Public

Last edited May 3, 2018

Created on Jun 8, 2017

This example presents the Cox projection, a conformal map of the world that fits within an equilateral triangle, with Antarctica omitted for a cleaner visual. The code computes the underlying elliptic-function transformation in JavaScript, using a `Complex` class to handle the math. It renders six rotated copies of this triangular map into a single Canvas, creating a wallpaper-like tiling effect. The implementation relies on `d3.geoProjection` with a custom `coxRaw` function, and draws geographic data from the `world-atlas` TopoJSON dataset using `d3.geoPath` with Canvas context.

AI-generated description

Conformal projection of the Sphere within an equilateral triangle.

Wallpaper version, ignoring Antarctica

Original research by Philippe Rivière for d3-geo-projection, issue #118.

(See also the North polar aspect.)

Reference papers:

J. F. Cox, Représentation de la surface entière de la terre dans un triangle équilatéral. Bulletin de la Classe des Sciences, Académie Royale de Belgique, 5, 21: 66-71. Bruxelles, 1935.
J. Magis, Calcul du canevas de la représentation conforme de la sphère entière dans un triangle équilatéral. Bulletin Geodésique, 247-256. Paris, 1938.
L.P. Lee, Conformal Projections Based On Dixon Elliptic Functions, Cartographica: The International Journal for Geographic Information and Geovisualization > Vol. 13, # 1, June 1976.
M. Douglas McIlroy, Wallpaper maps, 2011.

[<img src="https://avatars1.githubusercontent.com/u/7001?s=20" />](https://github.com/Fil/) <em>Questions and comments welcome on [gitter.im/d3](https://gitter.im/d3/d3), [twitter](https://twitter.com/@recifs) or [slack](https://d3js.slack.com).</em> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-58621-8', 'auto'); ga('send', 'pageview'); </script>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/1aafd8fa22b62243290674384c364dd0'>Cox Projection</a>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/8277a0a590dec3debf142bcd1e827416'>Cox Projection - no ATA</a>

mit Licensed

Similar vizzes

Loading thumbnail…

This example demonstrates a conformal projection of the entire Earth onto an equilateral triangle, based on the Cox projection. The visualization uses a custom `coxRaw` projection with D3's `geoProjection` and `geoPath` to render world map data from a TopoJSON source onto a Canvas. The projection can be interactively rotated by dragging, with rotation handled via the `versor` library. The implementation relies on complex number calculations and the `geoInverseNewton` function to compute the inverse projection.

PPhilippe Rivière

89% match

Loading thumbnail…

Cox Projection - no ATA

This visualization demonstrates the Cox projection, a conformal map of the entire sphere onto an equilateral triangle, with Antarctica excluded from the land data. The map renders world country boundaries and a graticule onto a canvas using `d3.geoPath` and the `d3-geo-projection` library, with a custom projection function that relies on complex-number calculations via `complex.js` to approximate the elliptic integrals. The code loads world-atlas TopoJSON data, merges selected country geometries, and dynamically fits the projection’s extent to the visible landmasses.

PPhilippe Rivière

88% match

Loading thumbnail…

Cox Projection (North polar aspect)

This example demonstrates the Cox conformal projection of the entire Earth within an equilateral triangle, using the North polar aspect. The projection preserves angles and maps the sphere to the triangle’s interior, with the outline drawn as a polygon. The code uses `d3.geoProjection` with a custom `coxRawN` function, which relies on `sm_1` to invert the Dixon elliptic function and `d3.geoGraticule` for the graticule. It renders world map data from the `world-atlas` package onto a Canvas, employing `d3.geoPath` and `topojson.merge` for country boundaries.

PPhilippe Rivière

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

72% match

Loading thumbnail…

Tobler’s Hyperelliptical projection

This example demonstrates Tobler’s Hyperelliptical projection, a family of pseudocylindrical equal-area map projections with adjustable parameters alpha, gamma, and k. The default configuration renders a world map with a compact, oval-shaped graticule that balances area distortion across the globe. Using d3-geo-projection’s `geoHyperelliptical` projection, the map is drawn as SVG paths via `d3.geoPath`, with land polygons from world-atlas TopoJSON data. Interactive rotation and responsive resizing are enabled through d3-inertia and `fitExtent`.

PPhilippe Rivière

69% match

Loading thumbnail…

Tetrahedral Gnomonic projection Antarctic

This example visualizes the world map using the Tetrahedral Gnomonic projection, an Antarctic-centered aspect of Potter’s 1925 map projection. The globe is split across four triangular faces, each rendered with a gnomonic projection via `d3.geoPolyhedral` and `d3.geoGnomonic`. Landmasses are drawn on a Canvas with `d3.geoPath`, overlaid with graticules, and the map is interactive, allowing rotation through drag gestures using the `versor` library. Map data comes from TopoJSON world-atlas countries.

PPhilippe Rivière

68% match

Loading thumbnail…

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

Mmbostock

68% match

Loading thumbnail…

Lee’s Tetrahedral Conformal Projection

This example visualizes the world using Lee’s Tetrahedral Conformal Projection, a map projection that maps the globe onto the faces of a tetrahedron. The view is rendered on a Canvas and combines an orthographic projection with a polyhedral face projection for interactive inertia. The code employs `d3.geoPolyhedral`, `d3.geoProjection`, and `d3.geoStream` from D3 libraries, along with `d3-inertia` and `versor` for rotation, and `d3-geo-polygon` for polyhedral geometry. Data is drawn from TopoJSON, with the projection formula implemented via complex numbers.

PPhilippe Rivière

68% match