Let's make a map with D3.js!

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, rendering countries with a natural Earth projection. It displays a blue sphere background and green country shapes with subtle black borders. The code uses D3's `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while the TopoJSON library's `feature` function extracts country boundaries from a world-atlas dataset. The visualization loads geospatial data from a remote JSON file and renders the map entirely as scalable vector graphics.

Ssnschoenborn

Let's make a map with D3.js!

Ssnschoenborn

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

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

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

Let's make a map with D3.js!

This example renders a world map using the Natural Earth projection via D3.js. A light green SVG path for each country is drawn over a blue spherical backdrop, with black strokes at low opacity for boundaries. The code uses `d3.geoPath` with the `geoNaturalEarth1` projection, loads geographic data from the `world-atlas` 110m JSON dataset, and constructs country features using the `topojson` library. The visualization is entirely SVG-based.

DDan Grunebaum

Let's make a map with D3.js!

DDan Grunebaum

Let's make a map with D3.js!

This example displays a world map using a natural Earth projection, rendering countries as filled paths with a visible ocean sphere background. The map uses TopoJSON data from the World Atlas package, which is converted to GeoJSON via `feature`. The visualization is built with D3 v5, using `geoNaturalEarth1` for the projection, `geoPath` to generate SVG path data, and `select` to append the country and sphere elements to the SVG canvas.

CCassie