Skip to main content
100%

Simple Mercator Map

✓ Published0🌍 Public
Aadry34160
Last edited Feb 10, 2017
Created on Feb 9, 2017

A world map rendered with a blue fill and black country borders, generated using a D3 Mercator projection. The visualization loads a GeoJSON file of world countries and draws each country as an SVG path element, with the projection scaled and translated to center the map. The example demonstrates a minimal setup for D3 v3 geo mapping, using `d3.geo.mercator()` and `d3.geo.path()` to convert geographic coordinates into SVG paths.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Basic D3 map (Mercator) d3v4

A basic world map rendered with the Mercator projection using D3 v4. The code loads GeoJSON data from an external URL and draws it as a single SVG path via `d3.geoPath`. The projection is configured with `d3.geoMercator`, scaling and translating to fit the 960×500 viewport. The map displays all countries as filled shapes from the world-110m GeoJSON dataset, with no additional styling or interaction.

AAlan McConchie
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
87% match
Loading thumbnail…

Basic D3 map (Mercator) d3v4

This visualization displays a basic world map using the Mercator projection, rendered as a single SVG path. The code loads GeoJSON data from an external URL and projects it with `d3.geoMercator()` and `d3.geoPath()`, scaling the projection to fit a 960 by 500 pixel viewport. The map fills the entire screen, with the SVG element sized to the full window. Built with D3 v4, it demonstrates the minimal setup required to draw geographic features from GeoJSON data using the library’s standard geo-path API.

AAlan McConchie
87% 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
87% match
Loading thumbnail…

Basic D3 map (Mercator)

A single SVG path renders a world map using the Mercator projection, with landmasses drawn from a remote GeoJSON file. The map fills the viewport, centered at the default origin. The code uses D3 v3’s `d3.geo.mercator()` and `d3.geo.path()` to project and draw the geometry, loading the data via `d3.json` from the `world-110m.geojson` source. No interaction or additional styling is applied beyond the full-screen SVG container.

AAlan McConchie
85% 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
Loading thumbnail…

Map

This example displays a world map rendered with SVG paths, using a Mercator projection. It loads geographic data from a GeoJSON file and draws each country as a path element. The code uses D3 v5’s `d3.json`, `d3.geoMercator`, and `d3.geoPath` to project and trace the map, within a fixed 1400×700 viewBox. No interactions or styling are applied beyond the static continent paths, making it a minimal, barebones geographic visualization.

SShweta-tech
84% 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
84% match