Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published2🌍 Public
LLuce Liu
Last edited Feb 22, 2020
Created on Feb 22, 2020

This example demonstrates how to create a world map using D3.js, rendering countries as SVG paths filled with light green and a blue sphere as the globe backdrop. It employs the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate geographic shapes, while loading TopoJSON data from the world-atlas package and converting it to GeoJSON via `topojson.feature`. The map is drawn on a static 960×500 SVG canvas without interactivity.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js. It renders a natural Earth projection of countries as SVG paths, filled with light green and outlined with a subtle black stroke, all set against a blue sphere background. The code uses `d3.json` to load geographic data from the world-atlas TopoJSON file, then converts it to GeoJSON with `topojson.feature`. The map is drawn using `d3.geoPath` and the `geoNaturalEarth1` projection, with the sphere added as a separate path.

TTallulah Kay
97% 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
96% 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
96% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates a static world map using D3.js, rendering countries and the Earth’s sphere as SVG paths with a Natural Earth projection. It uses `d3.geoPath` with `d3.geoNaturalEarth1`, and the `topojson` library’s `feature` method to convert TopoJSON from the `world-atlas` dataset into GeoJSON features. The sphere is drawn in blue, countries in light green with black outlines, and the code loads data asynchronously via `d3.json`.

Iimackerracher
96% 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
96% 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
96% 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 the globe as a blue sphere. It demonstrates loading geographic data from a TopoJSON file via `d3.json` and converting it to GeoJSON features using the `feature` function from the TopoJSON library. The map projection and path generation are handled by `d3.geoNaturalEarth1` and `d3.geoPath`, which draw the country boundaries and the sphere outline. The code uses D3 v5 and relies on the world-atlas dataset at 110m resolution.

Ggcappadaniel
96% match
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map with countries rendered as light green SVG paths on a blue sphere, using a natural Earth projection. The code loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON with topojson’s `feature` method. It builds the map with d3’s `geoPath` and `geoNaturalEarth1` projection, appending country paths and a sphere outline to the SVG canvas.

MMartin Christensen
96% match