Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published2🌍 Public
Nntds12
Last edited Mar 24, 2020
Created on Mar 24, 2020
Forked from Blank Canvas

This example displays a choropleth-style world map with countries filled in light green against a blue ocean sphere. It uses D3.js version 5 with the `geoNaturalEarth1` projection and `geoPath` generator to render SVG paths. The map loads geographic data from the World Atlas TopoJSON file via `topojson.feature`. Each country boundary is drawn with a thin black stroke, and the overall rendering is static with no interactivity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as SVG, with countries filled in light green and oceans depicted as a blue sphere. It loads GeoJSON country boundaries from the World Atlas TopoJSON dataset via `d3.json` and converts them using the TopoJSON `feature` function. The map is drawn with `d3.geoPath` and a `d3.geoNaturalEarth1` projection, adding a background sphere path for the ocean. Using D3 v5 and SVG, it demonstrates a straightforward choropleth-style basemap without interactivity.

Uuserabuser
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

MMichał Szumnarski
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in light green against a dark blue sphere background. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. The map projects coordinates with `geoNaturalEarth1` and draws each country boundary via `d3.geoPath`, while a separate path renders the globe’s outline. The visualization demonstrates basic choropleth-style mapping using D3 v5’s geo modules.

MMichał Szumnarski
95% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with countries filled in light green against a dark blue ocean sphere, projected using the Natural Earth projection. The visualization is built with D3.js v5, using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate country boundaries from the world-atlas TopoJSON dataset. The `topojson.feature` library processes geographic features, and SVG paths render each country. The map is presented within an empty SVG canvas, with the sphere and country paths styled via CSS classes.

Ooptimizeresume
95% 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
95% match
Loading thumbnail…

Let's make a map with D3.js!

A choropleth-style world map displays countries as light green polygons on a blue sphere, with thin black borders, using D3.js v5 and TopoJSON. The example loads world-atlas geographic data from unpkg, converts TopoJSON to GeoJSON via the `feature` function, and renders the map with `d3.geoPath` and a Natural Earth projection (`geoNaturalEarth1`). The SVG canvas includes a background sphere path and country paths, demonstrating a minimal, clean approach to geographic visualization with accessible web libraries.

Aantonsold
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a static SVG, with countries filled in green and a light blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using `topojson.feature`. The map uses the `geoNaturalEarth1` projection and draws boundaries with `d3.geoPath`. D3 selections append one SVG path per country, while a dedicated sphere path provides the ocean backdrop.

TTsing
94% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map using a natural Earth projection, with countries filled in light green and oceans in blue, all rendered as SVG paths. It loads geographic data from the World Atlas TopoJSON dataset via `json()`, then converts the TopoJSON features into GeoJSON using the TopoJSON `feature()` function. The map is drawn with D3’s `geoPath` and `geoNaturalEarth1` projection, and styled with CSS classes for the sphere and countries.

RRich Werden
94% match