Choropleth Map Interactivty selection

100%

Choropleth Map Interactivty selection

✓ Published0🌍 Public

Last edited Apr 11, 2020

Created on Apr 10, 2020

Forked from Choropleth Map Interactivty selection

This example demonstrates interactive filtering on a choropleth map of world economies, where clicking a color legend entry highlights matching countries and dims all others. Built with D3 v5, it renders GeoJSON features via `d3.geoMercator` and `d3.geoPath` in an SVG, with zoom support from `d3.zoom`. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and the map’s country opacity and stroke change in response to the selected value, sourced from the World Atlas TopoJSON dataset.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map Interactivty selection

This example shows an interactive choropleth map where clicking a legend category highlights matching countries and dims all others. Built with D3 v5 using `d3.geoMercator` and `d3.geoPath` for SVG rendering, it also applies `d3.zoom` for panning. The legend uses `d3.scaleOrdinal` with `schemeSpectral`, and click events toggle the selected category. Data comes from the World Atlas TopoJSON and TSV files, loaded via `Promise.all`.

MMinh Nguyen

92% 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

91% match

Loading thumbnail…

Choropleth map interactive filtering

This example presents a choropleth map of the world, where countries are colored according to their economy using a spectral color scale. The map supports interactive filtering: hovering highlights a country, and clicking a legend item dims all countries except those matching the selected economy category. The visualization is rendered as SVG using d3.geoPath with a geoNaturalEarth1 projection, while the color legend is built with d3.scaleOrdinal and d3.schemeSpectral. Country data comes from the world-atlas TopoJSON dataset, merged with TSV metadata. The zoom and pan interaction is enabled through d3.zoom, applying event.transform to the map group.

SSagar Malviya

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This example presents a choropleth map of world countries colored by economic classification, with an interactive legend that filters the map's display. Clicking a legend category highlights matching countries while dimming others; clicking again clears the filter. The visualization uses D3 v5's `geoNaturalEarth1` projection with `geoPath` for rendering, and `scaleOrdinal` with `schemeSpectral` for color mapping. Pan and zoom are enabled via `d3.zoom`. Geographic data comes from the World Atlas TopoJSON dataset, loaded and processed with `topojson.feature` and merged with TSV metadata.

Vvic126

91% match

Loading thumbnail…

Choropleth Map With Interactive Filtering

A choropleth map of world countries colored by economy, with an interactive color legend that filters the map to highlight countries in a selected category. Clicking a legend entry dims non-matching countries and increases their stroke width; clicking again clears the filter. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to render topojson country features from the world-atlas dataset, with `d3.scaleOrdinal` and `schemeSpectral` for colors.

Bbprokopowicz

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification using a categorical ordinal scale. Clicking a legend item filters the map, dimming unselected countries and highlighting the chosen category while clicking again resets the view. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map projection and rendering, with pan and zoom enabled via `d3.zoom`. Data comes from the World Atlas TopoJSON, and the legend uses SVG circles with click handlers.

Ccodexmon

91% 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

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map uses color-encoded economy classifications to visualize world countries from the World Atlas TopoJSON dataset. A spectral color scale is mapped to each country using D3’s `geoNaturalEarth1` projection and `geoPath`. Viewers can hover a legend item to filter the map, which dims non-matching countries with reduced opacity while highlighting the selected category. The example uses `d3.zoom` for panning and zooming, and the legend’s click handlers toggle the selection, updating both the map and legend transparency.

Jjubileekr

91% match