Choroplath Map with Interactive Filtering

100%

Choroplath Map with Interactive Filtering

✓ Published4🌍 Public

Last edited Nov 24, 2020

Created on Nov 12, 2020

Forked from Choroplath Map with Interactive Filtering

A choropleth map colors countries by economic classification, using a categorical color scale with seven development categories. Interactive filtering lets users click legend items to highlight countries in a selected category, dimming all others. The map renders with d3.geoPath and a natural Earth projection, while d3.zoom enables panning and zooming. Data comes from the World Atlas TopoJSON and TSV files, processed via topojson.feature.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choroplath Map with Interactive Filtering

A choropleth map colors world countries by economy category using an ordinal color scale, with a color legend that filters to a single category when clicked. The map and legend are built with D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for projection and rendering, and `d3.zoom` for pan and zoom. Data comes from the World Atlas TopoJSON and TSV files, loaded with `d3.json` and `d3.tsv`, and countries are highlighted or dimmed based on the selected color value.

OOleg

95% match

Loading thumbnail…

Choroplath Map with Interactive Filtering

This choropleth map colors countries by economic category and supports interactive filtering through a clickable legend. Selecting a legend category highlights matching countries while dimming others, and clicking again clears the selection. The map uses d3.geoNaturalEarth1 projection with d3.geoPath, while d3.zoom enables panning and zooming. Color categories are assigned via d3.scaleOrdinal with CSS classes, and the legend’s click handler toggles the filter. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG paths with tooltips showing country names and values.

Nnouralkhoury

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

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

93% match

Loading thumbnail…

Choropleth map with interactive filtering

This choropleth map displays countries colored by economic development category, with an interactive legend that filters the map when clicked. Hovering over a country reveals its name and category via a tooltip. The visualization uses d3.geoPath with a geoNaturalEarth1 projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for color mapping. Data comes from world-atlas TopoJSON and TSV files, rendered as SVG with interactive updates triggered by legend clicks.

JJames Malvern

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

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays countries colored by economic classification, with an interactive color legend allowing users to click a category and filter the map to highlight only matching countries while dimming others. Hovering reveals country names via tooltips, and the map supports zoom and pan. Built with D3 v5, it uses d3.geoPath and d3.geoNaturalEarth1 for projection, d3.scaleOrdinal with schemeSpectral for coloring, and d3.zoom for interaction. Data comes from TopoJSON world-atlas 50m, joined with TSV metadata storing economy type per country.

CChenluWang96

93% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using an ordinal color scale. Clicking a legend entry filters the map, dimming non-matching countries while highlighting the selected category. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom, with d3.scaleOrdinal and schemeSpectral for coloring. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv, rendered as SVG with clickable legend ticks.

SShabani Muswamba

93% match