Skip to main content
SimilarExport ZIP
100%

Fork of Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
Hhberrong
Last edited Mar 5, 2021
Created on Mar 5, 2021

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.

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

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies categorized by income group, with an interactive color legend that filters the map when a category is clicked. Hovering reveals country names and values via SVG title elements. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for map rendering, and d3.zoom for panning and zooming. Data comes from the world-atlas TopoJSON and TSV files, with color mapping via d3.scaleOrdinal and d3.schemeSpectral.

Bbkopruluoglu3
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 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
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by income group, with a legend that filters the map when clicked. Selecting a category dims non-matching countries and highlights the selected group, while the legend also remains interactive. Built with d3.geoPath and d3.geoNaturalEarth1 projection, it loads geographic data from the world-atlas TopoJSON dataset and supports zooming via d3.zoom. The color legend renders SVG circles and text with click handlers, using d3.scaleOrdinal with the color schemeSpectral. Hovering over a country turns it red, and tooltips show the country name and income value.

Ffloresh
93% 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
93% match