Skip to main content
100%

Basic D3 map (Mercator)

✓ Published0🌍 Public
AAlan McConchie
Last edited Nov 4, 2016
Created on Nov 4, 2016

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.

AI-generated description

A basic map in D3 using the Mercator projection.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/c069550b4fc4fb409430829f07bd78f2'>WWSD #6: d3.js projections</a>

mit Licensed

Similar vizzes

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

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

This example displays a world map rendered as a single SVG path using a Mercator projection. The code loads GeoJSON data from a remote URL and passes it through d3.geoPath with a d3.geoMercator projection. The projection is scaled and translated to center the map, while the SVG fills the viewport. It demonstrates the basic workflow of projecting geospatial data with d3.v4.

AAlan McConchie
85% match
Loading thumbnail…

Basic D3 map (Winkel Tripel)

A world map rendered with the Winkel Tripel projection fills the full browser window. The code loads GeoJSON world data from a remote URL and draws it as a single SVG path using D3’s `d3.geo.path` with a `d3.geo.winkel3` projection. The map’s scale and centering are set explicitly, while the SVG resizes to viewport dimensions. D3 v3 and the `d3.geo.projection` plugin provide the projection and rendering, with no interaction or additional styling applied.

AAlan McConchie
85% match
Loading thumbnail…

Simple Mercator Map

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.

Aadry34160
85% match
Loading thumbnail…

Basic Map

This example displays a basic world map rendered as SVG paths. It uses the `d3.geoMercator` projection and `d3.geoPath` to convert geographic coordinates into screen paths. The map draws country boundaries from the world-atlas TopoJSON dataset, which is loaded via `json()`. The code applies the `feature()` method from topojson to extract country geometries, then appends one SVG `path` element per country. The resulting visualization shows a simple, unadorned map without interactive features or styling.

CChristopher Morrissey
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
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