Skip to main content
SimilarExport ZIP
100%

Fork of Choroplath Map with Interactive Filtering

✓ Published0🌍 Public
AAndres de la Garza
Last edited Mar 26, 2021
Created on Mar 26, 2021

This interactive choropleth map colors countries by economic classification using a categorical color scale and topojson data from the World Atlas. Users click the color legend to filter the map, which dims non-matching countries and highlights the selected category via the `onClick` handler. Pan and zoom are enabled with `d3.zoom` and `d3.geoNaturalEarth1` projection for the SVG paths. The legend and map communicate through a shared `selectedColorValue` state, with opacity transitions driven by the color scale.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map presents world countries colored by economic classification, with an interactive color legend that filters highlighted regions on click and hover. Users can zoom and pan the map, while clicking a legend category dims non-matching countries and re-clicking clears the filter. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map projection, `d3.zoom` for navigation, and `d3.scaleOrdinal` with `schemeSpectral` for coloring. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG paths with tooltips.

Aarbekos
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
Loading thumbnail…

Fork of Choroplath Map with Interactive Filtering

A choropleth map of world countries colored by economic development category, using D3 v5 with an SVG rendering and a natural Earth projection. Users can click legend items to filter and highlight countries matching the selected development group, with non-matching countries faded to low opacity. The visualization loads geographic data from the World Atlas TopoJSON and joins it with TSV metadata, implementing interactive zooming via `d3.zoom` and user-controlled selection through a custom color legend with `d3.scaleOrdinal`.

EErik Gimbergsson
93% 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 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
93% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a natural Earth projection, with a color-coded legend that filters the map when clicked. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render geographic features from TopoJSON world-atlas data, while `scaleOrdinal` and `schemeSpectral` assign colors. Clicking a legend item dims non-matching countries and highlights the selected category; hovering reveals country names and values via SVG `<title>` elements. Pan and zoom are enabled through the `zoom` behavior.

PPiotr Paszek
93% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering F

This choropleth map displays global country-level economic classifications using an ordinal color scale. Users can click legend items to highlight matching countries and dim all others, with a second click clearing the filter. The map uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for pan/zoom interaction, with SVG rendering. Data comes from the world-atlas TopoJSON dataset, joined to TSV metadata. The legend and map are both rendered with D3 selections, and hover effects highlight individual countries.

Ffsajedi22
92% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering F

A choropleth map visualizes countries by their economic classification, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching countries and dim others, while hovering over map regions reveals the country name and value in a tooltip. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for panning and zooming, and a `d3.scaleOrdinal` with `d3.schemeSpectral`. Data comes from the World Atlas TopoJSON and TSV files, with panning handled via SVG transforms.

Ffsajedi22
92% match