Skip to main content
SimilarExport ZIP
100%

Hover Over Country to See Name

✓ Published0🌍 Public
Jjons288
Last edited Sep 25, 2018
Created on Sep 23, 2018

This interactive world map renders country boundaries as SVG paths using D3’s `geoPath` and `geoNaturalEarth1` projection. Hovering over a country reveals its name via an SVG `<title>` tooltip, populated from world-atlas TSV data keyed by ISO country code. Clicking a country highlights its outline in red by restyling the path’s stroke attribute. The example uses D3 v5, topojson for feature extraction, and includes a blue sphere backdrop.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

World Map hover version

This example displays an interactive world map rendered with SVG, featuring countries that change color when hovered over. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to draw geographic shapes from TopoJSON data, while country names are loaded from a TSV file. Users can pan and zoom the map using D3’s `zoom` behavior, and a CSS hover effect highlights each country in red. The map includes a blue sphere background representing the Earth’s outline.

Ddata-inside
87% match
Loading thumbnail…

World Map

This example displays an interactive world map using a natural Earth projection, with countries rendered as filled paths that highlight red on hover. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, joining country names via ISO codes. It uses d3.geoPath with geoNaturalEarth1 for projection, d3.zoom for pan and zoom interactions, and TopoJSON’s feature method to convert topology to GeoJSON. The SVG sphere appears blue, while countries are light green with black strokes.

CChinzorigt Ganbat
87% match
Loading thumbnail…

Country selector

This example shows a world map with countries colored light green, turning orange on hover, and includes a spherical blue background with pan-and-zoom support. It uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` behavior applied to an SVG group. Country boundaries come from TopoJSON world-atlas data (50m resolution), with names loaded from an accompanying TSV file and added as SVG `<title>` tooltips.

RReggieW
87% match
Loading thumbnail…

Map with D3.js

This map visualization displays world countries on a natural Earth projection using D3.js and TopoJSON data from the world-atlas dataset. It renders an SVG sphere background and country paths filled with teal, which turn red on hover through CSS. The code employs D3 v6 features like `geoNaturalEarth1` and `geoPath` to project geographic coordinates, while `topojson.feature` extracts country boundaries from the loaded TopoJSON file. A tooltip showing each country’s name appears via appended `title` elements.

WWayne716
87% match
Loading thumbnail…

Interactive maps

This interactive map displays world countries using a natural Earth projection, with hover states that highlight individual nations in red. The visualization loads geographic data from a world-atlas TopoJSON file and renders it as SVG paths, with country names appearing as tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for path generation, and `d3.zoom` for panning and zooming. The map also includes a dark blue sphere background, while CSS styles control the country and hover fill colors.

Ddaanasma
87% 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
87% match
Loading thumbnail…

World Map

This world map visualizes country boundaries, rendered as SVG paths using D3's `geoPath` and `geoNaturalEarth1` projection. The map loads geographic data from the world-atlas package, combining a TopoJSON file with a TSV file to attach country names to each region. Hovering over a country turns it red, and a native SVG `<title>` element displays the country name. The map also includes a blue sphere background and supports zooming via the `d3.zoom` API, applying transformations to the country group.

LLeah Mitchell
87% match
Loading thumbnail…

Lets make a map with D3.js

This example demonstrates an interactive world map where each country is a clickable path element, with country names available as tooltips on hover. The visualization uses D3.js v5 with the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from the world-atlas TopoJSON and TSV datasets, which supply the country shapes and names. The map supports zooming and panning via the `d3.zoom` module, which updates the SVG group's transform attribute. Country hover states change fill color to red, highlighting the selected nation.

HHelenaShu
86% match