Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Sep 24, 2019

Created on Sep 24, 2019

Forked from 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.

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 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.

NNitin Vadhiya

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

94% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world countries colored by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking legend items filters the map to highlight countries matching the selected economy type while dimming others, with the sphere and map regions adjusting opacity accordingly. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render topojson data from the world-atlas 50m dataset, and supports pan and zoom interactions through d3.zoom. Tooltips show country names and values via SVG title elements.

PPiotr Paszek

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

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

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

93% match

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

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by their economy category, which can be interactively filtered by clicking entries in an adjacent color legend. The map renders geographic boundaries using `d3.geoPath` with a `geoNaturalEarth1` projection, and supports panning and zooming through `d3.zoom`. Clicking a legend item, built with `d3.scaleOrdinal` and `schemeSpectral`, dims non-matching countries while highlighting the selected group. The data comes from the world-atlas TopoJSON and TSV files, with the visualization built using D3 v5 and SVG.

NNeha-1107

93% match