Skip to main content
100%

d3 Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
Jjayjoepark
Last edited Mar 26, 2019
Created on Mar 26, 2019

This choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. It uses d3.geoPath with a natural Earth projection to render the countries from a TopoJSON file. The colorLegend component uses d3.scaleOrdinal and schemeSpectral for the color scale, and clicking a legend item reduces the opacity of non-matching countries while highlighting the selected ones.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country using color-coded regions. Users can filter the map by clicking legend categories, which dims non-matching countries and highlights those with the selected value. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render SVG map paths, while d3.scaleOrdinal and schemeSpectral assign colors. Data is loaded from world-atlas TopoJSON and TSV files, and interactions rely on the d3.event zoom and legend click handlers.

JJohnPaulPagelerJr
93% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows countries colored by economic grouping, with a color legend that filters the map when clicked. Clicking a legend item dims unselected countries and highlights those matching the chosen category. The visualization uses d3.geoPath with d3.geoNaturalEarth1 for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and tooltips showing country names and values.

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

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive legend that filters the map to highlight selected categories while dimming others. Users can click legend items to toggle filtering, and the map supports zooming and panning via d3.zoom with geographic projection using d3.geoNaturalEarth1 and d3.geoPath. Data combines TopoJSON world geometry with TSV metadata, rendered as SVG paths with d3.v5.

MMichał Szumnarski
93% 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 the map when clicked. Hovering reveals country names and values via tooltips, while non-selected countries and legend items fade to low opacity. The visualization uses d3.geoNaturalEarth1 with d3.geoPath for projected SVG rendering, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, processed through topojson.feature. Clicking a legend item toggles filtering on that value.

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

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a color scale based on world-atlas TopoJSON data. Users can click legend items to highlight countries matching that category while dimming others, and hover effects further emphasize individual countries. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.zoom for panning and zooming, and d3.scaleOrdinal with schemeSpectral for color encoding. The legend and map are built as separate SVG components that re-render when the selection changes.

Ggcappadaniel
92% 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
92% match