Chloropleth Map with Interactive Filtering

100%

Chloropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Mar 17, 2021

Created on Mar 17, 2021

A choropleth map colors countries by income group, with an interactive legend that filters the map to highlight selected categories and dim others. The map uses d3.geoEquirectangular and d3.geoPath to render countries from TopoJSON world-atlas data, while d3.zoom enables pan and zoom. The color legend, built with d3.scaleOrdinal and schemeBlues, responds to clicks to toggle selection. Hovering a country changes its fill, and a tooltip shows its name and income group.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with an interactive legend that filters the map when a color swatch is clicked. Hovering over a country reveals its name and value. The map renders geographic boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection, while the legend is built from `scaleOrdinal` and `schemeSpectral`. Clicking a legend item sets a `selectedColorValue`, which adjusts country opacity and highlights matching regions, and also dims the sphere and non-matching legend entries. Country data comes from the world-atlas TopoJSON and TSV files.

RRussell Watson

93% match

Loading thumbnail…

Chloropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using an ordinal color scale, with a linked legend for interactive filtering. Clicking a legend category dims non-matching countries and highlights selected ones, while clicking again clears the filter. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map projection, and d3.zoom for pan and zoom. Data comes from world-atlas TopoJSON and TSV files; colors are applied via d3.scaleOrdinal with the GnBu scheme.

Ffbudwill

93% match

Loading thumbnail…

Interactive Filtering on a Choropleth Map

This interactive choropleth map displays world countries colored by income group from World Atlas TopoJSON data. Users click legend ticks to filter countries, highlighting selected income categories while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering and d3.zoom for pan/zoom controls. A color legend built with d3.scaleOrdinal and schemeSpectral responds to clicks, toggling opacity and stroke width on matching countries.

JJordan Chiu

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows world countries colored by income group, with interactive filtering controlled by a clickable legend. Selecting a legend category highlights matching countries while dimming others, and clicking again clears the filter. The map uses a natural Earth projection with an SVG rendering, drawing country paths via `d3.geoPath`. The color legend, built with `d3.scaleOrdinal` and a spectral scheme, triggers the filtering through an `onClick` handler. Country data comes from the world-atlas TopoJSON and TSV files.

Aanuj1450

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global income groups using a natural Earth projection, with countries colored by income classification. Clicking a color legend item filters the map to highlight only countries in that group, dimming all others and adjusting the sphere’s opacity. Hovering reveals country names and values via SVG titles. Built with d3.geoPath, d3.zoom, and d3.scaleOrdinal, it loads TopoJSON and TSV data from the world-atlas package, with interactive legend selection managed through d3 event handlers.

Rraylexlee

93% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map displays world countries colored by income group using an ordinal color scale, with a zoomable, panning natural Earth projection. Clicking a legend swatch filters the map by highlighting matching countries and dimming others. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map interaction, while a custom colorLegend component handles click-driven filtering. Data comes from the world-atlas TopoJSON and TSV files, with countries rendered as SVG paths and hover effects changing fill color.

JJason-Manbodh

92% match

Loading thumbnail…

Choropleth map with interactive filtering

A choropleth map of world countries colored by income group, with interactive filtering through a color legend. Clicking a legend category highlights matching countries and dims others; clicking again clears the filter. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with zoom controls from `d3.zoom`. It loads TopoJSON country boundaries from the world-atlas dataset, merges names from a TSV file, and renders in SVG with `d3.scaleOrdinal` and `schemeSpectral`.

PPeter S

92% match