Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 28, 2018
Created on Sep 28, 2018

This choropleth map colors countries by economic classification using a spectral color scale, with a clickable legend that filters the map to highlight selected categories and dim non-matching countries. Built with D3 v5, the visualization renders GeoJSON features via `d3.geoPath` with a Natural Earth projection, uses `d3.scaleOrdinal` and `d3.schemeSpectral` for color mapping, and supports zooming through `d3.zoom`. Data is loaded from the world-atlas TopoJSON and TSV files.

AI-generated description

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters the map when clicked. Hovering over a legend item dims all countries except those matching the selected category, while clicking toggles the filter on and off. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `d3.zoom` for panning and zooming. Geographic data comes from the World Atlas TopoJSON dataset, with country names and economic groups loaded from a TSV file.

AAnthony Alsford
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters map regions by clicking legend items. The visualization combines a world map rendered with d3.geoPath and d3.geoNaturalEarth1, a colorLegend with clickable circles, and d3.zoom for panning and zooming. Country data comes from the world-atlas TopoJSON and TSV datasets, with hover highlighting and tooltips showing country names and values.

CClara Hu
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using D3's `geoNaturalEarth1` projection and `geoPath`, with an ordinal color scale from `schemeSpectral`. Clicking a legend item filters the map by highlighting matching countries and dimming others, while the sphere fades to emphasize the selection. The visualization loads country boundaries from TopoJSON world-atlas data and supports pan and zoom via `d3.zoom`, with tooltips showing country names and values.

YYF
94% 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
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using a spectral color scale, with an interactive legend that filters the map by clicking a category to highlight it. The map loads world geometry from TopoJSON and country metadata from TSV. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection, `d3.zoom` for panning, and SVG for rendering. Clicking a legend item toggles selection, dimming non-matching countries and emphasizing the chosen group.

Eevapavlinek
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering.js

This choropleth map visualizes countries’ economic classifications using color-coded regions, with an interactive legend enabling users to filter which categories remain highlighted. The map pairs an ordinal color scale with a natural Earth projection via `d3.geoPath`, while a `d3.zoom` handler controls pan and zoom. Clicking a legend option dims non-matching countries and emphasizes the selection, using `d3.scaleOrdinal` and `schemeSpectral`. Data comes from TopoJSON world-atlas shapes merged with TSV attributes, rendered as SVG paths.

NNeepaB
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with a natural Earth projection rendered as SVG paths. An interactive legend allows users to click individual color categories, though the selection only logs to the console rather than filtering the map. The visualization loads world topology from the world-atlas TopoJSON dataset and joins country names from TSV data. The choropleth uses d3.geoPath, d3.scaleOrdinal with schemeSpectral, and d3.zoom for panning and zooming, while the custom colorLegend module handles the clickable legend UI.

Yyejichun@naver.com
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters which countries remain highlighted. Clicking a legend item dims all countries not in that category, while clicking the same item again clears the filter. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths, d3.scaleOrdinal with a spectral scheme for coloring, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV datasets, loaded via d3.json and d3.tsv.

Llystran
94% match