Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
Ssakhabutdinov
Last edited Feb 29, 2020
Created on Jan 12, 2020
Forked from Choropleth Map

A choropleth map displays countries colored by their economy category, with an interactive color legend for filtering. Clicking a legend category highlights only matching countries in full color while dimming others. The visualization uses d3.scaleOrdinal with schemeSpectral for color encoding and d3-geo projections for rendering SVG paths from TopoJSON world data. The legend implements click handling and opacity filtering, while hover states change country fill colors.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with an interactive color legend that filters the map by hovering or clicking on a category. The d3-scaleOrdinal and schemeSpectral color scale map each economy type to a distinct color, while d3-geoPath and geoNaturalEarth1 render the world geometry from TopoJSON data. Clicking a legend item dims non-matching countries and highlights the selected group, with zoom support via d3.zoom. The map uses SVG and d3.v5 for all rendering and interaction.

Zzhangfa
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, reducing the opacity of non-matching countries and highlighting the selected category. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world features from TopoJSON data, while d3.zoom enables panning and zooming on the SVG. Hovering a country turns it red via CSS.

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

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economy group, with an interactive color legend that filters the map by hover or click. Clicking a legend item highlights matching countries and dims the rest, while clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for country shapes, d3.scaleOrdinal with a schemeSpectral range for coloring, and loads world data from the world-atlas package. A d3.zoom interaction supports panning and zooming the map.

Ccaydener
94% match
Loading thumbnail…

Choropleth Map With Interactive Filtering

A choropleth map of world countries colored by economy, with an interactive color legend that filters the map to highlight countries in a selected category. Clicking a legend entry dims non-matching countries and increases their stroke width; clicking again clears the filter. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render topojson country features from the world-atlas dataset, with `d3.scaleOrdinal` and `schemeSpectral` for colors.

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

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economy group using an ordinal color scale, with a sidebar legend of clickable swatches. Clicking a legend item filters the map to highlight only countries in that category, dimming non-matching regions and adjusting opacity. The visualization uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` for cartographic rendering and coloring, while the legend handles events via `on('click')`. Country data merges TopoJSON geometry with TSV attributes from the world-atlas package.

JJakub
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using a D3 ordinal color scale, then allows interactive filtering through hover-adjacent clicks on the legend. The map renders with SVG and a natural Earth projection via `d3.geoPath`, while the legend items toggle opacity and highlight matching countries. Users can zoom and pan using `d3.zoom`, and the map loads world geometry from TopoJSON with economy data from a TSV file.

TThomas Seberechts
94% match