Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited May 14, 2019

Created on May 14, 2019

Forked from Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economy group using an ordinal color scale, with a sidebar legend of clickable swatches. Clicking a legend item filters the map to highlight only countries in that category, dimming non-matching regions and adjusting opacity. The visualization uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` for cartographic rendering and coloring, while the legend handles events via `on('click')`. Country data merges TopoJSON geometry with TSV attributes from the world-atlas package.

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

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economic classification, with a legend of color swatches. Clicking a legend item filters the map to highlight only countries in that category, dimming all others, while hovering over a legend item reveals its effect. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for the map projection and rendering, plus `scaleOrdinal` with `schemeSpectral` for colors. Geographic data comes from the World Atlas TopoJSON and TSV files.

RRamazan YAGMUR

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

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

95% match

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

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economic data, colored by country using a spectral ordinal scale, lets viewers filter countries by clicking a color legend. The map renders with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, supporting pan and zoom through `d3.zoom`. Legend clicks toggle highlighting of matching countries, dimming others. Country data merges TopoJSON geometries with TSV attributes from the world-atlas dataset, and legend interactions redraw both map and legend.

Iianleekq

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, reducing the opacity of non-matching countries and highlighting the selected category. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world features from TopoJSON data, while d3.zoom enables panning and zooming on the SVG. Hovering a country turns it red via CSS.

CCarloGato

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economies by country, colored with a spectral ordinal scale. Users click legend items to filter the map, which highlights matching countries and dims others. The visualization uses D3 v5 with `geoPath`, `geoNaturalEarth1`, and a `zoom` interaction, alongside a custom color legend built with `scaleOrdinal` and `schemeSpectral`. Data merges TopoJSON country boundaries with TSV attributes loaded from the `world-atlas` package.

NNoah Weinberg

95% match