Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
GGuan
Last edited Sep 13, 2024
Created on Sep 13, 2024

This choropleth map visualizes world countries colored by their economic group, with an interactive color legend that filters the map to show only countries in a selected category. Clicking a legend entry dims non-matching countries to 10% opacity while highlighting the selected group, and clicking again resets the view. The visualization uses d3.geoPath with a natural Earth projection, d3.scaleOrdinal with a spectral color scheme, and loads country boundaries and metadata from the world-atlas package. A zoom interaction is also included, allowing users to pan and scale the map.

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…

Fork of Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic grouping using a categorical color scale. Users can click legend items to filter the map, dimming non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and a tooltip displaying country names and values.

Iion.cojoc@gmail.com
95% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes countries colored by economy category using a natural Earth projection. Users can click legend items to filter the map, highlighting matching countries while dimming all others, and can also zoom and pan the SVG view. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map rendering, with a d3.scaleOrdinal and schemeSpectral for color encoding. It loads geographic and metadata from the World Atlas TopoJSON and TSV datasets, while the color legend enables interactive filtering through click handlers.

Ggalyniayaroshenko
94% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economy type, with an interactive color legend that filters the map when clicked. Hovering over legend items dims non-matching countries, while selected countries are highlighted and the sphere fades to emphasize the filter. Built with d3.v5, it uses d3.geoNaturalEarth1, d3.geoPath, d3.scaleOrdinal, and d3.zoom for panning and zooming, rendering as SVG from TopoJSON world-atlas data.

NNICHAPA
94% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications using a natural Earth projection, with countries colored according to their income group. Users can click color legend entries to filter the map, dimming unselected regions while highlighting matching ones, with zoom and pan support. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render country features from TopoJSON world-atlas data, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Interactive filtering is handled through click events on the legend, which toggles the selected color value and updates fill opacity and CSS highlighting.

KKamal Bahadur Rana
94% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays worldwide economic classifications by country, with a color legend that doubles as an interactive filter. Clicking a legend item dims all countries except those matching the selected category, while hovering over the map highlights individual nations. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project geographic features from the World Atlas TopoJSON dataset, with d3.scaleOrdinal and schemeSpectral mapping economic groups to colors. The legend implements click handlers for filtering, while d3.zoom enables panning and zooming. The black background and SVG rendering complete the presentation.

AAlpineStranger
94% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes world countries colored by economic classification, with an interactive color legend that filters the map when clicked. Hovering a country reveals its name and value via a tooltip, and the map supports zooming and panning. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for the map, while `scaleOrdinal` with `schemeSpectral` maps data values to colors. Data is loaded from the World Atlas TopoJSON and TSV files, and filtering updates both map and legend opacities in real time.

Qqliu50@fordham.edu
93% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color legend that doubles as an interactive filter. Clicking a legend item dims all countries except those matching the selected category, while hovering over the map highlights a country in red. The visualization uses D3 v5’s `scaleOrdinal` with a spectral color scheme and `geoPath` with the Natural Earth projection to render the map. Country boundaries and income data come from the world-atlas TopoJSON, and spatial interaction is handled by D3’s `zoom` event system.

VVincent Oti
93% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications with an interactive color legend that filters countries by category. Clicking a legend item highlights matching countries while dimming others, and clicking again removes the filter. The map uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and zoom behavior, while the legend leverages `scaleOrdinal` with `schemeSpectral` colors. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG with hover tooltips showing country names and values.

Vvivianaaai@qq.com
93% match