Bonne

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

Spherical Mercator

The example shows the spherical Mercator projection applied to a world map, displayed within a circular outline that represents the globe. The map renders landmasses in dark gray with white country boundaries, overlaying a graticule grid of meridians and parallels. Built with d3.geoMercator and d3.geoPath, it draws the sphere outline, graticule, and world geography via SVG paths. Geographic data comes from the world-atlas TopoJSON dataset, processed with topojson-client to extract land and country meshes.

76% match

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.

76% match

Bottomley

This example displays a world map using the Bottomley projection, a pseudocylindrical equal-area projection with curved parallels. Landmasses are filled in dark gray with white country boundaries, overlaid on a graticule and a black sphere outline. The code uses `d3.geo.bottomley()` from the d3.geo.projection plugin, rendered as SVG via `d3.geo.path()`. World data comes from a TopoJSON file, with countries meshed via `topojson.mesh` and land converted through `topojson.feature`.

75% match

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

Goode Homolosine

This example displays a world map using the Goode homolosine projection, a pseudocylindrical projection that combines the sinusoidal and Mollweide projections. The map shows land masses in dark gray with country boundaries in white, set against a graticule and a white sphere backdrop. The visualization uses D3 v3 with the `d3.geo.homolosine` projection API to render the map as SVG paths, pulling land and country data from a TopoJSON file via `topojson.feature` and `topojson.mesh`.

World Map using Mercator Projection

This example displays a world map using the Mercator projection, rendered as SVG paths with countries filled in white on a blue ocean background. It loads GeoJSON country boundaries from a gist and uses `d3.geoMercator` for projection, `d3.geoPath` to generate the paths, and `topojson.feature` to convert TopoJSON data. A sphere outline is drawn first, and country paths are appended dynamically from the fetched dataset.

Bbhargavarathod

Let's make a map with D3.js

This example demonstrates how to create a world map using D3.js version 5 and TopoJSON. It uses `d3.geoBonne` as the map projection and `d3.geoPath` to generate SVG paths for country boundaries. The map loads geographic data from the World Atlas TopoJSON file (110m resolution) and renders each country as a pink SVG path with black outlines. A sphere outline is drawn around the map using a simple GeoJSON Sphere object, while CSS styles control the fill and stroke appearance.

YYanan Xin