Choropleth Map with interactive filtering

100%

Choropleth Map with interactive filtering

✓ Published1🌍 Public

Last edited Aug 6, 2020

Created on Jun 29, 2020

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

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map uses colors to display the economy category of each country, with an interactive color legend that filters the map. Clicking a legend item dims all countries not in that category, while hovering over a country turns it red. Built with D3 v5, the visualization uses `geoPath` and `geoNaturalEarth1` for map projection and `scaleOrdinal` with `schemeSpectral` for coloring. The code loads world country boundaries from TopoJSON and economy data from a TSV file using `d3.tsv` and the `topojson` library.

Aankita1mit

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

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Jjesramyep1263

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic grouping, with an interactive color legend that filters the map when clicked. Users can select a specific economic category to highlight those countries and dim all others, or click again to reset the view. Pan and zoom controls allow exploration of the global map. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, plus `d3.scaleOrdinal` and `d3.schemeSpectral` for color encoding. Country boundaries and metadata come from the world-atlas TopoJSON and TSV datasets.

FFernando Gonzalez - Valadez

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

LLittledevil7

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

93% match