Goode Homolosine

Interrupted Goode Homolosine

This example demonstrates the Interrupted Goode Homolosine projection, a composite map projection that divides the world into lobes to minimize distortion. The visualization renders land masses in dark gray, country boundaries in white, and a graticule over a sphere outline, all clipped to the projection’s shape. It uses the `d3.geo.interrupt` and `d3.geo.homolosine` functions from the `d3.geo.projection` plugin, along with `d3.geo.graticule`, `d3.geo.path`, and TopoJSON data from the `world-50m.json` source.

86% match

Mollweide Hemispheres

This example displays a world map using the Mollweide projection, interrupted into two hemispheres—northern and southern—which are rotated twenty degrees and centered on a 960-by-500 SVG canvas. The map shows landmasses as dark shapes with white country boundaries, overlaid on a graticule, all clipped to a circular sphere. It uses the `d3.geo.interrupt` and `d3.geo.mollweide.raw` projections with `d3.geo.path`, and renders geographic data from a World 50m TopoJSON dataset, drawing both land polygons and a mesh of country boundaries.

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.

80% match

Loximuthal

This example displays a world map using the Loximuthal projection, a pseudocylindrical equal-area projection. The map shows landmasses in black with white country boundaries overlaid on a graticule, all enclosed within a circular sphere outline. The visualization uses d3.geo.loximuthal from the extended geographic projections plugin, along with d3.geo.path and d3.geo.graticule to render the vector data. TopoJSON provides the world-50m geographic data, which is converted to GeoJSON features and meshes for the land and boundary layers.

80% match

Mollweide

This example shows a world map projected using the Mollweide projection, with graticule lines, land masses in dark fill, and country boundaries in white. The map is rendered as SVG using D3 v3 with the `d3.geo.mollweide` projection, `d3.geo.path`, and `d3.geo.graticule`. Land and boundary data come from a TopoJSON file of world countries, processed with `topojson.feature` and `topojson.mesh`. The code defines sphere, stroke, fill, graticule, land, and boundary CSS classes to style the visual layers.

Guyou

This example displays a world map using the Guyou hemisphere-in-a-square projection, which maps the globe onto a square. The visualization renders landmasses in dark gray with white country boundaries and shows a graticule of latitude and longitude lines. It employs the `d3.geoGuyou` projection from d3-geo-projection and uses `d3.geoPath` to draw the map features. The data is loaded from a world topojson file and processed through the `topojson` API, with the map drawn as SVG paths.

Aitoff

This example displays a world map using the Aitoff projection, a compromise projection that represents the entire globe in an ellipse. The map shows landmasses in dark gray and country boundaries as white lines over a graticule of latitude and longitude lines. Built with D3 v3 and the `d3.geo.aitoff` projection from the geo.projection plugin, it uses `d3.geo.path` to render the sphere, graticule, and land features. The world data is loaded as TopoJSON from a remote gist and processed with `topojson.feature` and `topojson.mesh`.

Equidistant Conic Projection

This example shows a world map drawn with the equidistant conic projection, including a graticule, landmasses, and country boundaries. The map is rendered as SVG using D3’s `d3.geo.conicEquidistant` projection and `d3.geo.path` to generate the paths. A sphere outline and graticule are drawn first, then geographic data from a TopoJSON file (`world-50m.json`) is loaded with `topojson.feature` and `topojson.mesh` to display land and political borders.