Skip to main content
SimilarExport ZIP
100%

21 - interactive filtering - choropleth map - dataviz 2018

✓ Published0🌍 Public
Zzach b.
Last edited Nov 7, 2025
Created on Jan 10, 2022

This interactive choropleth map displays world countries colored by economy category, with a linked legend that filters the map by category. Users click a country or legend label to select or deselect a category, or click the ocean to clear the selection; non-selected countries fade to 30% opacity. Built with d3.v5, it uses `geoNaturalEarth1` projection and `geoPath` for rendering, `topojson` for world atlas data (from world-atlas npm package), and `scaleOrdinal` with `schemeSpectral` for colors. Zooming is implemented via d3’s `zoom` behavior.

AI-generated description

datraviz 2018 #21 - interactive filtering - choropleth map

click country or label to select/unselect category.
click ocean to deslect category.

world atlas topojson
unpk: topojson.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by their economy category, with an interactive color legend that filters which countries remain highlighted. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for geographic rendering, `zoom` for panning and scaling, and a `scaleOrdinal` with a spectral scheme for categorical colors. Data comes from TopoJSON world-atlas files merged with TSV metadata, and clicking a legend tick dims all non-matching countries.

MMichał Szumnarski
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by economy category using a sequential color scale, with an interactive legend that filters the map by clicking a category. The map renders geographic features with `d3.geoPath` and `d3.geoNaturalEarth1`, while the legend circles respond to clicks to toggle the selected category, dimming non-matching countries. Pan and zoom are enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON and TSV files, processed with TopoJSON’s `feature` method.

Aanduskong
92% match
Loading thumbnail…

Choropleth Map With Interactive Filtering

A choropleth map of world countries colored by economy, with an interactive color legend that filters the map to highlight countries in a selected category. Clicking a legend entry dims non-matching countries and increases their stroke width; clicking again clears the filter. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render topojson country features from the world-atlas dataset, with `d3.scaleOrdinal` and `schemeSpectral` for colors.

Bbprokopowicz
92% match
Loading thumbnail…

Choropleth Map Interactive Filtering

This choropleth map displays world countries colored by economy category using an ordinal spectral color scale. Clicking a legend category filters the map by highlighting countries in that category and dimming all others; clicking again clears the filter. The visualization uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `zoom`, and `scaleOrdinal` on SVG paths, with country data loaded from the world-atlas TopoJSON and TSV files. A legend built with `colorLegend` updates opacity and triggers interactive filtering.

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

Choropleth map interactive filtering

This interactive choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. Users can zoom and pan the map, and selected countries are highlighted while unselected ones fade. The visualization uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, rendering with SVG. Data comes from the World Atlas TopoJSON file merged with TSV metadata.

ZZhi Guangda
92% match
Loading thumbnail…

Choropleth map interactive filtering

This interactive choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. Users can zoom and pan the map, and selected countries are highlighted while unselected ones fade. The visualization uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, rendering with SVG. Data comes from the World Atlas TopoJSON file merged with TSV metadata.

ZZhi Guangda
92% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic grouping, with an interactive color legend that filters the map when clicked. Users can select a specific economic category to highlight those countries and dim all others, or click again to reset the view. Pan and zoom controls allow exploration of the global map. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, plus `d3.scaleOrdinal` and `d3.schemeSpectral` for color encoding. Country boundaries and metadata come from the world-atlas TopoJSON and TSV datasets.

FFernando Gonzalez - Valadez
92% match