Skip to main content
SimilarExport ZIP
100%

Multiple selection world map

✓ Published1🌍 Public
RRyan Fleming
Last edited Nov 7, 2018
Created on Sep 25, 2018

This example shows a world map where users can click individual countries to toggle them between yellow and green, allowing multiple selections simultaneously. The visualization uses a natural Earth projection rendered as SVG, with country boundaries and names sourced from the World Atlas TopoJSON and TSV datasets. D3’s zoom behavior enables pan and zoom on the map. Click handlers update each country’s data properties and re-render the paths, while CSS hover effects and the `.selected` class highlight interactive states.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Map with Selectable Countries D3.js HW

This example shows a world map where users can click individual countries to select and deselect them, with the selected country’s name displayed above the map. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON data sourced from the World Atlas. Click events toggle a yellow highlight on the selected country by modifying its fill and stroke styles, while a separate `div` element updates to show the country’s name from a TSV file. Pan and zoom interactions are enabled via `d3.zoom`.

KKCachel
87% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map of world countries colored by economic grouping, with interactive selection: clicking a country dims all others and highlights the chosen region, and clicking again clears the selection. A color legend filters the map to a single category. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering SVG paths, plus `zoom` for panning. Data comes from TopoJSON and TSV files via the world-atlas package, with colors assigned by `scaleOrdinal`.

Ccaydener
83% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map where clicking a country highlights it and dims all others, with a color legend on the side. It uses the d3.geoPath and d3.geoNaturalEarth1 projections to render the world map, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Country data comes from world-atlas TSV and TopoJSON files, and interactions trigger re-rendering with updated opacity and stroke styles. The map supports zooming via d3.zoom.

Jjlspangl
83% match
Loading thumbnail…

Map D3.js HW

This interactive world map lets users click individual countries to select them, highlighting each in orange with a red stroke while displaying the country’s name in red text above the SVG. Clicking a selected country reverts its fill to light green, though the name label remains visible. The visualization uses D3 v5 and TopoJSON, rendering with `d3.geoPath` and the `geoNaturalEarth1` projection, with zoom support via `d3.zoom`. Country names come from a TSV file paired with the world-atlas TopoJSON dataset.

KKCachel
82% 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
82% match
Loading thumbnail…

Map with Selectable Countries

This map visualizes world countries colored by economic classification using a categorical color scale. Clicking a country highlights it while dimming all others, and clicking again deselects it. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render SVG paths from TopoJSON world-atlas data, while d3.zoom enables panning and zooming. A color legend with clickable swatches filters the map, and the visualization updates reactively through D3 data joins.

Ccaydener
82% match
Loading thumbnail…

ywontthiswork

This example shows an interactive world map where clicking a country turns it green while all other countries remain red, displaying a selected-country highlighting behavior. The visualization loads geographic data from the world-atlas TopoJSON dataset and country names from a corresponding TSV file, then renders the map using d3.geoPath with a d3.geoNaturalEarth1 projection. Click events trigger a re-render that updates fill colors based on the selected country’s ID. The code uses d3.json, d3.tsv, and d3.select to manage data loading and SVG elements.

Jjons288
81% match
Loading thumbnail…

Make a Map with selection red region and title

This example displays a world map rendered as SVG paths, with countries colored light green and the oceans depicted in blue. Hovering over a country highlights it in red. The map uses a Natural Earth projection applied via d3.geoPath, with geographical data loaded from a world-atlas TopoJSON source. The visualization integrates d3.zoom for interactive panning and scaling, and country names are mapped from ISO codes using a TSV file.

Fforeverworld1879
81% match