Skip to main content
SimilarExport ZIP
100%

my Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
Jjlspangl
Last edited Oct 21, 2021
Created on Oct 21, 2021

This choropleth map displays world countries colored by their income group using an ordinal color scale. Users can click on legend items to highlight or filter specific categories, with unselected groups fading to 20% opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for geographic rendering, while d3.zoom enables pan and zoom interactions. Data comes from the World Atlas TopoJSON dataset, combined with TSV metadata for country attributes. The visualization is built with D3 v5 and rendered as SVG elements, with hover effects that turn countries red.

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

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

Choropleth Map with Interactive Filtering

This example presents an interactive choropleth map of the world, coloring countries according to their income group using an ordinal color scale. Users can click a legend item to filter the map, dimming all countries that do not match the selected income group, and click again to clear the filter. The visualization uses D3’s `geoNaturalEarth1` projection and `geoPath` for rendering map shapes, with zooming enabled via the `zoom` API. Data is loaded from the World Atlas TopoJSON and TSV files, processed using the `topojson` library, and rendered as SVG in a React-based workflow.

MMatthew Rubino
94% 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
93% match