Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Choropleth Map with Interactive Filtering

✓ Published0🌍 Public
Yyihsuan
Last edited Dec 18, 2023
Created on Dec 18, 2023

This choropleth map colors world countries by their economy group, using a spectral color scale. Users can click any color legend swatch to isolate that economy category, while all other countries fade to low opacity. Hovering a country highlights it in red. The map renders with `d3.geoPath`, updated via a D3 zoom interaction, while `d3.scaleOrdinal` and `d3.schemeSpectral` drive the categorical colors. Data comes from the `world-atlas` package, joined with TSV income-group values.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This interactive choropleth map displays countries colored by their economy category, allowing users to click legend items to filter and highlight specific regions while dimming others. The visualization uses d3.geoPath with a geoNaturalEarth1 projection to render world geography, while d3.scaleOrdinal and schemeSpectral assign colors to categorical data. Hovering over countries reveals their name and economy value via SVG title elements, and d3.zoom enables panning and zooming the map. Data comes from the world-atlas TopoJSON dataset combined with a happiness CSV file.

Xxyang3672
93% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic groups, with countries colored by their economy category. Selecting a color in the legend interactively filters the map, highlighting only countries in that group while dimming the others. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projections for geographic rendering, and `d3.scaleOrdinal` with the spectral scheme for color assignment. Data comes from the world-atlas dataset, loaded via `d3.tsv` and topojson. The map supports zooming through the `d3.zoom` event handler.

Hhuashe418
92% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic data, coloring each country according to its economy category. Clicking a color in the legend filters the map to highlight only countries in that category, dimming all others. The map uses d3.geoPath with a natural Earth projection, while d3.scaleOrdinal and d3.schemeSpectral drive the color encoding. Data loads via topojson from the world-atlas package, with d3.tsv supplying the economic classifications.

KKamilPodsiadlo
92% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

A choropleth map of world economies lets users filter countries by clicking legend items, with unselected countries fading to low opacity. The map uses d3.geoPath with a geoNaturalEarth1 projection and a d3.scaleOrdinal color scale with the schemeSpectral palette, rendering as SVG. The color legend, built with custom enter/merge/exit logic, triggers updates via click handlers that toggle the selected category. Geographic data comes from world-atlas TopoJSON, paired with economic metadata from a TSV file.

Ffrozengem397
92% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies categorized by income group, with an interactive color legend that filters the map when a category is clicked. Hovering reveals country names and values via SVG title elements. The visualization uses d3.geoNaturalEarth1 projection, d3.geoPath for map rendering, and d3.zoom for panning and zooming. Data comes from the world-atlas TopoJSON and TSV files, with color mapping via d3.scaleOrdinal and d3.schemeSpectral.

Bbkopruluoglu3
92% match
Loading thumbnail…

Fork of Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic groups, color-coded through an ordinal spectral scale. Hovering over a legend item interactively filters the map, dimming all countries not belonging to that category and highlighting those that do. The visualization uses D3.js v5 with `geoNaturalEarth1` and `geoPath` for map projection, while `scaleOrdinal` and `schemeSpectral` drive the color encoding. Clicking legend entries toggles filtering by economic group, with world data sourced from the World Atlas TopoJSON and TSV files.

VVincent Oti
92% match
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This interactive choropleth map displays world economies color-coded by category, with a legend that allows users to click on a category to filter the map's display. The visualization uses a D3.js geoNaturalEarth1 projection and geoPath to render country shapes, with a sequential color scale derived from d3.schemeSpectral. Data is loaded from World Atlas. Hovering a country reveals its name and economy type. Clicking a legend item dims non-matching countries and brightens those in the selected category.

CCheng Tang
92% match
Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors world countries by their economy classification, using a spectral ordinal color scale and a natural Earth projection. The visualization supports zooming and panning through d3.zoom, and displays a custom interactive legend built with SVG circles and text. It loads geographic and economic data from the world-atlas TopoJSON and TSV files, processing them with topojson.feature and d3.tsv. Country paths are rendered via d3.geoPath, with hover highlighting and a tooltip showing the country name and economy value.

Mmgweiner
92% match