Choropleth map with interactive filtering

100%

Choropleth map with interactive filtering

✓ Published0🌍 Public

Last edited Sep 8, 2020

Created on Sep 7, 2020

This choropleth map displays countries colored by economic classification, with a linked legend that filters the map to highlight selected categories. Clicking a legend entry dims all other countries and emphasizes those matching the chosen value. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render geographic features from TopoJSON world atlas data, while a d3.scaleOrdinal with a spectral color scheme maps economic groups to colors. Interactive zoom and filtering are implemented via d3.zoom and click handlers on the SVG legend elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic classification, with an interactive legend that filters map features by clicking on a category. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, while the color legend applies d3.scaleOrdinal with schemeSpectral. Pan and zoom are handled through d3.zoom. Data comes from the world-atlas TopoJSON dataset paired with TSV metadata, and filtering dims non-selected countries while highlighting the chosen economic group.

Ssteveaigbe

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economic classification using a spectral color scale, with an interactive legend that filters the map by clicking a category value. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, while d3.zoom enables panning and zooming on the SVG canvas. The legend, built with custom D3 selections, dims unselected categories and allows toggling filters. Country data comes from the world-atlas TopoJSON dataset, enriched with economic metadata from a TSV file.

Zzlastefcia

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows countries colored by economic grouping, with a color legend that filters the map when clicked. Clicking a legend item dims unselected countries and highlights those matching the chosen category. The visualization uses d3.geoPath with d3.geoNaturalEarth1 for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and tooltips showing country names and values.

Fftjyangf

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

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color-coded legend that doubles as an interactive filter. Clicking a legend item highlights matching countries and dims all others on the map. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for the map projection, while d3.scaleOrdinal with schemeSpectral drives the color encoding. Hovering over legend items updates their opacity, and d3.zoom enables pan and zoom interactions. Country data comes from the World Atlas TopoJSON and TSV datasets loaded via d3.json and d3.tsv.

Ccaydener

95% match

Loading thumbnail…

Choropleth Map with interactive filtering

A choropleth map colors countries by economic classification, with a categorical color legend that doubles as a filter. Clicking a legend category dims non-matching countries and highlights the selected class, while zoom and pan are enabled via d3.zoom. The map uses d3.geoPath with a Natural Earth projection, rendering TopoJSON data from the World Atlas, and d3.scaleOrdinal with schemeSpectral assigns colors. Hover styling also highlights individual countries.

NNkwachi Abel

95% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that enables filtering by category. Selecting a legend item highlights matching countries while dimming others, and clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world boundaries from TopoJSON data (World Atlas 50m), styled as SVG paths. The d3.scaleOrdinal with schemeSpectral drives the color encoding, while d3.zoom provides pan and zoom transformation on the map group.

CCassie

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by economic classification, with an interactive legend that filters which countries remain highlighted. Users click legend categories to isolate specific economic groups, dimming non-matching countries to 10% opacity. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and a d3.scaleOrdinal with schemeSpectral for coloring. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package. The SVG rendering supports hover effects and a legend built with custom SVG groups and circles.

Ggabcoderboi

94% match