Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Dec 17, 2020

Created on Dec 17, 2020

Forked from Choropleth Map with Interactive Filtering

A choropleth map of the world displays a categorical color scale, coloring each country by its economy income group. The map uses a geographic projection and SVG paths via `d3.geoPath` and the `geoAlbersUSA` projection. The color legend, built with `d3.scaleOrdinal` and `schemeSpectral`, shows discrete categories; clicking a legend item filters the map by fading non-matching countries to low opacity while highlighting the selected category. The data originates from a TopoJSON file and a TSV table loaded concurrently, which are merged by country ID.

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

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map uses a spectral color scale to depict national economies, rendered as SVG paths with D3's geoNaturalEarth1 projection and geoPath. Clicking a color legend tick filters the map by dimming non-matching countries to 10% opacity while highlighting the selected category, and also fades the background sphere. The legend, built with custom colorLegend logic, supports re-clicking to clear the filter. Data joins World Atlas TopoJSON with TSV income and economy metadata via topojson.feature and D3's tsv loader.

GGiovanniD_

92% match

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

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by an economic attribute, with interactive filtering that highlights selected categories and dims others. The map uses a natural Earth projection with a shadowed sphere, while a clickable color legend controls which categories remain prominent. Built with D3 v5, the visualization uses `d3.geoPath`, `d3.geoNaturalEarth1`, and an ordinal color scale based on spectral schemes. Data is loaded from the world-atlas TopoJSON and TSV files, with zooming enabled via D3's `zoom` component.

HHasideluxe

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of world countries colored by economic group, with an interactive legend that filters the map to highlight countries matching a selected category. Users click legend items to toggle filtering, which dims all non-matching countries and slightly emphasizes the selected group. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.scaleOrdinal with d3.schemeSpectral for color encoding, and d3.zoom for pan/zoom. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.tsv and d3.json.

LLaura Molina

92% 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 global economies uses color to encode income groups. Clicking a color legend item filters the map to show only that category, dimming all other countries. The map is rendered using D3’s `geoPath` with a natural Earth projection and a spectral ordinal color scale. Interactive filtering is implemented through a custom `colorLegend` with `onClick` handlers and opacity transitions. Data is loaded from the world-atlas TSV and TopoJSON files.

Iinvertedchicken

92% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with an interactive legend that filters the map when a color swatch is clicked. Hovering over a country reveals its name and value. The map renders geographic boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection, while the legend is built from `scaleOrdinal` and `schemeSpectral`. Clicking a legend item sets a `selectedColorValue`, which adjusts country opacity and highlights matching regions, and also dims the sphere and non-matching legend entries. Country data comes from the world-atlas TopoJSON and TSV files.

RRussell Watson

92% match