Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published1🌍 Public
Jjubileekr
Last edited May 20, 2019
Created on May 20, 2019

This choropleth map uses color-encoded economy classifications to visualize world countries from the World Atlas TopoJSON dataset. A spectral color scale is mapped to each country using D3’s `geoNaturalEarth1` projection and `geoPath`. Viewers can hover a legend item to filter the map, which dims non-matching countries with reduced opacity while highlighting the selected category. The example uses `d3.zoom` for panning and zooming, and the legend’s click handlers toggle the selection, updating both the map and legend transparency.

AI-generated description

A choropleth map where you can hover over items in the color legend items to interactively filter!

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a color scale based on world-atlas TopoJSON data. Users can click legend items to highlight countries matching that category while dimming others, and hover effects further emphasize individual countries. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.zoom for panning and zooming, and d3.scaleOrdinal with schemeSpectral for color encoding. The legend and map are built as separate SVG components that re-render when the selection changes.

Ggcappadaniel
95% 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
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by economy category using a sequential color scale, with an interactive legend that filters the map by clicking a category. The map renders geographic features with `d3.geoPath` and `d3.geoNaturalEarth1`, while the legend circles respond to clicks to toggle the selected category, dimming non-matching countries. Pan and zoom are enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON’s `feature` method.

Aanduskong
94% 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
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters which countries remain highlighted. Clicking a legend item dims all countries not in that category, while clicking the same item again clears the filter. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths, d3.scaleOrdinal with a spectral scheme for coloring, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV datasets, loaded via d3.json and d3.tsv.

Llystran
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters the map when clicked. Hovering over a legend item dims all countries except those matching the selected category, while clicking toggles the filter on and off. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `d3.zoom` for panning and zooming. Geographic data comes from the World Atlas TopoJSON dataset, with country names and economic groups loaded from a TSV file.

AAnthony Alsford
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification, with a linked legend that filters the map when a category is clicked. Hovering over the legend dims non-matching countries to 10% opacity, while the selected category is highlighted. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning, alongside a custom ordinal `scaleOrdinal` with the `schemeSpectral` range. Map data comes from the World Atlas TopoJSON and TSV files.

Kkb1ngram4
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters the map when clicked. Hovering reveals country names and values via tooltips, while non-selected countries and legend items fade to low opacity. The visualization uses d3.geoNaturalEarth1 with d3.geoPath for projected SVG rendering, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, processed through topojson.feature. Clicking a legend item toggles filtering on that value.

Wwindwardpassage
93% match