Skip to main content
SimilarExport ZIP
100%

Country selector

✓ Published0🌍 Public
RReggieW
Last edited Aug 9, 2022
Created on Aug 9, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Hover Over Country to See Name

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.

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

World test

This visualization displays a world map with countries colored light green against a blue sphere, using natural Earth projection. Hovering over a country turns it red, and users can zoom and pan the map interactively. The code loads TopoJSON and TSV data from the world-atlas package, converting TopoJSON to GeoJSON via topojson.feature and rendering paths with d3.geoPath. Zoom behavior comes from d3.zoom, while country names are joined from the TSV file and shown as SVG title tooltips.

OOldenkamp
87% match
Loading thumbnail…

Project

This example displays a world map with countries filled in light green, rendered on a blue spherical backdrop. The map allows panning and zooming through the d3 zoom event, which applies a transform to the map group. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` APIs to project geographical data, and the `topojson.feature` function to convert TopoJSON into GeoJSON features. Country names are loaded from a TSV file from the world-atlas package and displayed as tooltips via SVG `title` elements.

MMukund Khandelwal
87% match
Loading thumbnail…

Version 1

This example displays a world map using a natural Earth projection, with countries rendered as light green SVG paths. The map is built with D3 v5 and TopoJSON, loading geographic data from the world-atlas package (50m resolution) and matching country IDs to names from a TSV file. Hovering is disabled, but clicking a country sets a selected state and triggers a re-render. A zoom behavior enables panning and scaling, while a blue sphere path provides the ocean backdrop.

Vveagy
87% match
Loading thumbnail…

worldmap

This example displays an interactive world map with countries rendered as individual SVG paths, colored light green with black outlines, and highlighted in red on hover. It uses D3 v5's `geoNaturalEarth1` projection with `geoPath` to draw the map, and a light blue sphere for the oceans. Country boundaries come from the `world-atlas` package's countries-50m GeoJSON data, and the `topojson-client` library converts TopoJSON to GeoJSON for feature extraction. The chart supports zooming via D3's `zoom` event, which updates the SVG group transform in real-time.

Hhxc20060903
87% match
Loading thumbnail…

Map

This example visualizes world countries as a choropleth-style map, coloring each country green with white borders on a dark blue spherical backdrop. The map renders as SVG using D3.js with a Natural Earth projection via `d3.geoNaturalEarth1`, and country boundaries are generated through `d3.geoPath`. Geographic data loads from the world-atlas TopoJSON file (countries-110m.json), which is converted to GeoJSON using the `feature` function from the topojson library. Hovering a country changes its fill to red, and each country includes a title tooltip displaying its name.

VVlad Bogo
87% 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
86% match