Interactive choropleth map filtering

100%

Interactive choropleth map filtering

✓ Published1🌍 Public

Last edited Oct 6, 2021

Created on Oct 5, 2021

Forked from atlas

An interactive choropleth map displays global economic classifications using color-coded countries over a natural Earth projection. Clicking legend entries filters the map, dimming unselected economies and highlighting the chosen one while allowing zoom and pan through d3.zoom. The visualization uses d3.geoPath to render TopoJSON world-atlas data, d3.scaleOrdinal with schemeSpectral for color mapping, and SVG elements with transitions managed by D3’s data join. Hovering changes country fill to red, and tooltips show country names and values.

AI-generated description

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications using color-coded countries on a natural Earth projection. Users can click legend items to filter and highlight specific categories while dimming others. The visualization uses d3.geoPath to render country shapes from TopoJSON data and d3.scaleOrdinal with a spectral color scheme. Interactive zooming is implemented with d3.zoom, while legend clicks trigger re-rendering with adjusted opacity values.

Xxsg13

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

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economies using color-coded countries, with interactive filtering through a clickable color legend. Hovering over legend items dims non-matching countries, while clicking toggles filtering and highlights selected categories. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from TopoJSON world-atlas files, with country names and economy classifications merged from TSV metadata.

Sszy1900

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

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

95% match

Loading thumbnail…

Interactive Filtering on a Choropleth Map

A choropleth map of global economies uses color to represent each country’s economic group, with a clickable color legend enabling interactive filtering by dimming non-selected categories. Users can zoom and pan the geoNaturalEarth1 projection via d3.zoom, while d3.geoPath renders country boundaries from TopoJSON data enriched with World Atlas TSV attributes. The legend updates opacity through D3’s data-join and event handling, using schemeSpectral for the color scale.

Ooptimizeresume

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

95% match