Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
NNitin Vadhiya
Last edited Nov 1, 2021
Created on Nov 1, 2021

This choropleth map colors countries by economy category and lets users click color legend items to filter the map, dimming non-matching countries and highlighting the selected category. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to project the map from TopoJSON data loaded via d3.json, with d3.scaleOrdinal and d3.schemeSpectral for the color scale. The legend and map are rendered as SVG, with pan and zoom handled by d3.zoom and hover tooltips via SVG `<title>` elements.

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 colored by economy category uses color-coding to show global economic groupings, with a legend that filters countries by clicking a category or hovering to highlight. Built with D3.js v5, it projects geographic data using `d3.geoNaturalEarth1` and `d3.geoPath`, while an ordinal `scaleOrdinal` with `schemeSpectral` drives the fill colors. The map loads world atlas TopoJSON and TSV data, and the legend’s click handler toggles the selected value to adjust country opacity, with a zoom interaction via `d3.zoom`. Hovering a country turns it red, and tooltips display the country name and color value.

Ssuprithreddy267
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colored by economy category uses color-coding to show global economic groupings, with a legend that filters countries by clicking a category or hovering to highlight. Built with D3.js v5, it projects geographic data using `d3.geoNaturalEarth1` and `d3.geoPath`, while an ordinal `scaleOrdinal` with `schemeSpectral` drives the fill colors. The map loads world atlas TopoJSON and TSV data, and the legend’s click handler toggles the selected value to adjust country opacity, with a zoom interaction via `d3.zoom`. Hovering a country turns it red, and tooltips display the country name and color value.

Ssuprithreddy267
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colored by economy category uses color-coding to show global economic groupings, with a legend that filters countries by clicking a category or hovering to highlight. Built with D3.js v5, it projects geographic data using `d3.geoNaturalEarth1` and `d3.geoPath`, while an ordinal `scaleOrdinal` with `schemeSpectral` drives the fill colors. The map loads world atlas TopoJSON and TSV data, and the legend’s click handler toggles the selected value to adjust country opacity, with a zoom interaction via `d3.zoom`. Hovering a country turns it red, and tooltips display the country name and color value.

Ssuprithreddy267
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map uses colors to display the economy category of each country, with an interactive color legend that filters the map. Clicking a legend item dims all countries not in that category, while hovering over a country turns it red. Built with D3 v5, the visualization uses `geoPath` and `geoNaturalEarth1` for map projection and `scaleOrdinal` with `schemeSpectral` for coloring. The code loads world country boundaries from TopoJSON and economy data from a TSV file using `d3.tsv` and the `topojson` library.

Aankita1mit
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economy category and includes an interactive color legend for filtering. Hovering a legend item highlights matching countries and dims all others, while clicking toggles the selection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths with click-driven state updates.

JJunyanL
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors world countries by their economy category, using an ordinal color scale based on the Spectral scheme. Hovering over a country highlights it in red, while clicking a color legend item filters the map to show only countries in that category, dimming all others. Built with D3 v5, it renders countries as SVG paths using the geoNaturalEarth1 projection, and loads country boundaries and attributes from the world-atlas TopoJSON and TSV datasets. The interactive legend and zoom behavior are implemented through the D3 selection API and the custom zoom event handler.

LLaura Molina
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic grouping, with an interactive color legend that filters the map when clicked. Users can select a specific economic category to highlight those countries and dim all others, or click again to reset the view. Pan and zoom controls allow exploration of the global map. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, plus `d3.scaleOrdinal` and `d3.schemeSpectral` for color encoding. Country boundaries and metadata come from the world-atlas TopoJSON and TSV datasets.

FFernando Gonzalez - Valadez
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economy type using an ordinal color scale with a spectral scheme, drawing geographic features with d3.geoPath and a Natural Earth projection. Users can click legend items to filter the map, which dims non-selected countries and highlights the chosen category. The visualization loads world topology from TopoJSON and tab-separated metadata, and implements zooming via d3.zoom. Interactive legend and map updates are managed through D3 v5 selection methods, with hover effects on countries and click-to-toggle filtering on legend ticks.

MManishJariwala22
94% match