Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
TTomoyukiEguchi
Last edited Jan 13, 2021
Created on Jan 12, 2021
Forked from Choropleth Map

This choropleth map displays global economic classifications by country, colored with a spectral scale. Users click legend items to highlight specific categories while dimming all others, and the map supports pan-and-zoom through d3.zoom. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country shapes from TopoJSON data loaded via d3.json and d3.tsv, with d3.scaleOrdinal and schemeSpectral for color encoding and d3.event for zoom interactions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications using color-coded countries on a natural Earth projection. Users can click legend items to filter and highlight specific categories while dimming others. The visualization uses d3.geoPath to render country shapes from TopoJSON data and d3.scaleOrdinal with a spectral color scheme. Interactive zooming is implemented with d3.zoom, while legend clicks trigger re-rendering with adjusted opacity values.

Xxsg13
95% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that enables filtering by category. Selecting a legend item highlights matching countries while dimming others, and clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world boundaries from TopoJSON data (World Atlas 50m), styled as SVG paths. The d3.scaleOrdinal with schemeSpectral drives the color encoding, while d3.zoom provides pan and zoom transformation on the map group.

CCassie
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications, with each country colored according to its economy category. Users can click items in the interactive color legend to filter the map, highlighting matching countries and dimming all others, while hovering over the legend reveals tooltips. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render the map from TopoJSON world data, and d3.scaleOrdinal with schemeSpectral to assign colors. Zoom and pan functionality are implemented via d3.zoom, and the legend filtering uses click handlers with opacity transitions.

Ppplomith
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color-coded legend that doubles as an interactive filter. Clicking a legend item highlights matching countries and dims all others on the map. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for the map projection, while d3.scaleOrdinal with schemeSpectral drives the color encoding. Hovering over legend items updates their opacity, and d3.zoom enables pan and zoom interactions. Country data comes from the World Atlas TopoJSON and TSV datasets loaded via d3.json and d3.tsv.

Ccaydener
94% match
Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that filters the map to a selected category. Users click legend items to dim non-matching countries and highlight the chosen group, while zooming is supported via d3.zoom. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render world features from TopoJSON data, with d3.scaleOrdinal and d3.schemeSpectral mapping economies to colors. Hover states change country fills to red, and tooltips show country names and values.

Ddavidcenna
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale. Users can click on legend items to filter the map, which dims non-matching countries and highlights the selected category. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world map features from a 50m TopoJSON dataset, while the color legend (built with d3.scaleOrdinal and schemeSpectral) supports interactive click-based filtering. Hovering over a country displays its name and economic value via SVG title elements.

Mmi-desai
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale. Users can click on legend items to filter the map, which dims non-matching countries and highlights the selected category. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world map features from a 50m TopoJSON dataset, while the color legend (built with d3.scaleOrdinal and schemeSpectral) supports interactive click-based filtering. Hovering over a country displays its name and economic value via SVG title elements.

Mmi-desai
94% match
Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country using color-coded regions. Users can filter the map by clicking legend categories, which dims non-matching countries and highlights those with the selected value. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render SVG map paths, while d3.scaleOrdinal and schemeSpectral assign colors. Data is loaded from world-atlas TopoJSON and TSV files, and interactions rely on the d3.event zoom and legend click handlers.

JJohnPaulPagelerJr
94% match