Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
JJoker-tr
Last edited Oct 31, 2019
Created on Oct 31, 2019

A choropleth map displays global economic classifications, with countries colored via an ordinal spectral scale from World Atlas TopoJSON and TSV data. Hovering a legend item filters the map, dimming non-matching countries to 0.1 opacity and highlighting matches, while clicking toggles the filter. Built with `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, the SVG renders country paths and a custom color legend with interactive `onClick` handlers.

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

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification using a categorical ordinal scale. Clicking a legend item filters the map, dimming unselected countries and highlighting the chosen category while clicking again resets the view. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map projection and rendering, with pan and zoom enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON, and the legend uses SVG circles with click handlers.

Ccodexmon
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 colors countries by economic classification using an ordinal color scale. Clicking a legend entry filters the map, dimming non-matching countries while highlighting the selected category. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom, with d3.scaleOrdinal and schemeSpectral for coloring. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv, rendered as SVG with clickable legend ticks.

SShabani Muswamba
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification, with a linked legend that filters the map when a category is clicked. Hovering over the legend dims non-matching countries to 10% opacity, while the selected category is highlighted. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning, alongside a custom ordinal `scaleOrdinal` with the `schemeSpectral` range. Map data comes from the World Atlas TopoJSON and TSV files.

Kkb1ngram4
95% 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
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
94% 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
94% match