Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Oct 2, 2018

Created on Oct 2, 2018

Forked from Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a D3.js SVG rendering with an interactive color legend. Users can click legend entries to filter countries by their economic classification, while the map highlights the selected category and dims others. The visualization uses `d3.geoPath` with a natural Earth projection to draw country boundaries and a sequential color scale based on the spectral scheme. World country data and properties are loaded from the World Atlas TopoJSON and TSV files, with zoom and pan functionality powered by `d3.zoom`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

MMukund Khandelwal

100% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic data using a color scale, where users can click on color legend items to interactively filter the map. The map renders countries as SVG paths using `d3.geoPath` with a Natural Earth projection, while the legend employs `d3.scaleOrdinal` with a spectral color scheme. Hovering reveals country names and values via `<title>` elements. Clicking a legend category dims non-matching countries, and zooming is enabled through the `d3.zoom` module. Data originates from the world-atlas TopoJSON and TSV files.

ZZG

96% match

Loading thumbnail…

Choropleth Map with Interactive filtering

This choropleth map displays global economic classifications by country, with an interactive color legend that enables filtering by category. Selecting a legend item highlights matching countries while dimming others, and clicking again clears the filter. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world boundaries from TopoJSON data (World Atlas 50m), styled as SVG paths. The d3.scaleOrdinal with schemeSpectral drives the color encoding, while d3.zoom provides pan and zoom transformation on the map group.

CCassie

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters the map to highlight a selected category while dimming others. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders country paths with `d3.geoPath` in an SVG. Users can click legend circles to toggle filtering, and a zoom behavior (`d3.zoom`) enables panning and scaling. Data comes from the World Atlas TopoJSON and TSV files, with colors mapped using `d3.scaleOrdinal` and `schemeSpectral`.

Ssriramvsharma

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with an interactive legend that filters highlighted regions. Users can click legend items to dim non-matching countries and emphasize selected categories, while zoom and pan are enabled via d3.zoom. The visualization uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath for rendering SVG paths, and d3.scaleOrdinal with a spectral color scheme. Data comes from the world-atlas TopoJSON dataset, with country names and economy values loaded from TSV metadata.

JJuyeonee

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays global economic classifications by country, with a color legend that doubles as an interactive filter. Clicking a legend item dims all countries not in that category, while hovering over a highlighted country reveals its name and value via a native SVG tooltip. The map uses an orthographic natural Earth projection rendered as SVG paths, with zoom and pan enabled through d3.zoom. Data comes from the World Atlas TopoJSON and TSV files, processed with topojson.feature and d3.tsv. The color scale uses d3.scaleOrdinal with the Spectral scheme.

Ssuprithreddy267

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map displays country-level economic data using a color scale, with a legend allowing viewers to filter the map by clicking a specific economic category. The map uses a natural Earth projection through `d3.geoNaturalEarth1` and `d3.geoPath`, rendering country boundaries as SVG paths. Filtering dims non-selected countries and highlights the chosen one, while the legend’s interactive ticks use `d3.scaleOrdinal` and `schemeSpectral` for colors. Data is loaded from the world-atlas TSV and TopoJSON files, with interactive zoom via `d3.zoom`.

AAjayyy

95% match

Loading thumbnail…

Choropleth map with interactive filtering

This choropleth map shows global economic data using a color-coded scale, where a legend allows users to filter countries by economy type. Clicking a legend entry dims non-matching countries and highlights those with the selected value; clicking again removes the filter. The visualization loads world country boundaries from TopoJSON and economic classifications from TSV data, then uses `d3.geoPath` with the Natural Earth projection to render the map. The interactive components are built on `d3.scaleOrdinal` for colors and a custom SVG-based legend with click handlers.

AAmol Kulkarni

94% match