Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Nov 9, 2020

Created on Nov 9, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with an interactive legend that filters the map when a color swatch is clicked. Hovering over a country reveals its name and value. The map renders geographic boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection, while the legend is built from `scaleOrdinal` and `schemeSpectral`. Clicking a legend item sets a `selectedColorValue`, which adjusts country opacity and highlights matching regions, and also dims the sphere and non-matching legend entries. Country data comes from the world-atlas TopoJSON and TSV files.

RRussell Watson

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh

96% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map displays world countries colored by income group using an ordinal color scale, with a zoomable, panning natural Earth projection. Clicking a legend swatch filters the map by highlighting matching countries and dimming others. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map interaction, while a custom colorLegend component handles click-driven filtering. Data comes from the world-atlas TopoJSON and TSV files, with countries rendered as SVG paths and hover effects changing fill color.

JJason-Manbodh

95% match

Loading thumbnail…

Choropleth map with interactive filtering

A choropleth map of world countries colored by income group, with interactive filtering through a color legend. Clicking a legend category highlights matching countries and dims others; clicking again clears the filter. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with zoom controls from `d3.zoom`. It loads TopoJSON country boundaries from the world-atlas dataset, merges names from a TSV file, and renders in SVG with `d3.scaleOrdinal` and `schemeSpectral`.

PPeter S

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of world countries, colored by ordinal income group, includes a color legend that filters the map when clicked. Clicking a legend label dims all countries except those in that group; clicking the same label again clears the filter. The map uses the `geoNaturalEarth1` projection with SVG paths generated by `geoPath`, and the legend re-renders via an `onClick` handler. Data is loaded from a world-atlas TopoJSON and TSV files.

AAndreas Loew

95% match

Loading thumbnail…

my Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by their income group using an ordinal color scale. Users can click on legend items to highlight or filter specific categories, with unselected groups fading to 20% opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for geographic rendering, while d3.zoom enables pan and zoom interactions. Data comes from the World Atlas TopoJSON dataset, combined with TSV metadata for country attributes. The visualization is built with D3 v5 and rendered as SVG elements, with hover effects that turn countries red.

Jjlspangl

94% match

Loading thumbnail…

Interactive Filtering on a Choropleth Map

This interactive choropleth map displays world countries colored by income group from World Atlas TopoJSON data. Users click legend ticks to filter countries, highlighting selected income categories while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering and d3.zoom for pan/zoom controls. A color legend built with d3.scaleOrdinal and schemeSpectral responds to clicks, toggling opacity and stroke width on matching countries.

JJordan Chiu

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global income groups using a natural Earth projection, with countries colored by income classification. Clicking a color legend item filters the map to highlight only countries in that group, dimming all others and adjusting the sphere’s opacity. Hovering reveals country names and values via SVG titles. Built with d3.geoPath, d3.zoom, and d3.scaleOrdinal, it loads TopoJSON and TSV data from the world-atlas package, with interactive legend selection managed through d3 event handlers.

Rraylexlee

93% match