Map with Selectable Countries

100%

Map with Selectable Countries

✓ Published0🌍 Public

Last edited Dec 8, 2019

Created on Dec 8, 2019

Forked from Map with Selectable Countries

This map displays the world’s countries colored by their economy classification, using an ordinal color scale and a natural Earth projection. Users can click any country to highlight it while dimming all others; clicking again deselects it. A separate, clickable color legend filters the map to show only countries within a selected economy group. Built with D3 v5, it uses `geoPath`, `geoNaturalEarth1`, and `scaleOrdinal` with `schemeSpectral`, and renders as SVG paths. Country data originates from the world-atlas TopoJSON and TSV files.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Map with Selectable Countries

This example presents a world map colored by each country’s economy group using an ordinal color scale. Clicking a country highlights it while dimming all others, and clicking again deselects it; the accompanying color legend also supports filtering by clicking its swatches. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, `d3.zoom` for pan and zoom, and `d3.scaleOrdinal` with `schemeSpectral`. Country boundaries and metadata come from TopoJSON and TSV files loaded from the world-atlas package.

LLiuyang Qin

96% 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_

94% match

Loading thumbnail…

Map with Selectable Countries

This interactive map displays countries color-coded by economy type using D3’s `geoNaturalEarth1` projection and `geoPath`. Clicking a country highlights it while dimming others, and clicking again deselects it; a `scaleOrdinal` legend with `schemeSpectral` colors supports filtering. The visualization uses topojson data from world-atlas and applies a zoom transform via d3.zoom. Selection state is managed by an internal `selectedCountryId` variable, updated through click handlers on country paths and legend ticks.

Ccaydener

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

94% match

Loading thumbnail…

Map with Selectable Countries

This interactive map displays global economic classifications by country using a color-coded ordinal scale. Clicking a country highlights it, dims all others, and clicking the same country again deselects it; the color legend also supports filtering by category. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render World Atlas TopoJSON data as SVG paths, with d3.zoom enabling pan and zoom. Color and selection states are managed through d3.scaleOrdinal and schemeSpectral, while click events drive the selection logic.

Llynz09

94% match

Loading thumbnail…

Map with Selectable Countries

This map visualizes global countries colored by economic group, with clicking a country highlighting it while dimming others and the map sphere. A color legend allows filtering countries by economic category, and hovering shows country names. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, d3.zoom for pan and zoom, and d3.scaleOrdinal with schemeSpectral for choropleth coloring. Data comes from World Atlas TopoJSON and TSV files, loaded via d3.json and d3.tsv.

Ssleyus

93% match

Loading thumbnail…

Map with Selectable Countries

This visualization presents a world map where individual countries are colored according to an ordinal income or economy classification. Users can click any country to select it, which highlights that country while dimming all others; clicking again deselects it. A color legend on the left allows filtering the map by a specific income group, similarly dimming non-matching countries. The map uses a natural Earth projection rendered as SVG paths via `d3.geoPath`, with zooming handled by `d3.zoom`. Data is loaded from the World Atlas TopoJSON and TSV files, and the color scale uses `d3.scaleOrdinal` with the spectral scheme.

ZZhi Guangda

93% match

Loading thumbnail…

Map with Selectable Countries

This interactive map displays world countries colored by economic group using a spectral color scale. Users can click countries to highlight them, which dims all others and fades the background sphere. Clicking again deselects. A legend allows filtering by economic group. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for pan/zoom. Data comes from the world-atlas TopoJSON and TSV files, with color mapping via d3.scaleOrdinal and d3.schemeSpectral.

CCurran Kelleher

93% match