Interactive Filtering on a Choropleth Map

100%

Interactive Filtering on a Choropleth Map

✓ Published0🌍 Public

Last edited Jan 17, 2021

Created on Jan 15, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country’s economic group, with an interactive color legend that filters the map by clicking a category. Pan and zoom via d3.zoom reveal spatial patterns, while hovering shows country names and values through SVG titles. The visualization is built with d3.geoNaturalEarth1 and d3.geoPath, using ordinal color scaling with d3.scaleOrdinal and d3.schemeSpectral. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths, with the legend updating opacity to dim unselected countries.

Llkjcbl

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country's economic classification, with an interactive color legend that filters the map by category. Clicking a legend item dims non-matching countries, while a second click clears the filter; hovering over a country reveals its name and category via a title tooltip. The visualization combines d3.geoPath and geoNaturalEarth1 for map projection, d3.scaleOrdinal with schemeSpectral for colors, and d3.zoom for pan and zoom. Data comes from the World Atlas TopoJSON and TSV files.

GGiovanniD_

96% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode income group for each country, with an interactive color legend that filters the map when clicked. Hovering over legend items dims countries not in the selected category, while clicking toggles filtering and zooms are supported. The visualization is built with d3.js v5, using d3.geoPath and d3.geoNaturalEarth1 for geographic projection, d3.scaleOrdinal with d3.schemeSpectral for coloring, and d3.zoom for pan/zoom. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv.

CCurran Kelleher

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…

Interactive Filtering

A choropleth map of global economies uses color to encode categorical income groups, with a linked legend enabling interactive filtering. Clicking a legend category dims unmatched countries and the map sphere, while highlighting the selected group on both map and legend. The visualization employs d3.geoPath and d3.geoNaturalEarth1 for map projection, d3.zoom for pan and zoom, and d3.scaleOrdinal with schemeSpectral for color encoding. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG.

CChristine Lanser

95% match

Loading thumbnail…

Interactive choropleth map filtering

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.

Zzenoe

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

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

95% match