Skip to main content
SimilarExport ZIP
100%

Lets Make a Map

✓ Published1🌍 Public
Ggabrielribeirob
Last edited Sep 21, 2021
Created on Sep 21, 2021
Forked from Lets Make a Face

This example displays a world map rendered as an SVG using D3’s `geoNaturalEarth1` projection and `geoPath` generator. Country boundaries come from the World Atlas TopoJSON dataset, converted to GeoJSON via `topojson.feature`. The visualization shows a dark blue ocean sphere with light green landmasses, each country plotted as a separate path.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's Make a Map with D3.js!

This example shows a world map rendered as an SVG, with countries filled in green and oceans in blue using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the geographic paths. Country outlines are drawn from TopoJSON data loaded from the world-atlas package, converted to GeoJSON via `feature`. A background sphere path is also added to represent the globe. The code relies on D3 v6 and TopoJSON v3 for mapping and data processing.

Eegrebing
94% 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
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
Loading thumbnail…

Making a map

This example displays a static world map with country boundaries and a blue sphere backdrop, rendered entirely as SVG paths. It uses a Natural Earth projection from `d3.geoNaturalEarth1`, with `d3.geoPath` generating the geographic shapes. The country data comes from the World Atlas TopoJSON dataset, processed through `topojson.feature`. The visualization shows the map in green fill, black strokes, and a dark blue ocean, with a light blue page background.

WWarren-Fitzhenry
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as an SVG using a natural Earth projection. D3’s `geoPath` and `geoNaturalEarth1` draw country boundaries from TopoJSON data loaded via `json`, while a blue sphere path represents the globe. The `feature` method from TopoJSON converts the world-atlas dataset into GeoJSON features, which are filled with light green and outlined with faint black strokes.

NNico Donovan
92% match
Loading thumbnail…

Let'smakeamap

This example displays a world map using the Natural Earth projection, with countries filled in light green against a dark blue sphere. It loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them with `topojson.feature`. The SVG paths are generated using `d3.geoPath` and `d3.geoNaturalEarth1`, with styling applied through CSS classes for the sphere and individual countries.

OOhayouKaminari
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