Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
LLittledevil7
Last edited Apr 28, 2020
Created on Apr 28, 2020

A choropleth map displays world economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

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 of global economies uses color to encode income group for each country, with an interactive color legend that filters the map when clicked. Hovering over legend items dims countries not in the selected category, while clicking toggles filtering and zooms are supported. The visualization is built with d3.js v5, using d3.geoPath and d3.geoNaturalEarth1 for geographic projection, d3.scaleOrdinal with d3.schemeSpectral for coloring, and d3.zoom for pan/zoom. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv.

CCurran Kelleher
96% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Jjesramyep1263
96% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country’s economic group, with an interactive color legend that filters the map by clicking a category. Pan and zoom via d3.zoom reveal spatial patterns, while hovering shows country names and values through SVG titles. The visualization is built with d3.geoNaturalEarth1 and d3.geoPath, using ordinal color scaling with d3.scaleOrdinal and d3.schemeSpectral. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths, with the legend updating opacity to dim unselected countries.

Llkjcbl
96% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world economies using a color gradient, with an interactive legend that filters countries by economic category. Users can zoom and pan the map, and clicking a legend entry dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.zoom for navigation. Data comes from the world-atlas TopoJSON and TSV datasets, with unemployment type and population shown in tooltips. The color scale uses d3.schemeSpectral, and legend interactions are handled through d3 event listeners.

Jjlongwellchc
96% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economies using color-coded countries, with interactive filtering through a clickable color legend. Hovering over legend items dims non-matching countries, while clicking toggles filtering and highlights selected categories. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from TopoJSON world-atlas files, with country names and economy classifications merged from TSV metadata.

Sszy1900
96% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map of world economies uses color to encode categorical economic data, with an interactive legend that filters which countries are highlighted. Clicking a legend value dims all countries not in that category while emphasizing those that match. The visualization is built with d3.geoPath and d3.geoNaturalEarth1 for map projections, d3.scaleOrdinal with schemeSpectral for coloring, and a custom colorLegend component with click handlers. Country data comes from World Atlas TopoJSON and TSV files, rendered as SVG paths.

NNico Donovan
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country's economic classification, with an interactive color legend that filters the map by category. Clicking a legend item dims non-matching countries, while a second click clears the filter; hovering over a country reveals its name and category via a title tooltip. The visualization combines d3.geoPath and geoNaturalEarth1 for map projection, d3.scaleOrdinal with schemeSpectral for colors, and d3.zoom for pan and zoom. Data comes from the World Atlas TopoJSON and TSV files.

GGiovanniD_
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode income groups. Clicking a color legend item filters the map to show only that category, dimming all other countries. The map is rendered using D3’s `geoPath` with a natural Earth projection and a spectral ordinal color scale. Interactive filtering is implemented through a custom `colorLegend` with `onClick` handlers and opacity transitions. Data is loaded from the world-atlas TSV and TopoJSON files.

Iinvertedchicken
95% match