Skip to main content
SimilarExport ZIP
100%

Mercator projection

✓ Published0🌍 Public
CClevejones
Last edited Nov 12, 2015
Created on Nov 12, 2015

This example displays a map of Scottish postcode districts using the Mercator projection. It loads GeoJSON data from `scotland.json` and renders each feature as an SVG path. The code employs the D3.js v3 library, specifically `d3.geo.mercator()` to define the projection and `d3.geo.path()` to generate the path data. The map is centered at latitude 40 and scaled to fit a 900x900 pixel SVG canvas, with a gray background and white map fill.

AI-generated description

Similar vizzes

Loading thumbnail…

Mercator projection

This example displays a simple Mercator projection map of Scotland, rendered as black outlines on a white SVG canvas. It loads GeoJSON boundary data from an external file and draws each feature as a separate path element. The code uses D3 v3’s `d3.geo.mercator()` to define the projection, `d3.geo.path()` to generate the path data, and `d3.json()` to fetch the geographic data. The map is centered at longitude 0° and latitude 40°, with a scale relative to the 900×900 pixel viewport. No interaction or styling beyond the default fill is included.

CClevejones
92% match
Loading thumbnail…

Mercator projection

A map of Scotland uses a Mercator projection to display the country’s highlands and lowlands, with each region rendered as a blue SVG path. The d3.geo.mercator projection is configured with a custom center and scale, while d3.geo.path generates the geographic shapes from a GeoJSON file. Hovering over a path changes its fill color, and the visualization is accompanied by a brief historical paragraph about the Highlands.

CClevejones
87% 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
78% 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
75% match
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
74% match
Loading thumbnail…

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.

Mmbostock
74% match
Loading thumbnail…

Gist 075cee318faa9088bc16bd9eb985a9a5

This example shows a world map rendered from a TopoJSON file using a Mercator projection, with pan and zoom enabled for interactive exploration. The map is drawn as SVG paths via `d3.geoPath` and a `d3.geoMercator` projection, centered and scaled to display global geography. A `d3.zoom` handler updates the map’s transform and re-projects paths on each interaction. The code includes commented-out attempts to plot city coordinates from a CSV, but the visible implementation focuses solely on the country boundaries from the `world-110m2.json` data source.

AAlexanderDavidson
74% match
Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example shows a world map rendered in grayscale as a single filled path, using a Mercator projection to display geographic boundaries. It loads GeoJSON data of world countries from an external URL and draws them with D3.js version 3.5.5. The code uses `d3.geo.mercator()` to define the projection, `d3.geo.path()` to generate the SVG path data, and appends the result as one `path` element. The map fills the entire viewport, with the projection scaled and translated to center on a 960×500 canvas.

KKristinHenry
74% match