Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published2🌍 Public

Last edited Aug 19, 2020

Created on Aug 2, 2020

This choropleth map colors world countries by their economy type, with a color legend that supports interactive filtering. Clicking a legend category highlights matching countries and dims all others, while a zoomable natural Earth projection enables pan and scale exploration. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map rendering, `scaleOrdinal` with `schemeSpectral` for color mapping, and `zoom` for interaction. Country data is loaded from the World Atlas TopoJSON and TSV files.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map visualizes countries' economies using color-coded paths, with an interactive legend that filters the map by economic classification. Clicking a legend category dims non-matching countries and highlights those selected, while a semi-transparent sphere provides geographic context. Built with React and D3 v5, the example uses `geoPath` with the `geoNaturalEarth1` projection for rendering SVG paths, `scaleOrdinal` and `schemeSpectral` for the color scale, and `zoom` for pan and zoom interactions. Data is loaded from the world-atlas package and processed via `topojson.feature`.

AAnShed

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by their economy category, with an interactive color legend that filters which countries remain highlighted. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for geographic rendering, `zoom` for panning and scaling, and a `scaleOrdinal` with a spectral scheme for categorical colors. Data comes from TopoJSON world-atlas files merged with TSV metadata, and clicking a legend tick dims all non-matching countries.

MMichał Szumnarski

94% match

Loading thumbnail…

Colorpleth Map with interactive filtering

This choropleth map colors countries by their economy type using an ordinal color scale. Clicking a legend entry filters the map to highlight countries in that category while dimming others, with the sphere outline fading when a filter is active. Built with React and D3 v5, it uses `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning and zooming, while data comes from a TopoJSON file with TSV metadata. The SVG rendering uses `scaleOrdinal` and `schemeSpectral` for color assignment.

LLongYuu

94% match

Loading thumbnail…

Choropleth Map With Interactive Filtering

A choropleth map of world countries colored by economy, with an interactive color legend that filters the map to highlight countries in a selected category. Clicking a legend entry dims non-matching countries and increases their stroke width; clicking again clears the filter. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render topojson country features from the world-atlas dataset, with `d3.scaleOrdinal` and `schemeSpectral` for colors.

Bbprokopowicz

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by their economy category, using an ordinal color scale based on the Spectral scheme. Hovering over a country highlights it in red, while clicking a color legend item filters the map to show only countries in that category, dimming all others. Built with D3 v5, it renders countries as SVG paths using the geoNaturalEarth1 projection, and loads country boundaries and attributes from the world-atlas TopoJSON and TSV datasets. The interactive legend and zoom behavior are implemented through the D3 selection API and the custom zoom event handler.

LLaura Molina

93% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map visualizes the world’s economies using color-coded countries, with interactive filtering by clicking legend items to highlight specific economic categories. The map uses an Equirectangular projection and supports zooming and panning. Built with D3 v5, it employs `geoPath` and `geoNaturalEarth1` for geographic rendering, while a clickable `colorLegend` toggles opacity and highlights selected regions. Data originates from the World Atlas TopoJSON and TSV files, rendered as SVG elements.

Pprincit

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…

Choropleth Map - with interactive filtering

This choropleth map displays global economic classifications, coloring each country with an ordinal spectral scale based on its economy attribute. The visualization includes an interactive legend where clicking a category filters the map, dimming non-matching countries and highlighting selected ones. Built with React and D3 v5, it uses `geoPath` and `geoNaturalEarth1` for map projections, supports zooming via the `zoom` API, and loads country boundaries and data from the world-atlas package. The legend is interactive, with click handlers and animated transitions.

JJoseph Popoola

93% match