Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
AAndreas Loew
Last edited Dec 8, 2019
Created on Dec 8, 2019

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.

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

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

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

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

A choropleth map displays global income groups, coloring each country through a categorical `scaleOrdinal` with the `schemeSpectral` range. Users click legend items to filter the map, highlighting matching countries while dimming others and the sphere backdrop. The map renders via `geoNaturalEarth1`, `geoPath`, and `zoom` interactions, while the legend uses click handlers and opacity toggling. Data comes from TopoJSON world-atlas and TSV files loaded through `d3.json` and `d3.tsv`.

BBrandon Lehr
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This example presents an interactive choropleth map of the world, coloring countries according to their income group using an ordinal color scale. Users can click a legend item to filter the map, dimming all countries that do not match the selected income group, and click again to clear the filter. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for rendering map shapes, with zooming enabled via the `zoom` API. Data is loaded from the World Atlas TopoJSON and TSV files, processed using the `topojson` library, and rendered as SVG in a React-based workflow.

MMatthew Rubino
94% match