Skip to main content
SimilarExport ZIP
100%

clickable of choropleth ... map

✓ Published1🌍 Public
YYanxxx447
Last edited Jan 13, 2021
Created on Jan 13, 2021
Forked from 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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters map regions by clicking legend items. The visualization combines a world map rendered with d3.geoPath and d3.geoNaturalEarth1, a colorLegend with clickable circles, and d3.zoom for panning and zooming. Country data comes from the world-atlas TopoJSON and TSV datasets, with hover highlighting and tooltips showing country names and values.

CClara Hu
91% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with a natural Earth projection rendered as SVG paths. An interactive legend allows users to click individual color categories, though the selection only logs to the console rather than filtering the map. The visualization loads world topology from the world-atlas TopoJSON dataset and joins country names from TSV data. The choropleth uses d3.geoPath, d3.scaleOrdinal with schemeSpectral, and d3.zoom for panning and zooming, while the custom colorLegend module handles the clickable legend UI.

Yyejichun@naver.com
90% match
Loading thumbnail…

Choropleth Map with interactive filtering

A choropleth map colors countries by economic classification, with a categorical color legend that doubles as a filter. Clicking a legend category dims non-matching countries and highlights the selected class, while zoom and pan are enabled via d3.zoom. The map uses d3.geoPath with a Natural Earth projection, rendering TopoJSON data from the World Atlas, and d3.scaleOrdinal with schemeSpectral assigns colors. Hover styling also highlights individual countries.

NNkwachi Abel
90% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by their economic classification using a spectral color scale, with an interactive legend that filters the map by clicking a category value. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to project and draw the geographic features, while d3.zoom enables panning and zooming on the SVG canvas. The legend, built with custom D3 selections, dims unselected categories and allows toggling filters. Country data comes from the world-atlas TopoJSON dataset, enriched with economic metadata from a TSV file.

Zzlastefcia
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 with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters which countries remain highlighted. Clicking a legend item dims all countries not in that category, while clicking the same item again clears the filter. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering SVG paths, d3.scaleOrdinal with a spectral scheme for coloring, and d3.zoom for pan and zoom. Data comes from the world-atlas TopoJSON and TSV datasets, loaded via d3.json and d3.tsv.

Llystran
89% 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
89% match
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays world countries colored by economic classification, with an interactive color legend that filters the map when clicked. Hovering reveals country names and values via tooltips, while non-selected countries and legend items fade to low opacity. The visualization uses d3.geoNaturalEarth1 with d3.geoPath for projected SVG rendering, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from the world-atlas TopoJSON and TSV files, processed through topojson.feature. Clicking a legend item toggles filtering on that value.

Wwindwardpassage
89% match