Skip to main content
SimilarExport ZIP
100%

Tetrahedric Gnomonic Projection

✓ Published0🌍 Public
PPhilippe Rivière
Last edited May 3, 2018
Created on Aug 6, 2017

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.

AI-generated description

Fixing the tetrahedric gnomonic requires 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/c36ed66a4d50d77150712c80642a78d5'>Lee’s Tetrahedric Conformal Projection</a>

mit Licensed

Similar vizzes

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

Gnomonic

This example shows the world map projected using the gnomonic projection, where great circles appear as straight lines and distortion increases toward the edges. The map is clipped at a 90-degree angle, displaying landmasses in dark gray with white country boundaries over a graticule grid. The visualization uses D3 v3’s `d3.geo.gnomonic` projection and `d3.geo.path` to render SVG paths from TopoJSON world data, with the graticule drawn via `d3.geo.graticule`. The code sets projection scale, translation, and precision before loading the `world-50m.json` file.

Mmbostock
84% 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
81% match
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
81% match
Loading thumbnail…

This Is a Globe in d3.v4

A continuously rotating orthographic projection of the world map, rendered as a spinning globe on a Canvas. The animation uses `d3.geoOrthographic` with a clip angle to show only the visible hemisphere, while `d3.geoPath` draws the land features from a TopoJSON world dataset. The rotation is driven by `d3.timer`, updating the projection’s rotation angle based on elapsed time. A static circle outlines the globe’s edge, with the map redrawn and cleared each frame.

PPhilippe Rivière
80% 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
80% match