Choropleth Map with Interactive Filtering-1

100%

Choropleth Map with Interactive Filtering-1

✓ Published0🌍 Public

Last edited Oct 4, 2018

Created on Oct 4, 2018

Forked from Choropleth Map with Interactive Filtering

This choropleth map shows countries colored by a data value, with an interactive legend that filters the map. Clicking a legend item highlights only the matching country and dims the others, while clicking again clears the filter. Built with D3 v5, it renders an SVG using topojson for geographic boundaries and loads data from a CSV file. The color legend is implemented as a reusable component that binds click events to toggle the selected color value.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map shows world countries colored by name, with a clickable legend that filters the map to highlight a selected country while dimming others. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering countries, and `d3.zoom` for pan and zoom. Data combines CSV attributes with TopoJSON country boundaries, while the ordinal color scale uses `schemeSpectral`. Clicking a legend item toggles the filter, adjusting opacity and stroke width for highlighted countries.

MMukund Khandelwal

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by their economy category, with an interactive color legend for filtering. Clicking a legend category highlights only matching countries in full color while dimming others. The visualization uses d3.scaleOrdinal with schemeSpectral for color encoding and d3-geo projections for rendering SVG paths from TopoJSON world data. The legend implements click handling and opacity filtering, while hover states change country fill colors.

Ssakhabutdinov

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map visualizes countries by economic classification, with a color legend that filters the map when clicked. Hovering over legend items highlights matching countries, while clicking isolates one category and dims others. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for panning and zooming, while d3.scaleOrdinal with schemeSpectral assigns colors. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths. Interactive filtering is implemented via click handlers on legend groups, adjusting opacity and stroke width of country paths.

FFilippaNathhorst

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows world countries colored by income group, with interactive filtering controlled by a clickable legend. Selecting a legend category highlights matching countries while dimming others, and clicking again clears the filter. The map uses a natural Earth projection with an SVG rendering, drawing country paths via `d3.geoPath`. The color legend, built with `d3.scaleOrdinal` and a spectral scheme, triggers the filtering through an `onClick` handler. Country data comes from the world-atlas TopoJSON and TSV files.

Aanuj1450

89% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters map regions by clicking legend items. The visualization combines a world map rendered with d3.geoPath and d3.geoNaturalEarth1, a colorLegend with clickable circles, and d3.zoom for panning and zooming. Country data comes from the world-atlas TopoJSON and TSV datasets, with hover highlighting and tooltips showing country names and values.

CClara Hu

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

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

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

89% match