Skip to main content
SimilarExport ZIP
100%

Lee’s Tetrahedral Conformal Projection

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Aug 27, 2017
Created on Jul 25, 2017

This visualization demonstrates Lee’s tetrahedral conformal projection, which maps the globe onto a four-faced polyhedron. Using a custom implementation of `leeRaw`, the code projects geographic coordinates onto a tetrahedron and renders the resulting map using Canvas. It relies on modified versions of `d3-geo` and `d3-geo-projection` to handle polygon clipping, alongside `complex.js` for complex-number calculations. The map is drawn directly to a `<canvas>` element, with data processed from spherical coordinates.

AI-generated description

The goal was to reproduce this map LeeTetrahedral @ progonos with d3, see d3-geo-projection issue #107.

Reference paper Laurence Patrick Lee, Cartographica: The International Journal for Geographic Information and Geovisualization > Vol. 13, # 1, June 1976 (100+ pages!)

Uses specially modified versions of d3-geo and d3-geo-projection to handle clipPolygon().

<!-- signature --> [<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/5ad65a8075e634ab7e4de8ace95fb3c5'>Lee’s Tetrahedric Conformal Projection (work in progress)</a>

mit Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Lee’s Tetrahedral Conformal Projection, South

This example demonstrates Lee’s tetrahedral conformal projection on the southern hemisphere, rendered on a canvas using a custom D3 geospatial projection. The code defines the projection mathematically with complex numbers via `Complex.js`, and applies it to a polyhedral mapping of the globe using `d3.geoPolyhedral` and `d3.geoPath`. It draws graticules and landmasses from TopoJSON data, with the canvas scaled for retina displays. The visualization highlights the conformal property by distributing distortion across the tetrahedron’s faces.

PPhilippe Rivière
92% 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
81% match
Loading thumbnail…

Dodecahedral projection

This example displays a dodecahedral projection of the world map, unfolding the globe onto the faces of a dodecahedron using a myriahedral projection. The map, sourced from the VisionsCarto world atlas, is rendered as SVG with country boundaries and a graticule. The code computes the Voronoi faces on the sphere using `d3.geoVoronoi`, builds a spanning tree of the faces with Kruskal’s algorithm, and projects each face using a gnomonic projection via `d3.geoGnomonic`. The polyhedral arrangement and clipping are handled by `d3.geoPolyhedral` and `d3.geoPath`.

PPhilippe Rivière
72% 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
71% match
Loading thumbnail…

A conformal Airocean

This example shows a conformal projection of the Airocean, a map of the world’s oceans as a single continuous water body, rendered as an SVG using D3.js v6. It displays landmasses as dark shapes on a blank background, with the projection carefully clipped and rotated to highlight the ocean-centric view. The code defines a custom forward projection function that adjusts coordinates to stitch together multiple copies of a base tetrahedral Lee projection, then uses `d3.geoProjection` with `d3.geoClipPolygon` to clip the sphere and `d3.geoPath` to draw the land. Land data comes from a GeoJSON file served via unpkg, and the final fit is applied with `fitExtent` to fill a 960×500 viewport.

PPhilippe Rivière
71% match
Loading thumbnail…

projection debugging

This example visually compares two map projections of the same world dataset by layering them in red and blue on a canvas. Using D3’s `geoTransform` and `geoProjection`, a standard equirectangular projection (blue) is juxtaposed with a custom sheared transform (red) that skews longitude by latitude. The code loads world country boundaries from a local JSON file and renders both outlines overlaid, making differences in shape, rotation, and distortion immediately visible. The canvas drawing highlights how tiny variations in projection logic can produce significant spatial divergence, offering a quick, intuitive way to debug or inspect map projections.

PPhilippe Rivière
70% match
Loading thumbnail…

Peirce Quincuncial

This example shows the Peirce quincuncial projection, a conformal map that projects the globe onto a square using a complex algorithm. The visualization displays world landmasses in dark gray with white country boundaries, overlaid on a graticule of meridians and parallels, all within a 960-pixel SVG. The code uses `d3.geoPierceQuincuncial()` from the d3-geo-projection library to define the projection, and `d3.geoPath()` to render the projected geometry. It loads world data from a TopoJSON file, specifically via `topojson.feature` for land and `topojson.mesh` for country boundaries. The sphere is outlined in black, and the rendering is handled with SVG paths.

Mmbostock
70% match