Let's make a map with D3.js!

100%

Let's make a map with D3.js!

✓ Published0🌍 Public

Last edited Mar 30, 2020

Created on Mar 30, 2020

Forked from Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a blue spherical background. It uses D3 v5 and TopoJSON to load world-atlas data and render the map as SVG paths. The code applies a US-centered Albers projection via `d3.geoAlbersUsa`, and draws the globe using `d3.geoPath` with a synthetic sphere feature.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries rendered as light green paths on a blue spherical background. Using D3.js and the topojson library, the code fetches geographic data from the `world-atlas` package and applies a `geoNaturalEarth1` projection with `geoPath` to draw the map. The SVG output includes a distinct sphere class and country boundaries with subtle stroke opacity.

AAltxis

94% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3 v5 and TopoJSON to load world-atlas data, then applies a natural Earth projection via `d3.geoNaturalEarth1` and traces country boundaries with `d3.geoPath`. The code also draws a background sphere path to represent the globe.

Ccodexmon

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example projects a world map onto a sphere using D3.js version 5 and the TopoJSON library. It shows countries as light green filled SVG paths with black strokes at low opacity, set against a blue spherical backdrop. The code loads geographic data from the world-atlas package, then applies the `geoEquirectangular` projection and renders each country feature via `geoPath`. A `pathGenerator` also draws the sphere boundary, with styling defined in an external stylesheet.

CCodax2000

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example creates a world map rendered as SVG using D3 v5 and TopoJSON. It loads world country boundaries from the World Atlas TopoJSON dataset, projects them with the `geoNaturalEarth1` projection, and draws each country as a filled path using `d3.geoPath`. A blue sphere background is added first, with countries shown in light green and outlined with subtle black strokes. The map displays the entire globe with country shapes accurately projected.

CChip

93% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG, with countries filled in green against a dark blue spherical backdrop. It fetches country boundaries from a TopoJSON file via the world-atlas dataset, then projects them using the Hufnagel projection from `d3-geo-projection`. The code builds paths with `d3.geoPath` and `d3.json`, styling the sphere and landmasses through CSS classes. It relies on D3 v5, TopoJSON’s `feature` method, and demonstrates a compact, data-driven mapping workflow.

JJames Malvern

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue sphere background. It uses D3 v5 to load GeoJSON data from the world-atlas TopoJSON file, converting it with `topojson.feature`. The map is projected using `d3.geoNaturalEarth1` and drawn with `d3.geoPath`. A separate path represents the sphere outline. The visualization updates dynamically once the data loads, adding country paths to the SVG.

OOliverlee1003

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses D3.js version 5 and TopoJSON to load and parse world-atlas data, then draws each country with the `d3.geoPath` and `d3.geoNaturalEarth1` projection. The code appends a sphere path first, then fetches the 110m dataset and adds country paths based on the TopoJSON features. Styling is handled via CSS classes.

YYERBOI95

93% match

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in light green against a blue spherical backdrop. It uses D3.js version 5 and the TopoJSON library to load and convert world-atlas data (110m resolution) into GeoJSON features. The map is drawn with `d3.geoPath` and a natural Earth projection (`d3.geoNaturalEarth1`), while a separate path renders the globe’s sphere outline. Country boundaries appear with a subtle black stroke, and the map updates once the external JSON data loads.

Jjnpatel

93% match