Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
TTaric Ov
Last edited May 7, 2022
Created on May 7, 2022

This choropleth map displays global economic classifications by country, with colored regions projected using a natural Earth projection. Users can click legend items to filter the map, highlighting matching countries while dimming others, and can zoom and pan the visualization. The example uses d3.geoPath and d3.geoNaturalEarth1 for map rendering, d3.zoom for interaction, and d3.scaleOrdinal with schemeSpectral for coloring, loading geographic data from the World Atlas TopoJSON dataset alongside TSV metadata.

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 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
96% 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
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
95% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic data by country, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching regions while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering, and d3.zoom for panning. The legend employs scaleOrdinal with schemeSpectral colors, and onClick handlers toggle selection. Data comes from world-atlas TopoJSON and TSV files, processed via topojson.feature, with SVG output.

RRoland
95% 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
95% 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 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
94% 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
94% match