Choropleth Map Interactivty selection

100%

Choropleth Map Interactivty selection

✓ Published3🌍 Public

Last edited Apr 15, 2020

Created on Apr 7, 2020

This choropleth map displays countries colored by economy type, with a linked color legend for interactive selection. Clicking a legend category highlights matching countries and dims others, while clicking again clears the selection. The map uses a Mercator projection via d3.geoPath and geoMercator, with world data from the world-atlas TopoJSON and TSV files. Zooming is enabled through d3.zoom, and the legend uses ordinal color scaling with d3.scaleOrdinal and schemeSpectral.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map Interactivty selection

This example visualizes the World Bank’s country-level economy classifications on a choropleth map. Users can select a specific economy class from the color legend, which highlights matching countries and dims all others, while hovering over a country reveals its name and economic category. Built with d3.js v5, the map uses the `geoMercator` projection and `geoPath` to render country shapes from TopoJSON data. The legend, implemented with `scaleOrdinal` and `schemeSpectral`, enables interactive filtering through mouse clicks.

SSophia Murage

92% match

Loading thumbnail…

Chloropleth Map Interactive

This interactive choropleth map displays world countries colored by their economic classification using an ordinal color scale. Users can click legend items to filter and highlight countries matching the selected economy type, with non-matching countries fading to low opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering country boundaries as SVG paths, with d3.zoom enabling pan and zoom interactions. Data comes from TopoJSON world atlas files, while the interactive legend is built with custom d3 selections and click handlers.

IIsabel

92% match

Loading thumbnail…

Chloropleth Map Interactive

A choropleth map shows world countries colored by economy type, with a legend that filters and highlights selected categories. The visualization supports zooming and panning, and dims non-selected countries while emphasizing those matching the chosen economy. It uses d3.geoPath with the geoNaturalEarth1 projection to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Country data comes from world-atlas TopoJSON and TSV files, with hover effects and a clickable color legend for interaction.

MMaxwell Dayvson da Silva

91% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economy category and includes an interactive color legend for filtering. Hovering a legend item highlights matching countries and dims all others, while clicking toggles the selection. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for geographic projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG paths with click-driven state updates.

JJunyanL

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

91% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays world countries colored by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking legend items filters the map to highlight countries matching the selected economy type while dimming others, with the sphere and map regions adjusting opacity accordingly. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render topojson data from the world-atlas 50m dataset, and supports pan and zoom interactions through d3.zoom. Tooltips show country names and values via SVG title elements.

PPiotr Paszek

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economy group, with an interactive color legend that filters the map by hover or click. Clicking a legend item highlights matching countries and dims the rest, while clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection for country shapes, d3.scaleOrdinal with a schemeSpectral range for coloring, and loads world data from the world-atlas package. A d3.zoom interaction supports panning and zooming the map.

Ccaydener

90% match

Loading thumbnail…

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.

Mmaru25-alt

90% match