Skip to main content
SimilarExport ZIP
100%

Lee’s Tetrahedral Conformal Projection

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Mar 22, 2018
Created on Feb 24, 2018

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.

AI-generated description

This version uses d3-geo-polygon.

Unfortunately we don't have an inverse projection [yet], so d3-inertia works from an orthographic projection.

Forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/c36ed66a4d50d77150712c80642a78d5'>Lee’s Tetrahedral Conformal Projection</a>

<!-- 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>

forked from <a href='http://bl.ocks.org/Fil/'>Fil</a>'s block: <a href='http://bl.ocks.org/Fil/c36ed66a4d50d77150712c80642a78d5'>Lee’s Tetrahedral Conformal Projection</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Lee’s Tetrahedral Conformal Projection

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.

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
91% 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
86% 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
77% 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
75% match
Loading thumbnail…

Polyconic

This visualization demonstrates the Polyconic map projection, a compromise projection that preserves distances along the central meridian and each parallel. It displays the world’s landmasses as solid black shapes with white country boundaries, overlaid on a graticule grid and an outlined sphere. The example uses the D3 v3 library with the `d3.geo.polyconic` projection plugin, `d3.geo.path` for rendering, and `topojson.v1` to process world-50m.json geographic data, drawing everything as SVG paths.

Mmbostock
75% match
Loading thumbnail…

Rectangular Polyconic

This example demonstrates the rectangular polyconic map projection, a pseudoconical projection that renders the world with curved meridians and straight parallels. The map shows landmasses in dark gray with country boundaries in white, overlaid on a graticule grid and enclosed by a spherical outline. Built with D3.js v3, it uses `d3.geo.rectangularPolyconic` from the extended projections plugin, `d3.geo.path` for geographic rendering, and `d3.geo.graticule` to generate the grid. World geometry comes from a TopoJSON file loaded via `topojson.feature` and `topojson.mesh`.

Mmbostock
74% 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
74% match