Make a map with D3 js

100%

Make a map with D3 js

✓ Published2🌍 Public

Last edited Jan 7, 2021

Created on Jan 7, 2021

This example shows a natural Earth projection map of the world, with countries rendered as light green SVG paths on a dark blue sphere. The visualization loads world-atlas TopoJSON data via `d3.json`, converts it to GeoJSON using `topojson.feature`, and draws the map with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is a separate path generated from a generic sphere object, while country boundaries appear with semi-transparent black strokes.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

95% 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

94% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a natural Earth projection map of the world, with countries rendered as light green SVG paths and the ocean sphere filled in blue. It loads geographic data from the world-atlas TopoJSON dataset using `d3.json`, converts the TopoJSON features to GeoJSON with `topojson.feature`, and projects them via `d3.geoNaturalEarth1` and `d3.geoPath`. The sphere outline is drawn using a GeoJSON Sphere object.

AAlice Hsieh

94% match

Loading thumbnail…

Make a Map

This example displays a world map using a natural Earth projection, rendering countries and the surrounding sphere. The visualization loads geographic data from the world-atlas TopoJSON dataset, then uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths. The map fills landmasses in light green with a subtle black stroke, while the sphere is colored blue. Both the topojson `feature` method and D3’s data join are used to bind and append country paths to the SVG.

Fforeverworld1879

94% match

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

94% match

Loading thumbnail…

Lets make a Map with D3!

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with black outlines. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson `feature` function, then draws the map with d3.geoPath and d3.geoNaturalEarth1. The blue sphere background path is generated directly from a sphere object.

OOvxOO

94% match

Loading thumbnail…

Lets make a map with D3.js

This example displays a world map with countries rendered in light green against a blue sphere. It uses D3.js to create SVG paths from GeoJSON data, projecting geographic coordinates with the Natural Earth projection. The map is generated from the `world-atlas` dataset, and the TopoJSON library converts the data into features for rendering. The visualization employs D3's `geoPath` and `geoNaturalEarth1` to produce the map, with a simple CSS styling for the country and sphere fills.

Jjblaskovich

94% match

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths with subtle black strokes. The map is drawn from TopoJSON data loaded from the visionscarto-world-atlas package, using D3 v5’s `geoPath` and `geoNaturalEarth1` projection. A blue sphere path outlines the globe’s boundary. The code specifically imports `feature` from TopoJSON to convert topologies into GeoJSON features, then binds the country data to SVG path elements. The map appears on a blank background with no additional interactive features or transitions.

Mmla341

94% match