Chorpleth Map with Interactive Filtering

100%

Chorpleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Jun 21, 2021

Created on Nov 21, 2019

This choropleth map colors countries by their economy category using a spectral color scale, with a legend that filters the map by clicking on a category. The map renders with SVG paths via `d3.geoPath` and the Natural Earth projection, while the legend uses `d3.scaleOrdinal` and `d3.schemeSpectral` for color assignment. Interactive filtering dims non-selected countries and legend entries, and hovering reveals country names and values through SVG `title` elements. Country boundaries come from the world-atlas TopoJSON dataset merged with TSV metadata.

AI-generated description

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

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by their economy category, with an interactive color legend that filters which countries remain highlighted. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for geographic rendering, `zoom` for panning and scaling, and a `scaleOrdinal` with a spectral scheme for categorical colors. Data comes from TopoJSON world-atlas files merged with TSV metadata, and clicking a legend tick dims all non-matching countries.

MMichał Szumnarski

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economic classification using a spectral color scale, with an interactive legend that filters the map by clicking a category value. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, while d3.zoom enables panning and zooming on the SVG canvas. The legend, built with custom D3 selections, dims unselected categories and allows toggling filters. Country data comes from the world-atlas TopoJSON dataset, enriched with economic metadata from a TSV file.

Zzlastefcia

93% 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

93% 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

93% 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

93% 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

93% match

Loading thumbnail…

Choropleth Map Interactive Filtering

This choropleth map displays world countries colored by economy category using an ordinal spectral color scale. Clicking a legend category filters the map by highlighting countries in that category and dimming all others; clicking again clears the filter. The visualization uses D3 v5 APIs including `geoNaturalEarth1`, `geoPath`, `zoom`, and `scaleOrdinal` on SVG paths, with country data loaded from the world-atlas TopoJSON and TSV files. A legend built with `colorLegend` updates opacity and triggers interactive filtering.

Dddperdue

93% match