World Map Centered on the Pacific

100%

World Map Centered on the Pacific

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Mar 18, 2013

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.

AI-generated description

This is a simple map example centered on the Pacific.

mit Licensed

Similar vizzes

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

92% match

Loading thumbnail…

World Map Centered v5

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.

Dd3noob

92% match

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

90% match

Loading thumbnail…

Constrained Zoom Map. Centered on the Pacific

This example shows a world map centered on the Pacific Ocean, where users can pan and zoom with constrained translation bounds. It uses a Mercator projection with `.rotate([-180,0])` to place the anti-meridian at the center, and renders geographic features from a TopoJSON world dataset using `d3.geo.path`. The zoom behavior relies on `d3.behavior.zoom` and custom logic in the `move` function to limit panning within the viewport. Landmasses are filled black with white boundary strokes, and the SVG overlay captures pointer events for interaction.

Dd3noob

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

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

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

80% match

Loading thumbnail…

Map Pan and Zoom v6

This example demonstrates an interactive world map that supports panning and zooming, centered on the Pacific Ocean. The map renders country boundaries as SVG paths filled with grey, using the `d3.geoMercator` projection and `d3.geoPath` to generate the geometry. A `topojson` data file supplies the world topology. The `d3.zoom` API applies a transform to the SVG group containing the paths, with a scale range between 1x and 8x, enabling the user to explore the map.

Dd3noob

80% match