Dodecahedral projection

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.

85% match

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.

80% match

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

78% match

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

78% match

Furuti 3

This example demonstrates a polyhedral projection of the Earth onto a cube, using the Furuti 3 projection. It depicts the world's countries as semi-transparent gray polygons, alongside a graticule and shaded faces representing the cube's sides, all rendered as SVG paths. The implementation relies on `d3.geoPolyhedral` to build the projection, `d3.geoPath` to draw the features, and the `versor` library to enable interactive rotation via drag gestures, with country data from a local GeoJSON file.

Spherical alpha shapes with d3-geo-voronoi

This interactive orthographic globe displays the connected boundary around a subset of world capitals, computed as spherical alpha shapes. The visualization merges Delaunay triangles from `d3.geoVoronoi` whose edges fall under a distance threshold, then traces the outer boundary of the merged triangles. The resulting polygon is rendered via `d3.geoPath` using an orthographic projection, overlaid on a graticule and city points. The globe slowly rotates by updating the projection’s rotation within a `d3.interval` loop.

Let's make a face with D3.js!

This example builds a world map from TopoJSON data using D3 v5 and the geoMercator projection, rendering country boundaries as SVG paths via `d3.geoPath`. It loads the world-atlas 110m dataset, extracts country features with TopoJSON’s `feature` method, and appends each path to an SVG. The code demonstrates basic data join and shape generation, creating a static geographic visualization that reveals country outlines on a blank canvas. No interactivity or animation is present, focusing solely on spatial encoding through projection and path construction.

吴吴昊

Furuti 1

A polyhedral globe projection maps the Earth onto a cube's six faces, each rendered as a light blue patch. The map shows country polygons in gray and a graticule, all projected using `d3.geoPolyhedralFuruti1`, a custom projection built with `d3.geoProjection`, `d3.geoGnomonic`, and `d3.geoPolygon`. The example imports the `d3` library, loads `countries.geo.json`, and uses `d3.geoPath` to draw SVG paths.