Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

A choropleth map colors countries by economic classification, sourced from the World Atlas dataset and displayed using the Natural Earth projection. Clicking a color swatch in the legend filters the map, dimming all countries except those matching the selected category, while a highlighted stroke marks the active group. Built with D3 v6, it uses `d3.geoPath` for map geometry, `d3.scaleOrdinal` with the spectral scheme for color mapping, and `d3.zoom` for interactive panning and zooming. Hovering a country reveals its name and value via a tooltip.

AI-generated description

MIT Licensed

Similar vizzes

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 of world countries colored by economic classification, rendered with d3.geoPath and the geoNaturalEarth1 projection. Users click legend swatches to filter the map, dimming non-matching countries and highlighting the selected category, which also reduces the sphere's opacity. The visualization uses d3.scaleOrdinal with a spectral scheme, loads data via d3.tsv and d3.json from the world-atlas package, and implements pan/zoom through d3.zoom.

AArriannePandaraoan

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification, with a linked legend that filters the map when a category is clicked. Hovering over the legend dims non-matching countries to 10% opacity, while the selected category is highlighted. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning, alongside a custom ordinal `scaleOrdinal` with the `schemeSpectral` range. Map data comes from the World Atlas TopoJSON and TSV files.

Kkb1ngram4

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economic grouping, with a legend of color categories that users can click to highlight matching regions and fade all others. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while the legend employs scale-ordinal colors from `schemeSpectral` and interactive click handlers. Panning and zooming are enabled through `d3.zoom`. The geographic data comes from the World Atlas TopoJSON, with ISO country mappings joined from TSV metadata.

Ccaydener

94% match

Loading thumbnail…

Choropleth Map with interactive filtering

A choropleth map colors countries by economic classification, with a categorical color legend that doubles as a filter. Clicking a legend category dims non-matching countries and highlights the selected class, while zoom and pan are enabled via d3.zoom. The map uses d3.geoPath with a Natural Earth projection, rendering TopoJSON data from the World Atlas, and d3.scaleOrdinal with schemeSpectral assigns colors. Hover styling also highlights individual countries.

NNkwachi Abel

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

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

A world choropleth map colors countries by economic classification using a categorical ordinal scale. Clicking a legend item filters the map, dimming unselected countries and highlighting the chosen category while clicking again resets the view. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map projection and rendering, with pan and zoom enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON, and the legend uses SVG circles with click handlers.

Ccodexmon

94% match