D3 Choropleth Map with Interactive Filtering

100%

D3 Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Dec 16, 2019

Created on Dec 16, 2019

This D3 choropleth map visualizes countries colored by their economy category, using a spectral color scale. Users can click legend items to filter the map, highlighting matching countries while dimming others. The map supports zooming and panning through the `d3.zoom` event. It uses `d3.geoPath` and the `geoNaturalEarth1` projection to render geographic features, and the `d3.scaleOrdinal` color scale with `d3.schemeSpectral` for encoding. Data is loaded from the World Atlas topojson and TSV files, processed with TopoJSON.

AI-generated description

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

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

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

94% match

Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays global economic data, coloring each country according to its economy category. Users can click a color in the legend to filter the map, highlighting matching countries and dimming others, with the sphere and non-matching countries reduced in opacity. The visualization uses the d3.geoPath and d3.geoNaturalEarth1 projections to render geographic shapes, while d3.scaleOrdinal and d3.schemeSpectral drive the color assignments. Geographic and tabular data are loaded from the World Atlas TopoJSON and TSV files via d3.json and d3.tsv.

NNilla

94% 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 displays world countries colored by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking legend items filters the map to highlight countries matching the selected economy type while dimming others, with the sphere and map regions adjusting opacity accordingly. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render topojson data from the world-atlas 50m dataset, and supports pan and zoom interactions through d3.zoom. Tooltips show country names and values via SVG title elements.

PPiotr Paszek

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes the world's economies, coloring each country according to its economic classification. Users can zoom and pan the map via `d3.zoom`, while the color legend offers an interactive click handler, though its filtering effect is not implemented. The visualization loads geographic data from the world-atlas TopoJSON and TSV files, using `d3.geoPath` with a `geoNaturalEarth1` projection to render countries as SVG paths. A spectral color scale maps economy categories to hues, and hovering highlights a country in coral.

MMichał Szumnarski

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic data using a color scale, with a legend allowing viewers to filter the map by clicking a specific economic category. The map uses a natural Earth projection through `d3.geoNaturalEarth1` and `d3.geoPath`, rendering country boundaries as SVG paths. Filtering dims non-selected countries and highlights the chosen one, while the legend’s interactive ticks use `d3.scaleOrdinal` and `schemeSpectral` for colors. Data is loaded from the world-atlas TSV and TopoJSON files, with interactive zoom via `d3.zoom`.

AAjayyy

94% match