Fork of Choroplath Map with Interactive Filtering

100%

Fork of Choroplath Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Feb 23, 2021

Created on Feb 23, 2021

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

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choroplath Map with Interactive Filtering

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.

AAndres de la Garza

93% match

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

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

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

92% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This interactive choropleth map displays the world’s countries colored by their economic classification, with a color legend that filters the map when clicked. Clicking a legend value highlights corresponding countries and dims all others; clicking again clears the filter. Hovering a country reveals its name and value in a tooltip. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country paths, and a custom `colorLegend` module for the clickable legend. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG.

CClara Hu

91% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with an interactive color legend that filters the map when clicked. Hovering reveals country names and values via tooltips. Built with D3 v5, it uses `d3.geoPath` with the Natural Earth projection and `d3.scaleOrdinal` with the Spectral scheme. The data comes from the World Atlas TopoJSON and TSV files, and the code employs `d3.select`, `d3.event`, and a `zoom` function for panning and zooming.

Hhberrong

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

91% match