Choroplath Map with Interactive Filtering

100%

Choroplath Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Nov 29, 2020

Created on Nov 28, 2020

Forked from Choroplath Map with Interactive Filtering

This choropleth map displays country-level data values using an orthographic projection rendered as SVG. Users can filter the map by clicking color legend items, which dims non-selected countries and highlights matching ones. The visualization uses d3.geoOrthographic, d3.geoPath, and d3.zoom for panning and rotating, with d3.scaleOrdinal mapping values to color classes. Data comes from a CSV file joined to TopoJSON world geometry, with tooltips showing country names and values.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

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.

OOleg

90% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This interactive choropleth map shows world countries colored by name, with a clickable legend that filters the map to highlight a selected country while dimming others. The visualization uses D3 v5 with `geoNaturalEarth1` projection and `geoPath` for rendering countries, and `d3.zoom` for pan and zoom. Data combines CSV attributes with TopoJSON country boundaries, while the ordinal color scale uses `schemeSpectral`. Clicking a legend item toggles the filter, adjusting opacity and stroke width for highlighted countries.

MMukund Khandelwal

89% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map visualizes countries by economic classification, with a color legend that filters the map when clicked. Hovering over legend items highlights matching countries, while clicking isolates one category and dims others. The map uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for panning and zooming, while d3.scaleOrdinal with schemeSpectral assigns colors. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths. Interactive filtering is implemented via click handlers on legend groups, adjusting opacity and stroke width of country paths.

FFilippaNathhorst

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

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using a spectral color scale, with an interactive legend that filters the map by clicking a category to highlight it. The map loads world geometry from TopoJSON and country metadata from TSV. Built with D3 v5, it uses `d3.geoPath` with a Natural Earth projection, `d3.zoom` for panning, and SVG for rendering. Clicking a legend item toggles selection, dimming non-matching countries and emphasizing the chosen group.

Eevapavlinek

88% match

Loading thumbnail…

Colorpleth Map with interactive filtering

This interactive choropleth map visualizes economic data across countries using a color scale, with a legend allowing users to filter countries by clicking on specific values. The map renders in SVG using d3.geoOrthographic projection and d3.geoPath, while the accompanying color legend enables selection that highlights matching countries and dims others. Data comes from a CSV file merged with world atlas TopoJSON via d3.csv and topojson.feature. Users can also zoom and pan the map using d3.zoom.

Nnouralkhoury

88% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world countries colored by an economic attribute, with interactive filtering that highlights selected categories and dims others. The map uses a natural Earth projection with a shadowed sphere, while a clickable color legend controls which categories remain prominent. Built with D3 v5, the visualization uses `d3.geoPath`, `d3.geoNaturalEarth1`, and an ordinal color scale based on spectral schemes. Data is loaded from the world-atlas TopoJSON and TSV files, with zooming enabled via D3's `zoom` component.

HHasideluxe

88% match