Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Jun 14, 2021

Created on Jun 14, 2021

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

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

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

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

94% 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…

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

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This example presents a choropleth map of world countries colored by economic classification, with an interactive legend that filters the map's display. Clicking a legend category highlights matching countries while dimming others; clicking again clears the filter. The visualization uses D3 v5's `geoNaturalEarth1` projection with `geoPath` for rendering, and `scaleOrdinal` with `schemeSpectral` for color mapping. Pan and zoom are enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON dataset, loaded and processed with `topojson.feature` and merged with TSV metadata.

Vvic126

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

93% match