World Map using Mercator Projection

100%

World Map using Mercator Projection

✓ Published0🌍 Public

Last edited Apr 4, 2022

Created on Apr 4, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map with Topojson data

This example displays a world map rendered as SVG paths, with countries in grey and yellow strokes against a red spherical backdrop. It uses the Mercator projection and D3’s `geoPath` to convert geographic coordinates into screen paths, while TopoJSON’s `feature` extracts country boundaries from a remote world.json file. The sphere and countries are appended directly to the SVG via D3’s `select` and data joins, with styling handled through CSS classes.

Ssudhamshu24

90% match

Loading thumbnail…

bhargava-World Map using Mercator Projection

This example displays a world map using the Mercator projection, with country boundaries rendered as white shapes against a blue ocean background. The visualization loads geographic data from a GitHub gist and uses D3 v5’s `geoMercator` and `geoPath` functions to project and draw the countries. TopoJSON’s `feature` method converts the source data into GeoJSON for rendering. The map is centered and scaled within an SVG element, with countries stroked in black for clear separation.

Bbhargavarathod

90% match

Loading thumbnail…

World Map

This example displays a static world map rendered in SVG, with countries filled in green against a light blue ocean background. It uses D3 v4 with a Mercator projection via `d3.geoPath` and `d3.geoMercator` to trace country boundaries. Geographic data comes from the world-atlas TopoJSON file, processed with `topojson.feature`. The map is centered within an SVG canvas using explicit margins, and the overall color scheme includes a light beige page background.

KKishen Patel

90% match

Loading thumbnail…

Untitled

A world map rendered in the Mercator projection displays country boundaries as grey paths with thin white strokes. The example demonstrates loading GeoJSON-derived topology data from a local `world-110m2.json` file and converting it to SVG paths using `d3.geoPath`. The map is centered and rotated with `d3.geoMercator` and `projection.rotate`, and country features are extracted via `topojson.feature` from the TopoJSON library. The page uses D3 v7 to fetch the data asynchronously with `d3.json` and append the resulting paths to an SVG container.

Sspace-captain96

90% match

Loading thumbnail…

World Map

This example displays a world map rendered as SVG paths using D3.js. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features via the `topojson.feature` API. The map uses a `d3.geoMercator` projection and `d3.geoPath` to generate the path data for each country. The code demonstrates basic data binding with `selectAll`, `data`, and `enter` to append country shapes to the SVG canvas.

Llrakla

90% match

Loading thumbnail…

World map

A world map rendered with SVG paths displays countries in green on a blue background, using the Mercator projection. The code loads TopoJSON world-atlas data via `d3.json` and converts it to GeoJSON with `topojson.feature`. D3’s `geoMercator` and `geoPath` generate the country outlines, which are appended as `<path>` elements with a semi-transparent black stroke.

Eevapavlinek

89% 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

89% 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

89% match