Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
KKarkG
Last edited Aug 7, 2020
Created on Aug 5, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Choropleth Map with Interactive filtering

This choropleth map of world economies uses color to encode categorical economic data, with an interactive legend that filters which countries are highlighted. Clicking a legend value dims all countries not in that category while emphasizing those that match. The visualization is built with d3.geoPath and d3.geoNaturalEarth1 for map projections, d3.scaleOrdinal with schemeSpectral for coloring, and a custom colorLegend component with click handlers. Country data comes from World Atlas TopoJSON and TSV files, rendered as SVG paths.

NNico Donovan
96% match
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 visualizes world economies using a natural Earth projection, with each country colored by economic category through d3.scaleOrdinal and d3.schemeSpectral. Hovering highlights countries, while clicking a legend item filters the map to show only matching categories, dimming others via opacity adjustments. Built with d3.geoPath, d3.geoNaturalEarth1, and d3.zoom for panning, the data comes from TopoJSON and TSV files. The color legend uses d3 event handlers for interactive filtering.

KKurt J Nilsen
96% 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
96% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world economies by color, with an interactive legend that filters countries by economic category. Clicking a legend item dims non-matching countries while highlighting the selected group. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render TopoJSON data from the world-atlas package, while d3.scaleOrdinal with schemeSpectral assigns colors. Zoom and pan are enabled via d3.zoom, and clicking legend items toggles opacity and stroke styling through SVG attributes.

PPyRed1
96% match