D3 World Map

100%

✓ Published1🌍 Public

Last edited Jun 23, 2022

Created on Jun 19, 2022

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as light green polygons on a light blue sphere outline. The code demonstrates multiple geographic projections—Mercator, Orthographic, Stereographic, and Natural Earth—by sequentially assigning them to a single `d3.geoPath` generator, though only the final Natural Earth projection is visualized. Country features are loaded from the `world-atlas` dataset via `d3.json` and converted with TopoJSON’s `feature` method. The map is drawn as SVG paths with light styling for stroke and opacity.

AI-generated description

Loading and parsing TOPOJSON
Rendering geographic features
Using different map projections
Rendering the projected sphere outline
Tweaking map styles
npm world-atlas

MIT Licensed

Similar vizzes

Loading thumbnail…

World Map Example

This example renders a world map using D3.js and TopoJSON, displaying country boundaries as SVG paths. The visualization shows a natural Earth projection of the globe, with countries filled in light green and oceans in blue, using a grayscale-style aesthetic. The code loads geographic data from the world-atlas TopoJSON file and applies `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `topojson.feature` to extract country features. A sphere outline is drawn first, followed by individual country paths appended to the SVG canvas.

Ccpsshan

94% match

Loading thumbnail…

D3-9: World Map

This example presents a world map using an equal-area Natural Earth projection. The visualization renders a blue sphere and light green country polygons as SVG paths. It loads TopoJSON data from the world-atlas package, converting it to GeoJSON with the topojson `feature` function. D3’s `geoPath` and `geoNaturalEarth1` projection generate the map geometry, with CSS styling applied to distinguish the sphere and country boundaries.

Bbkopruluoglu3

92% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map of countries rendered in light green on a blue sphere, using a natural Earth projection. It shows the geographic boundaries of nations as SVG paths, generated from a world-atlas TopoJSON dataset loaded via D3’s `json` function. The code uses `d3.geoPath` with a `geoNaturalEarth1` projection to convert geographic coordinates into screen paths, and the `topojson.feature` function to extract country features from the TopoJSON data. The sphere background is drawn as a separate path to create a globe-like visual context.

TThomas Seberechts

92% match

Loading thumbnail…

Let's make a map with D3.js

This example renders a world map using D3.js and TopoJSON, applying the natural Earth projection via `d3.geoNaturalEarth1` and drawing country boundaries with `d3.geoPath`. The SVG shows a blue sphere outline and light green countries with subtle black strokes. It loads country geometries from the world-atlas 110m TopoJSON dataset and converts them to GeoJSON using TopoJSON’s `feature` function. The code appends paths for the sphere and each country, demonstrating a straightforward choropleth-free geographic visualization.

Xxsg13

92% match

Loading thumbnail…

world map

This example displays a world map using natural Earth projection, with countries rendered as green filled paths with subtle black strokes against a blue spherical backdrop. It demonstrates loading TopoJSON country boundaries from the world-atlas package, converting them to GeoJSON via `topojson.feature`, and projecting them with `d3.geoNaturalEarth1` and `d3.geoPath`. The visualization also shows a sphere outline created from a GeoJSON Sphere object, all drawn as SVG elements using D3 v5’s selection and data-join methods.

Ppei9223

91% match

Loading thumbnail…

Let's make a map with D3.js

This example visualizes world countries as a natural Earth projection map, with landmasses rendered in light green against a dark blue spherical backdrop. Using D3 v5, it loads TopoJSON data from the world-atlas package and converts it to GeoJSON via topojson.feature, then draws each country with d3.geoPath and a d3.geoNaturalEarth1 projection. The map is rendered as SVG paths onto a fixed 960×500 canvas.

AAmar Nath Yogi

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a natural Earth projection map of the world using D3.js and TopoJSON. It draws a blue sphere as the globe background, then loads country boundaries from the world-atlas dataset and fills them with light green polygons, bordered by subtle black strokes. The visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to generate SVG paths, and `topojson.feature` to extract country geometries from the TopoJSON file.

AArriannePandaraoan

91% match

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes world countries on a natural Earth projection using D3.js. It renders a blue sphere outline and green country polygons as SVG paths, loaded from a TopoJSON dataset via the `world-atlas` package. The code uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate path data, with `d3.json` to fetch the data and `topojson.feature` to convert it into GeoJSON features.

LLittledevil7

91% match