Skip to main content
SimilarExport ZIP
100%

Let's make a Map!

✓ Published0🌍 Public
Eemntd
Last edited Oct 21, 2019
Created on Oct 21, 2019
Forked from Let's make a Map!

A stylized world map from the World Atlas 50m dataset renders landmasses in light green with a dark blue sphere. Country names appear as tooltips when hovering. Built with D3.js and topojson, it uses the `geoNaturalEarth1` projection and `geoPath` for geometry, while the `zoom` interaction supports panning. A reduced TSV mapping links ISO codes to country names for the `title` elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a Map!

A stylized world map from the World Atlas 50m dataset renders landmasses in light green with a dark blue sphere. Country names appear as tooltips when hovering. Built with D3.js and topojson, it uses the `geoNaturalEarth1` projection and `geoPath` for geometry, while the `zoom` interaction supports panning. A reduced TSV mapping links ISO codes to country names for the `title` elements.

Eemntd
100% match
Loading thumbnail…

Let's make a Map!

This visualization displays world countries on a natural Earth projection, with each country filled in light green and highlighted red on hover. The map is rendered as SVG using D3’s `geoNaturalEarth1` projection and `geoPath`. Country boundaries come from a TopoJSON world-atlas file, while names are joined via a TSV file keyed by ISO numeric codes. Users can pan and zoom the map using D3’s `zoom` behavior, which applies a transform to the map group.

VVito
90% match
Loading thumbnail…

Let's make a map

This map of the world uses a dark blue sphere as a background, with light green countries rendered on top. The visualization is built with D3 and the topojson library, using `geoPath` and the `geoNaturalEarth1` projection to draw the geographical features. Country boundaries come from the world-atlas dataset loaded as 50m JSON, and the map is rendered as SVG paths.

JJason-Manbodh
89% match
Loading thumbnail…

Let's make a Map

This map renders world countries from the world-atlas TopoJSON dataset, using D3’s `geoNaturalEarth1` projection and `geoPath` to draw landmasses and country boundaries. The SVG output fills countries in light gray with blue strokes over a blue ocean sphere. It demonstrates a basic choropleth setup by asynchronously loading the 110m-resolution data and applying styling from an external stylesheet. The example shows how to project geographic features with D3’s geo API and topojson’s `feature` conversion.

Aarieltonglet
89% match
Loading thumbnail…

Let's make a map!

This interactive map displays world countries as green SVG paths on a blue sphere, with hover tooltips revealing country names. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON world-atlas data, while country names are joined via TSV data using ISO numeric codes. Users can pan and zoom the map through D3’s `zoom` behavior, which applies a transform to the map group. The code loads both TopoJSON and TSV files asynchronously with `Promise.all`.

Ccathykan
89% 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
88% match
Loading thumbnail…

lets make a map!

This example displays an interactive world map with countries rendered in light green and hover effects that change their color to red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath to draw geographic features from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file. Pan and zoom functionality is implemented via d3.zoom, and the map is rendered as SVG with a light blue sphere background.

SShane Carey
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

IIgor Borzunov
88% match