Skip to main content
SimilarExport ZIP
100%

Choroplath Map with Interactive Filtering

✓ Published0🌍 Public
Nnouralkhoury
Last edited Nov 28, 2020
Created on Nov 28, 2020

This choropleth map colors countries by economic category and supports interactive filtering through a clickable legend. Selecting a legend category highlights matching countries while dimming others, and clicking again clears the selection. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while d3.zoom enables panning and zooming. Color categories are assigned via d3.scaleOrdinal with CSS classes, and the legend’s click handler toggles the filter. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG paths with tooltips showing country names and values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters the map when clicked. Hovering reveals country names and values via tooltips, while non-selected countries and legend items fade to low opacity. The visualization uses d3.geoNaturalEarth1 with d3.geoPath for projected SVG rendering, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, processed through topojson.feature. Clicking a legend item toggles filtering on that value.

Wwindwardpassage
95% match
Loading thumbnail…

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
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economic classification using a spectral color scale, with an interactive legend that filters the map by clicking a category value. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, while d3.zoom enables panning and zooming on the SVG canvas. The legend, built with custom D3 selections, dims unselected categories and allows toggling filters. Country data comes from the world-atlas TopoJSON dataset, enriched with economic metadata from a TSV file.

Zzlastefcia
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economy category and includes an interactive color legend for filtering. Hovering a legend item highlights matching countries and dims all others, while clicking toggles the selection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths with click-driven state updates.

JJunyanL
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows countries colored by economic grouping, with a color legend that filters the map when clicked. Clicking a legend item dims unselected countries and highlights those matching the chosen category. The visualization uses d3.geoPath with d3.geoNaturalEarth1 for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and tooltips showing country names and values.

Fftjyangf
94% match
Loading thumbnail…

Choropleth map with interactive filtering

This choropleth map displays countries colored by economic development category, with an interactive legend that filters the map when clicked. Hovering over a country reveals its name and category via a tooltip. The visualization uses d3.geoPath with a geoNaturalEarth1 projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for color mapping. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG with interactive updates triggered by legend clicks.

JJames Malvern
94% match
Loading thumbnail…

Choroplath Map with Interactive Filtering

A choropleth map colors countries by economic classification, using a categorical color scale with seven development categories. Interactive filtering lets users click legend items to highlight countries in a selected category, dimming all others. The map renders with d3.geoPath and a natural Earth projection, while d3.zoom enables panning and zooming. Data comes from the World Atlas TopoJSON and TSV files, processed via topojson.feature.

OOleg
94% 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
94% match