Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
FFilippaNathhorst
Last edited Oct 30, 2019
Created on Oct 30, 2019

A choropleth map colored by economy type uses an ordinal color scale and a Natural Earth projection to display global income groups. Users hover over legend items to filter the map, dimming non-selected countries and highlighting matches. Built with D3 v5, it combines `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.zoom` for panning, while the legend uses `d3.scaleOrdinal` and `schemeSpectral`. Data comes from the World Atlas TopoJSON and TSV files rendered as SVG elements.

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 economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

LLittledevil7
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economies by income group, with a color legend that filters countries by category. The map renders world geography using d3.geoPath with a Natural Earth projection, while a d3.scaleOrdinal with a spectral scheme assigns colors. Clicking a legend entry dims non-matching countries and highlights the selected group, using D3 v5’s zoom behavior for panning. The visualization loads TopoJSON and TSV data from the World Atlas package and draws everything as SVG.

RRenato Francia Castillo
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode income group for each country, with an interactive color legend that filters the map when clicked. Hovering over legend items dims countries not in the selected category, while clicking toggles filtering and zooms are supported. The visualization is built with d3.js v5, using d3.geoPath and d3.geoNaturalEarth1 for geographic projection, d3.scaleOrdinal with d3.schemeSpectral for coloring, and d3.zoom for pan/zoom. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv.

CCurran Kelleher
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses ordinal color encoding, with a legend that lets users click color swatches to filter countries by economic group. Non-matching countries dim to low opacity, and the selected legend item highlights its corresponding category on the map. The visualization is built with D3 v5, using `d3.geoPath` and `geoNaturalEarth1` for map projection, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from TopoJSON world-atlas files, with SVG rendering for all elements.

PPhilRG
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Jjesramyep1263
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with a color legend encoding each category. Clicking a legend item filters the map, dimming non-matching countries while highlighting the selected group. Hovering reveals country names and values via tooltips. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for SVG map rendering, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from TopoJSON world-atlas merged with TSV metadata.

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

Choropleth Map with Interactive Filtering

A choropleth map displays global economies using color coding derived from world-atlas TopoJSON data, with countries shaded by income group. Users can filter the map by clicking color legend items, which highlights matching countries and dims others. The visualization uses d3.geoNaturalEarth1 projections, d3.geoPath for country outlines, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral colors. Hovering changes country fill to red, and tooltips reveal country names and values.

OOxfordComma
93% match