Tobler World-in-a-Square

Tobler–Mercator

This example demonstrates the Tobler–Mercator projection, a modified Mercator projection that preserves area. The world map is rendered with graticule lines, country boundaries, and a white sphere outline. Built with D3 v4, it combines `d3.geoProjection` with a custom projection function and `d3.geoPath` for geographic rendering. The map uses TopoJSON data from the world-atlas package, with land and country boundary geometries loaded via `d3.json` and processed using `topojson.feature` and `topojson.mesh`. The visualization is fully SVG-based.

85% match

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

79% match

Transverse Mercator

This example demonstrates the transverse Mercator map projection, displaying world landmasses and country boundaries within a graticule grid. The map is rendered as SVG using the D3.js library, specifically employing the `d3.geoTransverseMercator` projection and `d3.geoPath` for drawing geometries. World data comes from the `world-atlas` package, processed with `topojson-client` to extract land and boundary features. The visualization includes a spherical outline, a graticule, and styled land and boundary paths, all centered within a 960x960 canvas.

76% 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.

76% match

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

Flat-Polar Quartic

This example displays a world map projected using the flat-polar quartic projection, which flattens the poles into curved, diamond-like shapes. The map shows landmasses in dark gray with country boundaries in white, overlaid on a graticule grid and enclosed by a circular sphere outline. It uses D3 v3 with the `d3.geo.mtFlatPolarQuartic` projection, `d3.geo.path` for rendering SVG paths, and TopoJSON to load world-50m geographic data. A graticule layer is generated via `d3.geo.graticule`, and the sphere outline is reused as both stroke and fill.

August Projection

This example displays a world map using the August projection, a pseudocylindrical equal-area projection that curves parallels and meridians into distinctive intertwined shapes. The map renders land masses in dark gray with white country boundaries overlaid on a graticule, all enclosed within a spherical outline. Using D3 v3, the code employs `d3.geo.august` for the projection, `d3.geo.path` to draw geographic features, and `d3.geo.graticule` for the grid. TopoJSON data provides the world land and country boundaries, loaded from an external JSON file.

Ginzburg VIII

This example displays a world map using the Ginzburg VIII projection, a pseudocylindrical map projection that curves meridians to create a distinctive, globe-like appearance. The map shows landmasses in dark gray with white country boundaries, overlaid on a graticule grid and enclosed by a circular sphere outline. Built with D3 v3, it uses `d3.geo.ginzburg8`, `d3.geo.path`, and `d3.geo.graticule` to render the projection, graticule, and sphere. Geographic data comes from a TopoJSON file of world land and country boundaries, loaded via `topojson.feature` and `topojson.mesh`.