Skip to main content
SimilarExport ZIP
100%

Let's make a World Map - simple with interactions

✓ Published2🌍 Public
JJimMaltby
Last edited Oct 25, 2020
Created on Oct 24, 2020

This example presents an interactive world map rendered in SVG, where each country is filled with green and highlights red on hover. Built with D3 v5 and TopoJSON, it loads world-atlas data from unpkg and projects it using `geoNaturalEarth1` and `geoPath`. The map supports zooming and panning via `d3.zoom`, with tooltips showing country names extracted from TSV data. The background sphere is drawn separately in dark blue, demonstrating a simple yet interactive geographic visualization.

AI-generated description

A simple map of the world, and coloured. From Curran Kelleher's: "Making a World Map with D3" adding the interactions from his next video.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a World Map - simple

This example shows a simple world map rendered as an SVG, with countries filled in green against a dark blue sphere background. Built with D3 v5 and TopoJSON, it loads world-atlas country boundaries from a CDN and projects them using the geoNaturalEarth1 projection, with geoPath generating the SVG paths. The code also applies CSS classes for styling, demonstrating a basic geographic visualization workflow.

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

Let's make a map with D3.js!

This example shows an interactive world map rendered in SVG, with countries displayed in dark green against a dark blue sphere. Hovering highlights each country in red, and users can zoom and pan using the mouse. It uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, `d3.zoom` for interaction, and TopoJSON to load world boundaries. The map pulls country names from a TSV file paired with the world-atlas 50m JSON dataset.

Ffahmijaafar
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel
92% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram
91% match
Loading thumbnail…

simple map interactions

This example shows an interactive world map rendered as SVG, where each country displays its name as a tooltip on hover and the entire map can be panned and zoomed. It uses D3 v5’s `geoNaturalEarth1` projection with `geoPath` to draw country boundaries from TopoJSON data loaded from the world-atlas package, and country names are matched from a TSV file via ISO numeric codes. The zoom behavior is implemented with `d3.zoom`, applying the current transform to a group element, while CSS hover styles highlight countries and a sky-blue sphere path forms the ocean background.

AAndrew Fletcher
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Ss-janibekova
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using a natural Earth projection, with countries rendered as green SVG paths that turn red on hover. The map supports zooming and panning through a D3 zoom behavior applied to the SVG group. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to parse geographic data from the world-atlas dataset. A semi-transparent blue sphere outlines the globe, while country names appear as tooltips via appended title elements.

Ffbudwill
91% match