Skip to main content
SimilarExport ZIP
100%

Choropleth map with interactive filtering

✓ Published1🌍 Public
AAmol Kulkarni
Last edited Jun 24, 2020
Created on Jun 24, 2020
Forked from Choropleth map

This choropleth map shows global economic data using a color-coded scale, where a legend allows users to filter countries by economy type. Clicking a legend entry dims non-matching countries and highlights those with the selected value; clicking again removes the filter. The visualization loads world country boundaries from TopoJSON and economic classifications from TSV data, then uses `d3.geoPath` with the Natural Earth projection to render the map. The interactive components are built on `d3.scaleOrdinal` for colors and a custom SVG-based legend with click handlers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

MMukund Khandelwal
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

MMukund Khandelwal
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a color scale, where users can click on color legend items to interactively filter the map. The map renders countries as SVG paths using `d3.geoPath` with a Natural Earth projection, while the legend employs `d3.scaleOrdinal` with a spectral color scheme. Hovering reveals country names and values via `<title>` elements. Clicking a legend category dims non-matching countries, and zooming is enabled through the `d3.zoom` module. Data originates from the world-atlas TopoJSON and TSV files.

ZZG
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economic data by country, with an interactive color legend that filters countries by economy category. Users click legend items to highlight matching countries and fade others, and they can hover over countries to see their name and value in a tooltip. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with a spectral ordinal color scale, while the legend and map both respond to clicks through D3's event handling. World country boundaries and metadata come from the world-atlas package, loaded via `d3.tsv` and `d3.json`.

Eenzo121
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows global economic data by country, with an interactive color legend that filters countries by economy category. Users click legend items to highlight matching countries and fade others, and they can hover over countries to see their name and value in a tooltip. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with a spectral ordinal color scale, while the legend and map both respond to clicks through D3's event handling. World country boundaries and metadata come from the world-atlas package, loaded via `d3.tsv` and `d3.json`.

Eenzo121
94% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic data using a color scale, with a legend allowing viewers to filter the map by clicking a specific economic category. The map uses a natural Earth projection through `d3.geoNaturalEarth1` and `d3.geoPath`, rendering country boundaries as SVG paths. Filtering dims non-selected countries and highlights the chosen one, while the legend’s interactive ticks use `d3.scaleOrdinal` and `schemeSpectral` for colors. Data is loaded from the world-atlas TSV and TopoJSON files, with interactive zoom via `d3.zoom`.

AAjayyy
94% 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

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
94% match