Choropleth Map with interactive filtering

100%

Choropleth Map with interactive filtering

✓ Published0🌍 Public

Last edited Feb 13, 2020

Created on Feb 13, 2020

This choropleth map shows global economic classifications, with countries colored by category. Clicking a legend entry filters the map, dimming non-matching countries and highlighting the selected one while zooming and panning remain available. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for interaction. Data comes from the World Atlas TopoJSON and TSV files, with a d3.scaleOrdinal and schemeSpectral colormap driving the legend and fills.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters highlighted regions. Hovering over a color legend item dims all non-matching countries to 10% opacity, while the selected category remains fully visible and gains a thicker stroke. Clicking the same legend item again clears the filter. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for pan and zoom, and scaleOrdinal with schemeSpectral for color encoding. Data comes from the World Atlas TopoJSON dataset, with country names and economy values loaded from TSV metadata.

HHeechan lee

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

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with a color legend encoding each category. Clicking a legend item filters the map, dimming non-matching countries while highlighting the selected group. Hovering reveals country names and values via tooltips. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for SVG map rendering, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from TopoJSON world-atlas merged with TSV metadata.

Wwmiao7483

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters highlighted regions. Users can click legend items to dim non-matching countries and emphasize selected categories, while zoom and pan are enabled via d3.zoom. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.scaleOrdinal with a spectral color scheme. Data comes from the world-atlas TopoJSON dataset, with country names and economy values loaded from TSV metadata.

JJuyeonee

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map visualizes global economic classifications using a color-coded world map, with a legend that filters countries by economy type. Users can click a legend category to highlight matching countries and dim others, and can click again to clear the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country boundaries from World Atlas TopoJSON and TSV data. Color assignments use d3.scaleOrdinal with the schemeSpectral palette, while d3.zoom enables panning and scaling. The SVG rendering includes hover effects that change country fill to white.

Ccheeson

96% match