Map

100%

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

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

This example displays a world map using a natural Earth projection, with countries filled in yellow and oceans depicted in blue. It relies on D3 v5’s `geoPath` and `geoNaturalEarth1` to project geographic coordinates, while the TopoJSON library’s `feature` method extracts country boundaries from the World Atlas dataset. The SVG rendering includes a spherical outline and country paths, with a simple black stroke applied to each nation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue sphere representing the Earth. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to generate the map geometry, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas 110m dataset. The visualization highlights the geographic layout without interactive features, focusing on static rendering of global landmasses.

Bbideckerz

92% match

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as yellow landmasses with black borders on a light blue sphere. It loads world country boundaries from the World Atlas TopoJSON data and converts it to GeoJSON using the `feature` function from TopoJSON. The map is drawn with D3’s `geoNaturalEarth1` projection and `geoPath` generator, appending SVG paths for both the background sphere and individual countries, styled via CSS classes.

Kkottenikhil

92% match

Loading thumbnail…

Lets make a MAP

This example renders a world map using a Natural Earth projection, highlighting countries as solid yellow shapes against a blue ocean sphere. The visualization builds the map with D3’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON `feature` function converts country boundaries from a JSON dataset. Path elements are generated for each country, with styling controlled by CSS classes for the sphere and landmasses. The map is drawn using SVG, and the data source is the world-atlas countries-110m JSON file.

Eedmond gihozo

92% match

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, rendered as an SVG with D3 version 5 and TopoJSON. It highlights country boundaries with pink fills and maroon strokes, overlaid on a green sphere outline that represents the globe. The map is drawn using `d3.geoPath` with `geoNaturalEarth1` projection, while country geometries are loaded from a remote TopoJSON file and converted via the `feature` method from TopoJSON. The data source is a gist containing country coordinates.

Mmandadi1999

91% match

Loading thumbnail…

World Map

This example renders a world map using a natural Earth projection, displaying countries as violet landmasses with white borders against a light yellow sphere. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the spherical outline and country boundaries from TopoJSON data loaded from the world-atlas package. The map is rendered as SVG paths, with the TopoJSON converted to GeoJSON via the `feature` method from topojson.

Rrushithareddyy

91% match

Loading thumbnail…

Let's make a Map!

This example displays a natural Earth projection world map using SVG, with countries filled in light green and oceans rendered in blue. It loads GeoJSON country boundaries from a World Atlas TopoJSON file via `d3.json`, then converts the TopoJSON features using the `topojson.feature` API. The map is drawn with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths, including a separate path for the globe’s sphere.

Rrainyrainyguo

91% match

Loading thumbnail…

World Map

This example renders a world map using D3.js (v5) and the TopoJSON library, projecting country boundaries with the Natural Earth projection via `d3.geoNaturalEarth1` and drawing them as SVG paths with `d3.geoPath`. It fetches country geometry from the world-atlas dataset hosted on jsDelivr, then styles each country with a yellow stroke and violet background. The map is displayed at a fixed SVG size of 910×415 pixels, with no interaction or animation.

NNHRK555

91% match

Loading thumbnail…

Let's Make a Map!

This example displays the world's countries on a natural Earth projection, with a dark blue sphere (ocean) and light green landmasses. The map is built using D3 v5’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON library’s `feature` function converts country boundaries from the `world-atlas` dataset. Rendering occurs as SVG paths, with styling for country strokes and sphere fill.

Ggilbster

90% match