Skip to main content
SimilarExport ZIP
100%

Choropleth Map with Interactive Filtering

✓ Published1🌍 Public
Ssuprithreddy267
Last edited Apr 2, 2020
Created on Apr 2, 2020

A choropleth map colored by economy category uses color-coding to show global economic groupings, with a legend that filters countries by clicking a category or hovering to highlight. Built with D3.js v5, it projects geographic data using `d3.geoNaturalEarth1` and `d3.geoPath`, while an ordinal `scaleOrdinal` with `schemeSpectral` drives the fill colors. The map loads world atlas TopoJSON and TSV data, and the legend’s click handler toggles the selected value to adjust country opacity, with a zoom interaction via `d3.zoom`. Hovering a country turns it red, and tooltips display the country name and color value.

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 colored by economy category uses color-coding to show global economic groupings, with a legend that filters countries by clicking a category or hovering to highlight. Built with D3.js v5, it projects geographic data using `d3.geoNaturalEarth1` and `d3.geoPath`, while an ordinal `scaleOrdinal` with `schemeSpectral` drives the fill colors. The map loads world atlas TopoJSON and TSV data, and the legend’s click handler toggles the selected value to adjust country opacity, with a zoom interaction via `d3.zoom`. Hovering a country turns it red, and tooltips display the country name and color value.

Ssuprithreddy267
100% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colored by economy category uses color-coding to show global economic groupings, with a legend that filters countries by clicking a category or hovering to highlight. Built with D3.js v5, it projects geographic data using `d3.geoNaturalEarth1` and `d3.geoPath`, while an ordinal `scaleOrdinal` with `schemeSpectral` drives the fill colors. The map loads world atlas TopoJSON and TSV data, and the legend’s click handler toggles the selected value to adjust country opacity, with a zoom interaction via `d3.zoom`. Hovering a country turns it red, and tooltips display the country name and color value.

Ssuprithreddy267
100% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map uses colors to display the economy category of each country, with an interactive color legend that filters the map. Clicking a legend item dims all countries not in that category, while hovering over a country turns it red. Built with D3 v5, the visualization uses `geoPath` and `geoNaturalEarth1` for map projection and `scaleOrdinal` with `schemeSpectral` for coloring. The code loads world country boundaries from TopoJSON and economy data from a TSV file using `d3.tsv` and the `topojson` library.

Aankita1mit
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economy category and lets users click color legend items to filter the map, dimming non-matching countries and highlighting the selected category. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to project the map from TopoJSON data loaded via d3.json, with d3.scaleOrdinal and d3.schemeSpectral for the color scale. The legend and map are rendered as SVG, with pan and zoom handled by d3.zoom and hover tooltips via SVG `<title>` elements.

NNitin Vadhiya
95% 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

This choropleth map colors world countries by their economy category, using an ordinal color scale based on the Spectral scheme. Hovering over a country highlights it in red, while clicking a color legend item filters the map to show only countries in that category, dimming all others. Built with D3 v5, it renders countries as SVG paths using the geoNaturalEarth1 projection, and loads country boundaries and attributes from the world-atlas TopoJSON and TSV datasets. The interactive legend and zoom behavior are implemented through the D3 selection API and the custom zoom event handler.

LLaura Molina
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with an interactive color legend that filters the map by hovering or clicking on a category. The d3-scaleOrdinal and schemeSpectral color scale map each economy type to a distinct color, while d3-geoPath and geoNaturalEarth1 render the world geometry from TopoJSON data. Clicking a legend item dims non-matching countries and highlights the selected group, with zoom support via d3.zoom. The map uses SVG and d3.v5 for all rendering and interaction.

Zzhangfa
95% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

LLittledevil7
94% match