Choropleth Map - with interactive filtering

100%

Choropleth Map - with interactive filtering

✓ Published0🌍 Public

Last edited Feb 14, 2020

Created on Feb 14, 2020

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.

AI-generated description

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

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters the map to highlight a selected category while dimming others. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders country paths with `d3.geoPath` in an SVG. Users can click legend circles to toggle filtering, and a zoom behavior (`d3.zoom`) enables panning and scaling. Data comes from the World Atlas TopoJSON and TSV files, with colors mapped using `d3.scaleOrdinal` and `schemeSpectral`.

Ssriramvsharma

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

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.

Lloicvdk

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications, with each country colored according to its economy category. Users can click items in the interactive color legend to filter the map, highlighting matching countries and dimming all others, while hovering over the legend reveals tooltips. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render the map from TopoJSON world data, and d3.scaleOrdinal with schemeSpectral to assign colors. Zoom and pan functionality are implemented via d3.zoom, and the legend filtering uses click handlers with opacity transitions.

Ppplomith

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

93% match

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

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

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications per country, with a natural Earth projection and color-coded fill based on categorical data. Users interactively filter the map by clicking color legend items, which dims all non-selected countries and reduces the sphere’s opacity. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.zoom`, with topojson loading world-atlas data. Hovering a country reveals its name and value via a tooltip, while the legend highlights the active selection.

FFlorian Breitwieser

93% match