Skip to main content
SimilarExport ZIP
100%

Let's make a map with D3.js!

✓ Published2🌍 Public
TTomoyukiEguchi
Last edited Jan 9, 2021
Created on Jan 6, 2021

This interactive SVG map visualizes world countries, highlighting each one in red on hover and displaying its name via a tooltip. Built with D3.js v5, it uses `geoMercator` projection and `geoPath` to render geographic features from TopoJSON data, while country names are loaded from a TSV file. The map supports zooming through D3's `zoom` event, which transforms the map group.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive orthographic world map built with D3.js, where hovering over any country highlights it in red and displays its name as a tooltip. The map renders as SVG using `d3.geoPath` and `d3.geoOrthographic` for the projection, with country boundaries drawn from TopoJSON data loaded from the world-atlas dataset. The visualization also supports zooming and panning through `d3.zoom`. Country names are matched to geometries using ISO numeric codes from a TSV file.

KKarkG
89% match
Loading thumbnail…

map with D3.js!

This example displays a world map using D3.js, with each country rendered as a gray SVG path that turns red on hover. It uses the `d3.geoMercator` projection and `d3.geoPath` to draw the countries from TopoJSON data loaded via `d3.json` from the world-atlas package. The map also fetches COVID-19 statistics from the WHO’s global table CSV, though the data is only logged to the console rather than visualized. The code relies on both D3 v5 and the TopoJSON client library.

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

Let's make an interactive map with D3.js!

This interactive map visualizes world countries with hover highlighting, displaying country names as tooltips. It uses the D3.js v5 library with the `geoNaturalEarth1` projection and `geoPath` for rendering map features. The visualization loads geographic data from the world-atlas package, combining TSV metadata and TopoJSON geometry, while `topojson.feature` processes the country boundaries. The map supports zooming through D3’s `zoom` event, and renders as an SVG with styling for the ocean sphere and landmasses.

Iiascchwen
89% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using D3.js, with countries rendered as SVG paths filled in green and a blue sphere background. Hovering over a country turns it red, and users can zoom and pan the map via mouse interactions enabled by d3.zoom. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and added as SVG `<title>` tooltips.

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

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani
88% match