World Map Centered v5

100%

World Map Centered v5

✓ Published0🌍 Public

Last edited Dec 2, 2019

Created on Dec 2, 2019

This example displays a world map centered on the Pacific Ocean using a Mercator projection. It renders country boundaries as grey SVG paths with white strokes via `d3.geoPath`, projecting geographic data from a TopoJSON file. The map is rotated with `rotate([-180,0])` to shift focus away from the Atlantic, while `d3.json` loads the topology and `topojson.feature` extracts country geometries for display.

AI-generated description

This is a simple map example centered on the Pacific.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 5 of d3.js.

mit Licensed

Similar vizzes

Loading thumbnail…

World Map Centered v6

A world map centered on the Pacific Ocean is rendered as grey SVG paths with white borders, using a Mercator projection configured with `d3.geoMercator`, a `center` of [0, 5], and a `rotate` of [-180, 0]. The map displays country boundaries from the TopoJSON file `world-110m2.json`, which is loaded via `d3.json` and converted to GeoJSON features using `topojson.feature`. The code relies on `d3.geoPath` to project and draw each country onto the SVG canvas.

Dd3noob

95% match

Loading thumbnail…

World Map Centered v7

This example displays a world map centered on the Pacific Ocean using a Mercator projection. The map is rendered as SVG paths, with country boundaries drawn in white against grey landmasses. Built with D3 v7, it loads TopoJSON data from a local file and converts it to GeoJSON features using `topojson.feature`, then projects those features with `d3.geoMercator` and `d3.geoPath`. The projection is rotated by -180 degrees and centered at longitude 0, shifting the Pacific into view.

Dd3noob

94% match

Loading thumbnail…

World Map Centered on the Pacific

This example displays a world map centered on the Pacific Ocean using a Mercator projection. The map renders country boundaries as grey polygons with thin white strokes. It uses D3.js version 3.5.17 and TopoJSON to load and draw geographic data from a local `world-110m2.json` file. The projection is configured with a center of [0, 5], a scale of 150, and a rotation of -180 degrees, which shifts the map’s focus away from the traditional Atlantic-centered view.

Dd3noob

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

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

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

86% match

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

86% match

Loading thumbnail…

World Map

This example displays a natural Earth projection world map using SVG paths generated with `d3.geoPath` and `d3.geoNaturalEarth1`. It renders the globe’s sphere in aqua and country boundaries as coral polygons with black strokes, loaded from a TopoJSON file via `topojson.feature`. Hovering a country turns it white. The code imports from D3 v5 modules and fetches world-atlas data from unpkg.

CChathurya

85% match