Skip to main content
SimilarExport ZIP
100%

Choropleth Map Interactivty selection

✓ Published0🌍 Public
MMinh Nguyen
Last edited Apr 19, 2020
Created on Apr 19, 2020

This example shows an interactive choropleth map where clicking a legend category highlights matching countries and dims all others. Built with D3 v5 using `d3.geoMercator` and `d3.geoPath` for SVG rendering, it also applies `d3.zoom` for panning. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and click events toggle the selected category. Data comes from the World Atlas TopoJSON and TSV files, loaded via `Promise.all`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map Interactivty selection

This example demonstrates interactive filtering on a choropleth map of world economies, where clicking a color legend entry highlights matching countries and dims all others. Built with D3 v5, it renders GeoJSON features via `d3.geoMercator` and `d3.geoPath` in an SVG, with zoom support from `d3.zoom`. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and the map’s country opacity and stroke change in response to the selected value, sourced from the World Atlas TopoJSON dataset.

Mmaru25-alt
92% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economic grouping, with a legend of color categories that users can click to highlight matching regions and fade all others. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the legend employs scale-ordinal colors from `schemeSpectral` and interactive click handlers. Panning and zooming are enabled through `d3.zoom`. The geographic data comes from the World Atlas TopoJSON, with ISO country mappings joined from TSV metadata.

Ccaydener
88% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification using a categorical ordinal scale. Clicking a legend item filters the map, dimming unselected countries and highlighting the chosen category while clicking again resets the view. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map projection and rendering, with pan and zoom enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON, and the legend uses SVG circles with click handlers.

Ccodexmon
87% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using a spectral color scale, with an interactive legend that filters the map by clicking a category to highlight it. The map loads world geometry from TopoJSON and country metadata from TSV. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection, `d3.zoom` for panning, and SVG for rendering. Clicking a legend item toggles selection, dimming non-matching countries and emphasizing the chosen group.

Eevapavlinek
87% match
Loading thumbnail…

Choropleth Map with Interactive Practice

This visualization presents a world choropleth map coloring countries by economic classification using a spectral color scale, with an interactive legend that filters highlighted countries on click. Built with D3 v5, it employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for panning and zooming. Country data comes from the World Atlas TopoJSON and TSV files, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering over a country turns it red, and the legend’s clickable ticks dim non-selected categories.

Ccpsshan
87% match
Loading thumbnail…

Choropleth Map with Interactive Practice

This visualization presents a world choropleth map coloring countries by economic classification using a spectral color scale, with an interactive legend that filters highlighted countries on click. Built with D3 v5, it employs `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for panning and zooming. Country data comes from the World Atlas TopoJSON and TSV files, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral`. Hovering over a country turns it red, and the legend’s clickable ticks dim non-selected categories.

Ccpsshan
87% match
Loading thumbnail…

Choropleth map interactive filtering

This interactive choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. Users can zoom and pan the map, and selected countries are highlighted while unselected ones fade. The visualization uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, rendering with SVG. Data comes from the World Atlas TopoJSON file merged with TSV metadata.

ZZhi Guangda
87% match
Loading thumbnail…

Choropleth map interactive filtering

This interactive choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. Users can zoom and pan the map, and selected countries are highlighted while unselected ones fade. The visualization uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, rendering with SVG. Data comes from the World Atlas TopoJSON file merged with TSV metadata.

ZZhi Guangda
87% match