Skip to main content
SimilarExport ZIP
100%

Spherical Mercator

✓ Published0🌍 Public
Mmbostock
Last edited Oct 21, 2018
Created on Sep 20, 2012

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.

AI-generated description

The Mercator projection is available as d3.geoMercator in d3-geo.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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.

Mmbostock
92% match
Loading thumbnail…

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.

Mmbostock
89% match
Loading thumbnail…

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

Mercator Projection

This example displays a world map using a Mercator projection, with each country rendered as a gray shape outlined in white. The map is built with the D3.js version 3 library, using `d3.geo.mercator()` to define the projection and `d3.geo.path()` to convert GeoJSON geometries into SVG paths. The geographical data comes from a `countries.json` file containing feature collections loaded via `d3.json()`. The resulting visualization, rendered in an SVG element, demonstrates the classic distortion of landmasses toward the poles inherent to this projection method.

PPatrick Wojda
88% match
Loading thumbnail…

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.

Mmbostock
84% match
Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96
84% match
Loading thumbnail…

3.28-2

This example displays a world map rendered as a set of SVG paths using the Mercator projection. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON with the TopoJSON `feature` function. The code applies `d3.geoPath` and `d3.geoMercator` to generate the country outlines, with paths appended to the SVG container. The visualization is minimal, showing only the mapped landmasses without additional styling or interactivity.

Aalbatross97
84% match
Loading thumbnail…

D3 World Map

This example displays a black-and-white world map using the Mercator projection, with country boundaries outlined in white. The map is rendered as an SVG using the D3.js v3 library, specifically employing `d3.geo.mercator()`, `d3.geo.path()`, and `d3.json()` to load and parse a `world-110m2.json` TopoJSON file. Country geometries are extracted from the TopoJSON topology via `topojson.object()` and drawn as SVG `path` elements. The visualization appears on a simple HTML page with a custom CSS rule defining the stroke and fill for each path.

GGT-GillesTeuwen
84% match