Skip to main content
SimilarExport ZIP
100%

Choropleth Map Interactivty selection

✓ Published1🌍 Public
SSophia Murage
Last edited Apr 10, 2020
Created on Apr 10, 2020

This example visualizes the World Bank’s country-level economy classifications on a choropleth map. Users can select a specific economy class from the color legend, which highlights matching countries and dims all others, while hovering over a country reveals its name and economic category. Built with d3.js v5, the map uses the `geoMercator` projection and `geoPath` to render country shapes from TopoJSON data. The legend, implemented with `scaleOrdinal` and `schemeSpectral`, enables interactive filtering through mouse clicks.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map Interactivty selection

This choropleth map displays countries colored by economy type, with a linked color legend for interactive selection. Clicking a legend category highlights matching countries and dims others, while clicking again clears the selection. The map uses a Mercator projection via d3.geoPath and geoMercator, with world data from the world-atlas TopoJSON and TSV files. Zooming is enabled through d3.zoom, and the legend uses ordinal color scaling with d3.scaleOrdinal and schemeSpectral.

SSophia Murage
92% 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
89% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map visualizes global economic classifications using a color-coded world map, with a legend that filters countries by economy type. Users can click a legend category to highlight matching countries and dim others, and can click again to clear the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country boundaries from World Atlas TopoJSON and TSV data. Color assignments use d3.scaleOrdinal with the schemeSpectral palette, while d3.zoom enables panning and scaling. The SVG rendering includes hover effects that change country fill to white.

Ccheeson
89% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that filters the map to a selected category. Users click legend items to dim non-matching countries and highlight the chosen group, while zooming is supported via d3.zoom. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render world features from TopoJSON data, with d3.scaleOrdinal and d3.schemeSpectral mapping economies to colors. Hover states change country fills to red, and tooltips show country names and values.

Ddavidcenna
89% match
Loading thumbnail…

Choropleth Map Interactivty selection

This example demonstrates interactive filtering on a choropleth map of world economies, where clicking a color legend entry highlights matching countries and dims all others. Built with D3 v5, it renders GeoJSON features via `d3.geoMercator` and `d3.geoPath` in an SVG, with zoom support from `d3.zoom`. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and the map’s country opacity and stroke change in response to the selected value, sourced from the World Atlas TopoJSON dataset.

Mmaru25-alt
89% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with an interactive color legend that filters the map by hovering or clicking on a category. The d3-scaleOrdinal and schemeSpectral color scale map each economy type to a distinct color, while d3-geoPath and geoNaturalEarth1 render the world geometry from TopoJSON data. Clicking a legend item dims non-matching countries and highlights the selected group, with zoom support via d3.zoom. The map uses SVG and d3.v5 for all rendering and interaction.

Zzhangfa
89% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world countries colored by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking legend items filters the map to highlight countries matching the selected economy type while dimming others, with the sphere and map regions adjusting opacity accordingly. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render topojson data from the world-atlas 50m dataset, and supports pan and zoom interactions through d3.zoom. Tooltips show country names and values via SVG title elements.

PPiotr Paszek
89% match
Loading thumbnail…

Chloropleth Map Interactive

This interactive choropleth map displays world countries colored by their economic classification using an ordinal color scale. Users can click legend items to filter and highlight countries matching the selected economy type, with non-matching countries fading to low opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering country boundaries as SVG paths, with d3.zoom enabling pan and zoom interactions. Data comes from TopoJSON world atlas files, while the interactive legend is built with custom d3 selections and click handlers.

IIsabel
89% match