Choropleth Map with Interactive Filtering

100%

Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Oct 6, 2020

Created on Oct 6, 2020

Forked from Choropleth Map with Interactive Filtering

A choropleth map displays global economies by country, colored with a spectral ordinal scale. Users click legend items to filter the map, which highlights matching countries and dims others. The visualization uses D3 v5 with `geoPath`, `geoNaturalEarth1`, and a `zoom` interaction, alongside a custom color legend built with `scaleOrdinal` and `schemeSpectral`. Data merges TopoJSON country boundaries with TSV attributes loaded from the `world-atlas` package.

AI-generated description

A choropleth map where you can hover over items in the color legend items to interactively filter!

MIT Licensed

Similar vizzes

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economies uses color to distinguish categories, with an interactive legend enabling users to click a category and highlight matching countries while dimming the rest. Built with D3 v5, the visualization uses `geoNaturalEarth1` and `geoPath` for map projection, `scaleOrdinal` and `schemeSpectral` for coloring, and `zoom` for panning. Data comes from the World Atlas TopoJSON and TSV files. Hovering reveals country names and values via SVG `title` elements.

Jjesramyep1263

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map of global economic data, colored by country using a spectral ordinal scale, lets viewers filter countries by clicking a color legend. The map renders with an SVG projection via `d3.geoNaturalEarth1` and `d3.geoPath`, supporting pan and zoom through `d3.zoom`. Legend clicks toggle highlighting of matching countries, dimming others. Country data merges TopoJSON geometries with TSV attributes from the world-atlas dataset, and legend interactions redraw both map and legend.

Iianleekq

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by their economy category, with an interactive color legend that filters which countries remain highlighted. Built with D3 v5, it uses `geoNaturalEarth1` projection with `geoPath` for geographic rendering, `zoom` for panning and scaling, and a `scaleOrdinal` with a spectral scheme for categorical colors. Data comes from TopoJSON world-atlas files merged with TSV metadata, and clicking a legend tick dims all non-matching countries.

MMichał Szumnarski

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global economic classifications by country, with a color legend encoding each category. Clicking a legend item filters the map, dimming non-matching countries while highlighting the selected group. Hovering reveals country names and values via tooltips. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for SVG map rendering, `scaleOrdinal` with `schemeSpectral` for colors, and `zoom` for panning. Data comes from TopoJSON world-atlas merged with TSV metadata.

Wwmiao7483

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by economy group using an ordinal color scale, with a sidebar legend of clickable swatches. Clicking a legend item filters the map to highlight only countries in that category, dimming non-matching regions and adjusting opacity. The visualization uses D3 v5’s `geoPath`, `geoNaturalEarth1`, `scaleOrdinal`, and `schemeSpectral` for cartographic rendering and coloring, while the legend handles events via `on('click')`. Country data merges TopoJSON geometry with TSV attributes from the world-atlas package.

JJakub

95% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map visualizes global economies by country using an ordinal color scale based on the world-atlas TopoJSON dataset. Users can click legend entries to filter the map, highlighting matching countries while dimming others, and zoom and pan through d3.zoom. The d3.geoNaturalEarth1 projection and d3.geoPath render the SVG paths, with interactivity built via d3.scaleOrdinal, d3.schemeSpectral, and event-driven re-rendering.

NNaveenaS12

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays global income groups, coloring each country through a categorical `scaleOrdinal` with the `schemeSpectral` range. Users click legend items to filter the map, highlighting matching countries while dimming others and the sphere backdrop. The map renders via `geoNaturalEarth1`, `geoPath`, and `zoom` interactions, while the legend uses click handlers and opacity toggling. Data comes from TopoJSON world-atlas and TSV files loaded through `d3.json` and `d3.tsv`.

BBrandon Lehr

94% match

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays world economies by color, showing how countries group by income category. Users hover over color legend items to filter the map, which dims non-matching countries and highlights selected ones. The visualization uses D3 v5 APIs including `geoNaturalEarth1` and `geoPath` for map projection, `zoom` for panning, and `scaleOrdinal` with `schemeSpectral`. It loads geographic boundaries from TopoJSON and economic data from TSV in `loadAndProcessData`. Interactive legend clicks trigger opacity changes through `colorLegend`, with SVG rendering throughout.

LLittledevil7

94% match