Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
Jjayjoepark
Last edited Mar 26, 2019
Created on Mar 26, 2019

A choropleth map displays global economic classifications by country, with a color legend that users can click to filter which regions remain fully visible. The map supports zooming and panning, while hovering reveals country names and values via tooltips. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering SVG paths, and `d3.zoom` for interaction. Data comes from TopoJSON world atlas files joined with TSV metadata, with `d3.scaleOrdinal` and `schemeSpectral` assigning colors.

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…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with a color legend encoding each category. Clicking a legend item filters the map, dimming non-matching countries while highlighting the selected group. Hovering reveals country names and values via tooltips. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for SVG map rendering, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from TopoJSON world-atlas merged with TSV metadata.

Wwmiao7483
96% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Jjesramyep1263
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by an economic attribute, with interactive filtering that highlights selected categories and dims others. The map uses a natural Earth projection with a shadowed sphere, while a clickable color legend controls which categories remain prominent. Built with D3 v5, the visualization uses `d3.geoPath`, `d3.geoNaturalEarth1`, and an ordinal color scale based on spectral schemes. Data is loaded from the world-atlas TopoJSON and TSV files, with zooming enabled via D3's `zoom` component.

HHasideluxe
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic classification, with an interactive color legend allowing users to click a category and filter the map to highlight only matching countries while dimming others. Hovering reveals country names via tooltips, and the map supports zoom and pan. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for interaction. Data comes from TopoJSON world-atlas 50m, joined with TSV metadata storing economy type per country.

CChenluWang96
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic classifications using a color scale based on world-atlas TopoJSON data. Users can click legend items to highlight countries matching that category while dimming others, and hover effects further emphasize individual countries. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.zoom for panning and zooming, and d3.scaleOrdinal with schemeSpectral for color encoding. The legend and map are built as separate SVG components that re-render when the selection changes.

Ggcappadaniel
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map visualizes global economic data by country, with color encoding based on a scale domain. The map supports interactive filtering: users click entries in a color legend to highlight matching countries and dim all others, while a hover effect is also present. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for map projections. Data processing uses the `topojson` library to convert TopoJSON data for rendering. The map displays world country outlines from a world-atlas dataset, with a tooltip showing country names and values.

Ddaigokawabe
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications per country, with a natural Earth projection and color-coded fill based on categorical data. Users interactively filter the map by clicking color legend items, which dims all non-selected countries and reduces the sphere’s opacity. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.zoom`, with topojson loading world-atlas data. Hovering a country reveals its name and value via a tooltip, while the legend highlights the active selection.

FFlorian Breitwieser
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications per country, with a natural Earth projection and color-coded fill based on categorical data. Users interactively filter the map by clicking color legend items, which dims all non-selected countries and reduces the sphere’s opacity. The visualization uses D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.scaleOrdinal`, and `d3.zoom`, with topojson loading world-atlas data. Hovering a country reveals its name and value via a tooltip, while the legend highlights the active selection.

FFlorian Breitwieser
95% match