Skip to main content
SimilarExport ZIP
100%

Mercator projection

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

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.

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

Mercator projection

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.

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
79% 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…

Satellite Projection Hebrides

A satellite projection of the Hebrides islands displays land, rivers, and lakes in muted greens and blues, rotating slowly to simulate an orbital view. The map redraws its geographic features as the mouse moves, adjusting latitude and longitude to follow the cursor. Built with D3.js and the d3-geo-projection library, it uses `d3.geoSatellite`, `d3.geoPath`, and TopoJSON data for vectors. The visualization updates paths dynamically, rendering SVG shapes with animation when idle.

PPhilippe Rivière
75% 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
75% match
Loading thumbnail…

// source http://jsbin.com/bobulik

This example displays a static Albers equal-area conic projection map of the United Kingdom, with its constituent subunits (England, Scotland, Wales, and Northern Ireland) filled in distinct colors. It renders the geographic boundaries and labels place names from the TopoJSON dataset. Using the d3.geoAlbers projection and d3.geoPath, the SVG paths are generated from the topojson feature collection. The code loads the UK map data via d3.json and applies CSS to hide Ireland.

MMTClass
74% match
Loading thumbnail…

Country/States Map Example

This example displays a choropleth map of geographic regions rendered as SVG paths, with each region colored uniformly. The visualization uses D3’s `d3.geoMercator()` projection and `d3.geoPath()` generator to transform GeoJSON features from a local `country.json` file into scalable vector graphics. The code loads D3 v6 via a CDN and demonstrates both D3 API imports and local ES6 module integration, though the primary map drawing relies solely on the built-in path generator to convert coordinate data into visible shapes.

Aakshayvenishetty1437
74% match