3.28-2

100%

✓ Published0🌍 Public

Last edited Apr 4, 2021

Created on Mar 28, 2021

Forked from 3.28

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Let's make a map

This example displays a world map rendered as SVG paths, showing country boundaries in a simple Mercator projection. The visualization loads geographic data from a world-atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` method. It uses d3.json to fetch the data, d3.geoMercator for the projection, and d3.geoPath to generate the path data, appending each country as a `<path>` element to the SVG.

Kkenneth

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

88% match

Loading thumbnail…

making a map

This example renders a world map using the Mercator projection, displaying country boundaries as SVG paths. The code loads geographic data from the World Atlas TopoJSON file, converts it to GeoJSON using `topojson.feature`, and draws the countries with `d3.geoPath`. The map is created with d3.v7, using a static SVG canvas sized to 960 by 500 pixels. The visualization demonstrates a straightforward approach to converting TopoJSON into a projected map with minimal styling.

KKikkolatsch

88% match

Loading thumbnail…

Let's make a map

This example shows a world map rendered as SVG paths, with each country outlined using a Mercator projection. The code loads a GeoJSON-like dataset from the world-atlas package and uses the `topojson` library's `feature` function to extract country features. It then applies `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data for each country, appending them to the SVG canvas.

JJanet Chen

88% match

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It loads geographic data from the World Atlas TopoJSON file and projects country boundaries with a spherical Mercator projection. The visualization uses `d3.geoPath` and `d3.geoMercator` to convert GeoJSON features into SVG paths, with the TopoJSON library’s `feature` method extracting country polygons. The resulting map renders as simple filled paths on a blank SVG canvas, showing the continents and country outlines.

TTomisin Owolabi

88% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map of countries using D3.js and TopoJSON. It loads geographic data from the world-atlas dataset and displays country boundaries as SVG paths. The visualization uses `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data from the TopoJSON features. Each country is appended as a `path` element to an SVG canvas sized 960 by 500 pixels.

Kkdvs94

87% match