23_Choropleth Map with interactive filtering

100%

23_Choropleth Map with interactive filtering

✓ Published0🌍 Public

Last edited Dec 21, 2020

Created on Dec 21, 2020

This choropleth map displays global economies color-coded by income group, with interactive filtering via a legend that dims non-selected regions and highlights the chosen category. The visualization uses d3.geoPath and d3.geoNaturalEarth1 to render GeoJSON country features from the World Atlas TopoJSON dataset, with a d3.zoom-enabled pan and zoom. A d3.scaleOrdinal with schemeSpectral maps economy values to colors, while clickable legend ticks toggle the filter, updating opacity and stroke via the D3 general update pattern.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economies by income group, with a color legend that filters countries by category. The map renders world geography using d3.geoPath with a Natural Earth projection, while a d3.scaleOrdinal with a spectral scheme assigns colors. Clicking a legend entry dims non-matching countries and highlights the selected group, using D3 v5’s zoom behavior for panning. The visualization loads TopoJSON and TSV data from the World Atlas package and draws everything as SVG.

RRenato Francia Castillo

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economies using color-coded countries, with interactive filtering through a clickable color legend. Hovering over legend items dims non-matching countries, while clicking toggles filtering and highlights selected categories. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for map rendering, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from TopoJSON world-atlas files, with country names and economy classifications merged from TSV metadata.

Sszy1900

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode income group for each country, with an interactive color legend that filters the map when clicked. Hovering over legend items dims countries not in the selected category, while clicking toggles filtering and zooms are supported. The visualization is built with d3.js v5, using d3.geoPath and d3.geoNaturalEarth1 for geographic projection, d3.scaleOrdinal with d3.schemeSpectral for coloring, and d3.zoom for pan/zoom. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv.

CCurran Kelleher

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economies using color coding derived from world-atlas TopoJSON data, with countries shaded by income group. Users can filter the map by clicking color legend items, which highlights matching countries and dims others. The visualization uses d3.geoNaturalEarth1 projections, d3.geoPath for country outlines, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral colors. Hovering changes country fill to red, and tooltips reveal country names and values.

OOxfordComma

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to encode each country’s economic group, with an interactive color legend that filters the map by clicking a category. Pan and zoom via d3.zoom reveal spatial patterns, while hovering shows country names and values through SVG titles. The visualization is built with d3.geoNaturalEarth1 and d3.geoPath, using ordinal color scaling with d3.scaleOrdinal and d3.schemeSpectral. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths, with the legend updating opacity to dim unselected countries.

Llkjcbl

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map of world economies uses a spectral color scale to represent income groups, with a clickable color legend that filters the map by category, dimming non-selected countries. The visualization supports pan and zoom via d3.zoom, and displays country names and values as tooltips. Built with d3.v5 and the geoNaturalEarth1 projection, it renders SVG paths from TopoJSON data enriched with TSV metadata.

JJaloYang

93% 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_

93% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world economies using a color gradient, with an interactive legend that filters countries by economic category. Users can zoom and pan the map, and clicking a legend entry dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.zoom for navigation. Data comes from the world-atlas TopoJSON and TSV datasets, with unemployment type and population shown in tooltips. The color scale uses d3.schemeSpectral, and legend interactions are handled through d3 event listeners.

Jjlongwellchc

93% match