Skip to main content
SimilarExport ZIP
100%

Make a World Map

✓ Published1🌍 Public
EEngine194
Last edited Mar 21, 2023
Created on Mar 21, 2023
Forked from Fork of D3 Starter

This example displays a world map rendered as SVG paths, with countries filled in light green and a dark blue sphere as the background. It uses D3 version 7’s `geoPath` and `geoNaturalEarth1` projection to generate the geographic shapes, while the `topojson` library’s `feature` function converts TopoJSON country boundaries from the world-atlas dataset into GeoJSON features. The code fetches the data from a remote URL and asynchronously appends the country paths to the SVG container.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a World Map

This example shows a world map rendered as an SVG, with countries filled in light green and oceans depicted as a blue sphere. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw both the sphere outline and country boundaries. Country data comes from the world-atlas TopoJSON file, which is parsed with the `feature` function from topojson. The map is static, with no interactions or transitions.

MMinwoo Pak
93% match
Loading thumbnail…

Let's make a map!

This example shows a world map rendered with countries filled in light green and a blue sphere representing the Earth’s surface, all within an SVG. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw geographic features, while the TopoJSON library’s `feature` method extracts country boundaries from the world-atlas dataset. The code appends a sphere path and country paths, relying on the `json` function to load the TopoJSON data asynchronously.

Ccathykan
92% match
Loading thumbnail…

Making a Map

This example displays a world map as a set of light green countries against a blue sphere, rendered as SVG. The visualization uses the D3 library’s `geoNaturalEarth1` projection and `geoPath` generator, while the `topojson` package’s `feature` function converts the world-atlas TopoJSON data into geographic features for drawing. The sphere path is generated by passing a `Sphere` object to the same path generator. The map is fully drawn from the included `world-atlas` data source.

EEllednera
92% 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
92% match
Loading thumbnail…

World Map

This example displays a world map with countries rendered as light green polygons on a blue sphere. It uses D3’s `geoPath` and `geoNaturalEarth1` projection to draw geographic features, and the TopoJSON `feature` function to convert country outlines from a remote 110m dataset. The SVG output includes a background sphere and country paths, with styling applied via CSS classes.

Ffaquora
92% match
Loading thumbnail…

Let's make a Map with simplified code!

This example shows a world map rendered as SVG paths, with countries filled in light green and the ocean sphere in blue. The code uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to convert geographic data into SVG path strings, while TopoJSON's `feature` method transforms the TopoJSON world-atlas dataset into GeoJSON features for rendering. A data join appends one path per country, and the map is loaded asynchronously via `d3.json` from a remote unpkg URL.

CChristine Lanser
92% match
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 against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
92% match
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 against a blue sphere, using a natural Earth projection to display the globe. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset and converts them using the `feature` function from topojson. D3’s `geoPath` and `geoNaturalEarth1` projection generate the geographic paths, while a separate path outlines the spherical backdrop. The visualization is minimal, focusing on a clean, interactive-free display of global landmasses.

Ffaaty
92% match