Skip to main content
100%

Add Detail on Click

✓ Published0🌍 Public
Aandrew-reid
Last edited Feb 25, 2017
Created on Feb 25, 2017

Clicking a region in this choropleth map of Jordan reveals the names of secondary cities and districts that are hidden by default. The map uses d3.geoAlbers to project GeoJSON administrative boundaries and labels the primary city for each region. A single click on any area triggers a smooth 400-millisecond transition that fades in the secondary-city labels; clicking again fades them out.

AI-generated description

Similar vizzes

Loading thumbnail…

clickable of choropleth ... map

This interactive choropleth map colors countries by economic classification using a natural Earth projection and a spectral color scale. Users can click legend swatches to filter highlighted countries, or click the map itself to explore regions. The visualization loads world topology and metadata from the world-atlas package, renders with SVG paths via d3.geoPath, and implements zooming through d3.zoom. A color legend module handles the clickable categorical filter, with hover states emphasizing individual countries.

YYanxxx447
70% match
Loading thumbnail…

Choropleth map with Interactive clicking

A choropleth map of world countries colored by income group, with an interactive legend that filters and highlights selected categories. The map uses a Natural Earth projection via `d3.geoPath` and `d3.geoNaturalEarth1`, rendered as SVG paths from TopoJSON world-atlas data. Clicking a legend tick toggles a color value, reducing opacity of non-matching countries and dimming the globe sphere. Zooming via `d3.zoom` and `d3.event` allows pan and scale; the legend is built with ordinal `d3.scaleOrdinal` and the `schemeSpectral` color scheme.

Jjeelong
68% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map shows countries colored by economic grouping, with a color legend that filters the map when clicked. Clicking a legend item dims unselected countries and highlights those matching the chosen category. The visualization uses d3.geoPath with d3.geoNaturalEarth1 for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Country boundaries come from the world-atlas TopoJSON dataset, with hover effects and tooltips showing country names and values.

Fftjyangf
68% match
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
68% match
Loading thumbnail…

Map with Selectable Countries

This example shows a choropleth map where clicking a country highlights it and dims all others, with a color legend on the side. It uses the d3.geoPath and d3.geoNaturalEarth1 projections to render the world map, while d3.scaleOrdinal and d3.schemeSpectral define the color encoding. Country data comes from world-atlas TSV and TopoJSON files, and interactions trigger re-rendering with updated opacity and stroke styles. The map supports zooming via d3.zoom.

Jjlspangl
68% match
Loading thumbnail…

Chloropleth Map with Interactive Filtering

A choropleth map colors countries by income group, with an interactive legend that filters the map to highlight selected categories and dim others. The map uses d3.geoEquirectangular and d3.geoPath to render countries from TopoJSON world-atlas data, while d3.zoom enables pan and zoom. The color legend, built with d3.scaleOrdinal and schemeBlues, responds to clicks to toggle selection. Hovering a country changes its fill, and a tooltip shows its name and income group.

Ccornshoots
68% match
Loading thumbnail…

Interactive Filtering on a Choropleth Map

This interactive choropleth map displays world countries colored by income group from World Atlas TopoJSON data. Users click legend ticks to filter countries, highlighting selected income categories while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering and d3.zoom for pan/zoom controls. A color legend built with d3.scaleOrdinal and schemeSpectral responds to clicks, toggling opacity and stroke width on matching countries.

JJordan Chiu
68% match
Loading thumbnail…

Chloropleth Map with interactive filtering-1

A choropleth map displays global economic classifications, with a linked color legend for interactive filtering. Clicking a legend category dims non-matching countries and highlights those selected. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths with hover effects.

Jjblaskovich
68% match