Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
ZZG
Last edited Sep 16, 2020
Created on Sep 16, 2020

This choropleth map displays global economic data using a color scale, where users can click on color legend items to interactively filter the map. The map renders countries as SVG paths using `d3.geoPath` with a Natural Earth projection, while the legend employs `d3.scaleOrdinal` with a spectral color scheme. Hovering reveals country names and values via `<title>` elements. Clicking a legend category dims non-matching countries, and zooming is enabled through the `d3.zoom` module. Data originates from the world-atlas TopoJSON and TSV files.

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 country-level economic data using a color scale, with a legend allowing viewers to filter the map by clicking a specific economic category. The map uses a natural Earth projection through `d3.geoNaturalEarth1` and `d3.geoPath`, rendering country boundaries as SVG paths. Filtering dims non-selected countries and highlights the chosen one, while the legend’s interactive ticks use `d3.scaleOrdinal` and `schemeSpectral` for colors. Data is loaded from the world-atlas TSV and TopoJSON files, with interactive zoom via `d3.zoom`.

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

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

MMukund Khandelwal
96% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

MMukund Khandelwal
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 shows global economic data by country, with an interactive color legend that filters countries by economy category. Users click legend items to highlight matching countries and fade others, and they can hover over countries to see their name and value in a tooltip. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with a spectral ordinal color scale, while the legend and map both respond to clicks through D3's event handling. World country boundaries and metadata come from the world-atlas package, loaded via `d3.tsv` and `d3.json`.

Eenzo121
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economic data by country, with an interactive color legend that filters countries by economy category. Users click legend items to highlight matching countries and fade others, and they can hover over countries to see their name and value in a tooltip. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with a spectral ordinal color scale, while the legend and map both respond to clicks through D3's event handling. World country boundaries and metadata come from the world-atlas package, loaded via `d3.tsv` and `d3.json`.

Eenzo121
95% match