Choropleth Map with Interactive Filtering

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

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic classification, with an interactive legend that filters map features by clicking on a category. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render country boundaries, while the color legend applies d3.scaleOrdinal with schemeSpectral. Pan and zoom are handled through d3.zoom. Data comes from the world-atlas TopoJSON dataset paired with TSV metadata, and filtering dims non-selected countries while highlighting the chosen economic group.

Ssteveaigbe

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale. Users can click on legend items to filter the map, which dims non-matching countries and highlights the selected category. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world map features from a 50m TopoJSON dataset, while the color legend (built with d3.scaleOrdinal and schemeSpectral) supports interactive click-based filtering. Hovering over a country displays its name and economic value via SVG title elements.

Mmi-desai

Choropleth Map with Interactive Filtering

Mmi-desai

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters which countries remain highlighted. Clicking a legend item dims all countries not in that category, while clicking the same item again clears the filter. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths, d3.scaleOrdinal with a spectral scheme for coloring, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV datasets, loaded via d3.json and d3.tsv.

Llystran

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

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

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