Fork of Map with Selectable Countries

100%

Fork of Map with Selectable Countries

✓ Published0🌍 Public

Last edited Jan 19, 2026

Created on Jan 19, 2026

Forked from Map with Selectable Countries

This interactive choropleth map lets viewers click countries to select or deselect them, dimming unselected nations and highlighting the chosen one while fading the sphere background. The map and a color legend for economic groups update together, with the legend also supporting selection. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` to render GeoJSON from the World Atlas TopoJSON, while `d3.zoom` enables panning and zooming. The legend and map are composed via D3 data joins and `d3.scaleOrdinal` with a spectral color scheme.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Map with Selectable Countries

This interactive choropleth map displays countries colored by economic group, with a legend that filters the map's color encoding. Clicking a country selects it, dimming all others, while a click on the legend resets the selection. The visualization uses a natural Earth projection via d3.geoNaturalEarth1 and renders geographic paths with d3.geoPath. Data is loaded from a world-atlas TopoJSON with TSV metadata, and the ordinal color scheme comes from d3.scaleOrdinal and d3.schemeSpectral. Interactivity is handled with D3's selection API and event listeners.

Mmirasnag

95% match

Loading thumbnail…

Fork of Map with Selectable Countries F

This interactive choropleth map colors countries by economic grouping from the visionscarto-world-atlas dataset, using a spectral ordinal color scale. Clicking a country highlights it and dims all others, while a color legend allows filtering by category. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Zooming via d3.zoom and interaction handlers are also included.

Ffsajedi22

93% match

Loading thumbnail…

Map with Selectable Countries

This example presents an interactive choropleth map of world countries colored by economic classification. Users can click countries to highlight them while dimming all others, and clicking again deselects. The visualization also includes a clickable color legend that filters which categories remain visible. Built with D3 v5, it uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for map rendering and interaction, while the color scale uses `d3.scaleOrdinal` with `d3.schemeSpectral`. Country boundaries and names come from TopoJSON world-atlas data.

Aalfigit15052019

92% match

Loading thumbnail…

Map with Selectable Countries

This interactive map displays global economies using a color-coded choropleth, where clicking a country selects it and dims all others. The legend also supports click-to-filter, highlighting matching color values. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the projection and rendering, with `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files, with color values mapped via `scaleOrdinal` and `schemeSpectral`.

GGiovanniD_

91% 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

91% match

Loading thumbnail…

Fork of Map with Selectable Countries

This fork of a world map allows users to click individual countries to highlight them while dimming the rest. It uses a natural Earth projection with `d3.geoPath` to render country and sphere outlines in SVG, with data sourced from the world-atlas TopoJSON and TSV files. A `d3.scaleOrdinal` with the `schemeSpectral` palette colors countries by economic group, and a linked color legend supports selection toggling. Pan and zoom are enabled via `d3.zoom`, while country opacity and stroke width respond to the current selection state.

KKevin Luddy

91% match

Loading thumbnail…

Map with Selectable Countries

A choropleth map displays countries color-coded by economy using D3's `geoNaturalEarth1` projection and `geoPath`. Users click countries to select them, which highlights the chosen nation while dimming others; clicking again deselects. A color legend using `scaleOrdinal` with `schemeSpectral` allows filtering by income group. Data loads from world-atlas TSV and TopoJSON files, with SVG rendering supporting zoom interactions via D3's `zoom` event.

Ggcappadaniel

91% match

Loading thumbnail…

Map with Selectable Countries

A choropleth map colors countries by economic category, with clickable countries that highlight while all others fade, and a corresponding color legend allows filtering by category. Built with d3.v5, it uses `geoNaturalEarth1` projection, `geoPath` for rendering, and `zoom` for panning. Data comes from the World Atlas TopoJSON plus TSV metadata, and the ordinal color scale uses `schemeSpectral`. Clicking a country or legend item toggles the selected state.

FFukurouNarthil

91% match