Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
TThomas Seberechts
Last edited Jun 8, 2020
Created on Jun 8, 2020

A choropleth map colors countries by economic classification using a D3 ordinal color scale, then allows interactive filtering through hover-adjacent clicks on the legend. The map renders with SVG and a natural Earth projection via `d3.geoPath`, while the legend items toggle opacity and highlight matching countries. Users can zoom and pan using `d3.zoom`, and the map loads world geometry from TopoJSON with economy data from a TSV file.

AI-generated description

A choropleth map where you can hover over items in the color legend items to interactively filter!

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economic data, colored by country using a spectral ordinal scale, lets viewers filter countries by clicking a color legend. The map renders with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, supporting pan and zoom through `d3.zoom`. Legend clicks toggle highlighting of matching countries, dimming others. Country data merges TopoJSON geometries with TSV attributes from the world-atlas dataset, and legend interactions redraw both map and legend.

Iianleekq
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters the map when clicked. Hovering over a legend item dims all countries except those matching the selected category, while clicking toggles the filter on and off. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `d3.zoom` for panning and zooming. Geographic data comes from the World Atlas TopoJSON dataset, with country names and economic groups loaded from a TSV file.

AAnthony Alsford
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using D3's `geoNaturalEarth1` projection and `geoPath`, with an ordinal color scale from `schemeSpectral`. Clicking a legend item filters the map by highlighting matching countries and dimming others, while the sphere fades to emphasize the selection. The visualization loads country boundaries from TopoJSON world-atlas data and supports pan and zoom via `d3.zoom`, with tooltips showing country names and values.

YYF
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using a spectral color scale, with an interactive legend that filters the map by clicking a category to highlight it. The map loads world geometry from TopoJSON and country metadata from TSV. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection, `d3.zoom` for panning, and SVG for rendering. Clicking a legend item toggles selection, dimming non-matching countries and emphasizing the chosen group.

Eevapavlinek
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering.js

This choropleth map visualizes countries’ economic classifications using color-coded regions, with an interactive legend enabling users to filter which categories remain highlighted. The map pairs an ordinal color scale with a natural Earth projection via `d3.geoPath`, while a `d3.zoom` handler controls pan and zoom. Clicking a legend option dims non-matching countries and emphasizes the selection, using `d3.scaleOrdinal` and `schemeSpectral`. Data comes from TopoJSON world-atlas shapes merged with TSV attributes, rendered as SVG paths.

NNeepaB
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters map regions by clicking legend items. The visualization combines a world map rendered with d3.geoPath and d3.geoNaturalEarth1, a colorLegend with clickable circles, and d3.zoom for panning and zooming. Country data comes from the world-atlas TopoJSON and TSV datasets, with hover highlighting and tooltips showing country names and values.

CClara Hu
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by economic classification, with an interactive legend that filters which countries remain highlighted. Users click legend categories to isolate specific economic groups, dimming non-matching countries to 10% opacity. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and a d3.scaleOrdinal with schemeSpectral for coloring. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package. The SVG rendering supports hover effects and a legend built with custom SVG groups and circles.

Ggabcoderboi
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic classification, with an interactive color legend allowing users to click a category and filter the map to highlight only matching countries while dimming others. Hovering reveals country names via tooltips, and the map supports zoom and pan. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for interaction. Data comes from TopoJSON world-atlas 50m, joined with TSV metadata storing economy type per country.

CChenluWang96
95% match