Fork of Choropleth Map with Interactive Filtering

100%

Fork of Choropleth Map with Interactive Filtering

✓ Published0🌍 Public

Last edited Jan 20, 2021

Created on Jan 20, 2021

Forked from 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.

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…

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

96% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies using a color scale, with an interactive legend that filters countries by clicking on color categories to highlight or dim them. The map supports pan and zoom through d3.zoom, while d3.geoNaturalEarth1 and d3.geoPath render the geographic shapes from TopoJSON data loaded via d3.json and d3.tsv. Hovering reveals country names and values through SVG title elements, and the legend uses d3.scaleOrdinal with a spectral scheme.

SSuzizaher

96% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes countries colored by economy category using a natural Earth projection. Users can click legend items to filter the map, highlighting matching countries while dimming all others, and can also zoom and pan the SVG view. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for map rendering, with a d3.scaleOrdinal and schemeSpectral for color encoding. It loads geographic and metadata from the World Atlas TopoJSON and TSV datasets, while the color legend enables interactive filtering through click handlers.

Ggalyniayaroshenko

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

95% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies using color-coded countries, with an interactive legend that filters the map by clicking on a category while dimming non-matching regions. Built with D3 v5, it uses `geoNaturalEarth1` and `geoPath` for the map projection, `scaleOrdinal` with `schemeSpectral` for coloring, and `zoom` for panning. Hovering reveals country names via `title` elements. Data comes from the world-atlas TopoJSON dataset, enriched with a TSV file of economy classifications. The SVG rendering synchronizes legend and map states through shared `selectedColorValue` events.

NNYCUBK201

95% match

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

95% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays global economic data by country, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching regions while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering, and d3.zoom for panning. The legend employs scaleOrdinal with schemeSpectral colors, and onClick handlers toggle selection. Data comes from world-atlas TopoJSON and TSV files, processed via topojson.feature, with SVG output.

RRoland

95% match

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map displays world economies, with countries colored according to their economic classification using an ordinal color scale and the `schemeSpectral` palette. Users can interactively filter the map by clicking legend items, which dims non-matching countries and highlights the selected category. The visualization uses `d3.geoPath` with the `geoNaturalEarth1` projection, `topojson` for geographic data, and supports zooming via `d3.zoom`. A color legend with clickable circles controls the filtering, while hover tooltips reveal country names and values.

EElena Momtcheva

95% match