Skip to main content
100%

Basic D3 map (Mercator) d3v4

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

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.

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>

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/6ab03506d2e3ff9d843f69fa2d5c29cf'>Basic D3 map (Mercator)</a>

forked from <a href='http://bl.ocks.org/almccon/'>almccon</a>'s block: <a href='http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71'>Basic D3 map (Mercator) d3v4</a>

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

Map!

This visualization displays a world map rendered as SVG paths using the Mercator projection. The code fetches GeoJSON data from a remote World Atlas source via `d3.json`, then relies on `d3.geoPath` and `d3.geoMercator` to project coordinates into screen space. The application uses D3 v5 within a React framework, though the current script only loads the data without binding it to visible shapes.

DDavid Kiarie
86% match
Loading thumbnail…

Basic D3 map (Robinson) d3v4

This example displays a world map using the Robinson projection, rendered as a single SVG path. The code loads GeoJSON data from an external URL and projects it with `d3.geoRobinson`, a projection from the `d3-geo-projection` plugin. It uses `d3.geoPath` to convert the projected geometry into SVG path data, with the map centered via `projection.translate`. The visualization is minimal, showing only landmasses without additional styling or interactivity.

AAlan McConchie
86% match
Loading thumbnail…

Basic D3 map (live mods) d3v4

This example shows a world map rendered with a stereographic projection, overlaid with populated places as scaled circles. The map uses D3 v4’s `d3.geoStereographic` projection and `d3.geoPath` to draw country outlines from GeoJSON world data. City points come from a second GeoJSON dataset, with circle radius proportional to `pop_max` and color indicating megacity status (dark green) versus other populated places (salmon). The code loads both datasets via `d3.json` and appends SVG circles with opacity for visual clarity.

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