Skip to main content
SimilarExport ZIP
100%

An Interactive Map with a Dynamic Title

✓ Published0🌍 Public
OOxfordComma
Last edited Sep 26, 2018
Created on Sep 22, 2018

This interactive map displays Earth with selectable countries that turn red when clicked, while hovering shows the country name as a dynamic title above the globe. Built with D3 v5 and TopoJSON, it uses `d3.geoPath` with a natural Earth projection to render the 50m world-atlas dataset. The visualization supports zooming via `d3.zoom` and handles mouse events to update the title text and country fill colors.

AI-generated description

This map allows for multiple countries to be selected (which will be highlighted in red). Hovering over any country with the mouse will show the name of that country above the earth.

MIT Licensed

Similar vizzes

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…

Interactive world map

This interactive world map displays country boundaries with hover highlighting and zoom/pan capabilities. Built with React and D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render SVG paths from TopoJSON data in the world-atlas package. A zoom behavior enables interactive transformations, while country names from a TSV file appear as tooltips via SVG `title` elements. The map fills countries in green and the ocean sphere in blue, with hover states turning countries red.

Eevapavlinek
86% 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
86% match
Loading thumbnail…

Interactive map with D3.js

This interactive map visualizes world countries using a natural Earth projection, with hover highlighting and zoom-and-pan navigation. The D3.js code loads GeoJSON country boundaries from a TopoJSON dataset via `d3.json` and `topojson.feature`, then renders them as SVG paths with `d3.geoPath`. A blue sphere path represents the globe’s outline. The `d3.zoom` API enables user interaction by applying transform events to the SVG group, while CSS `:hover` styles change country fills to red.

MMartin Christensen
86% match
Loading thumbnail…

Interactive Tricks

This interactive map displays world countries using a natural Earth projection, with hover effects that change country colors to pink and tooltips showing country names. The visualization supports zooming and panning through d3.zoom, applied to the SVG group containing all geographic paths. It uses d3.geoPath with geoNaturalEarth1 projection, loads TopoJSON data from world-atlas, and merges country names from TSV data using reduce. The code leverages D3 v5 selection, JSON, TSV, and zoom APIs, rendering geographic features as SVG paths with CSS styling for interactivity.

Llrakla
86% match
Loading thumbnail…

D3.js map - interactive

This interactive map displays world countries shaded in light green against a light blue sphere, with hover highlighting in red. Built with D3.js v7 and TopoJSON, it projects geographic data from the world-atlas countries-50m dataset using a natural Earth projection via d3.geoPath and d3.geoNaturalEarth1. Zoom functionality is handled by d3.zoom, which applies interactive transforms to the SVG group.

Ssheafallick
85% match
Loading thumbnail…

Let's make an Interactive Map with D3.js!

This interactive map displays world countries with hover highlighting using D3.js v5. It renders a natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1` on an SVG, with zoom and pan control through `d3.zoom`. Country boundaries come from TopoJSON data in the world-atlas package, enriched with country names from a TSV file. The map shows tooltips with country names on hover and enables smooth exploration of geographic data.

Fframptonb
85% match
Loading thumbnail…

Map Interactions

This example displays an interactive world map using a natural Earth projection, with countries rendered as light green SVG paths that turn teal on hover. The visualization combines world-atlas TopoJSON data with a TSV file containing country names, which are added as native SVG `<title>` tooltips. The map supports pan and zoom through d3.zoom, while d3.geoPath and d3.geoNaturalEarth1 handle geographic projections. Hover effects use CSS pseudo-classes, and the map includes a blue sphere background for context.

Ggilbster
85% match