Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published1🌍 Public

Last edited Jun 10, 2020

Created on Jun 10, 2020

This choropleth map displays global economic classifications, with each country colored according to its economy category from a tsv-loaded world-atlas dataset. A color legend allows users to click a category, which filters the map by dimming non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render SVG paths, with d3.zoom for pan and zoom interactions. Color encoding is handled by d3.scaleOrdinal with d3.schemeSpectral, while data loading uses d3.tsv, d3.json, and topojson.feature.

AI-generated description

income_grp economy

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map visualizes global economic classifications using a color-coded world map, with a legend that filters countries by economy type. Users can click a legend category to highlight matching countries and dim others, and can click again to clear the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render country boundaries from World Atlas TopoJSON and TSV data. Color assignments use d3.scaleOrdinal with the schemeSpectral palette, while d3.zoom enables panning and scaling. The SVG rendering includes hover effects that change country fill to white.

Ccheeson

96% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that enables filtering by category. Selecting a legend item highlights matching countries while dimming others, and clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world boundaries from TopoJSON data (World Atlas 50m), styled as SVG paths. The d3.scaleOrdinal with schemeSpectral drives the color encoding, while d3.zoom provides pan and zoom transformation on the map group.

CCassie

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes world economies by color-coding countries according to their economic classification. Users can click legend categories to filter the map, highlighting matching countries while dimming others; clicking again resets the filter. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering, while d3.scaleOrdinal with d3.schemeSpectral supplies the color scale. Data comes from the world-atlas dataset, loaded via d3.tsv and topojson.feature.

KKarkG

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color-coded legend that doubles as an interactive filter. Clicking a legend item highlights matching countries and dims all others on the map. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for the map projection, while d3.scaleOrdinal with schemeSpectral drives the color encoding. Hovering over legend items updates their opacity, and d3.zoom enables pan and zoom interactions. Country data comes from the World Atlas TopoJSON and TSV datasets loaded via d3.json and d3.tsv.

Ccaydener

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country's economic classification, with an interactive color legend that filters the map by category. Clicking a legend item dims non-matching countries, while a second click clears the filter; hovering over a country reveals its name and category via a title tooltip. The visualization combines d3.geoPath and geoNaturalEarth1 for map projection, d3.scaleOrdinal with schemeSpectral for colors, and d3.zoom for pan and zoom. Data comes from the World Atlas TopoJSON and TSV files.

GGiovanniD_

95% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map shows global economic classifications, with countries colored by category. Clicking a legend entry filters the map, dimming non-matching countries and highlighting the selected one while zooming and panning remain available. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering, and d3.zoom for interaction. Data comes from the World Atlas TopoJSON and TSV files, with a d3.scaleOrdinal and schemeSpectral colormap driving the legend and fills.

MMatthiasVanCampen

95% match

Loading thumbnail…

Choropleth Map with interactive filtering

This choropleth map visualizes global economies using a categorical color scale, with countries colored by their economic classification. The map supports interactive filtering through a clickable color legend, which selects a specific economy category. The visualization uses d3.geoPath and d3.geoNaturalEarth1 for map projection, d3.zoom for pan-and-zoom navigation, and a d3.scaleOrdinal with the d3.schemeSpectral palette. Data is loaded via d3.tsv and topojson from the World Atlas dataset, and the map is rendered as SVG elements.

Aaidanoconnor1

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color legend that doubles as an interactive filter. Clicking a legend item dims all countries not in that category, while hovering over a highlighted country reveals its name and value via a native SVG tooltip. The map uses an orthographic natural Earth projection rendered as SVG paths, with zoom and pan enabled through d3.zoom. Data comes from the World Atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv. The color scale uses d3.scaleOrdinal with the Spectral scheme.

Ssuprithreddy267

94% match