Interactive Map - Countries by Income

100%

Interactive Map - Countries by Income

✓ Published0🌍 Public

Last edited Feb 2, 2021

Created on Feb 2, 2021

Forked from Countries by Income - Choropleth Map

This interactive map displays countries color-coded by income group using a natural Earth projection. A legend to the left allows filtering by income category, dimming non-matching countries while highlighting selected ones. Built with D3 v5, the visualization uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` for panning and zooming. Country boundaries come from TopoJSON data sourced from the World Atlas, with income values joined from TSV metadata. The color scale uses `d3.scaleOrdinal` with sequential blue schemes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Countries by Income - Choropleth Map

This choropleth map colors countries by income group using an ordinal color scale with a blue scheme, showing each nation’s classification on a natural Earth projection. The visualization supports zooming and includes a custom color legend with circles and labels. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map rendering, `d3.zoom` for interaction, and `d3.scaleOrdinal` for color mapping. Data combines TopoJSON world geometry with TSV metadata from the world-atlas package.

Aannadehtiarova

90% match

Loading thumbnail…

Interactive Filtering on a Choropleth Map

This interactive choropleth map displays world countries colored by income group from World Atlas TopoJSON data. Users click legend ticks to filter countries, highlighting selected income categories while dimming others. The map uses d3.geoNaturalEarth1 projection with d3.geoPath for rendering and d3.zoom for pan/zoom controls. A color legend built with d3.scaleOrdinal and schemeSpectral responds to clicks, toggling opacity and stroke width on matching countries.

JJordan Chiu

86% match

Loading thumbnail…

Map with Selectable Countries

This interactive choropleth map displays global income groups, with countries colored by category and a legend allowing selection of specific values. Clicking a country highlights it, fades all others, and dims the sphere, while clicking the legend filters the map to matching countries. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for the map, with d3.scaleOrdinal and d3.schemeSpectral for colors, loading TopoJSON world data and TSV metadata from the world-atlas package.

Jjons288

86% match

Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Cceresfin

86% match

Loading thumbnail…

Choropleth map of income group with interactive filtering

This interactive choropleth map displays global income groups using a YlGn color scale, with each country colored according to its income classification. Users can click legend items to filter the map, dimming non-selected countries to 20% opacity while highlighting the chosen income group. Built with D3 v5, the visualization combines geoNaturalEarth1 projection with geoPath for country rendering, loads data from world-atlas TopoJSON and TSV files, and implements zoom functionality through d3-zoom's event transform. Hovering reveals country names and income values via title tooltips.

Ssherryyx

86% match

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using a natural Earth projection, with a categorical color scale and a clickable legend of colored circles. The map supports zooming and panning via d3.zoom, and country tooltips display name and income group. Built with D3 v5, it uses d3.geoNaturalEarth1 and d3.geoPath to render SVG paths from TopoJSON data loaded from world-atlas, while the legend is implemented as a custom reusable component.

TToooooooT

85% match

Loading thumbnail…

Map with Selectable Countries

This visualization presents a world map where individual countries are colored according to an ordinal income or economy classification. Users can click any country to select it, which highlights that country while dimming all others; clicking again deselects it. A color legend on the left allows filtering the map by a specific income group, similarly dimming non-matching countries. The map uses a natural Earth projection rendered as SVG paths via `d3.geoPath`, with zooming handled by `d3.zoom`. Data is loaded from the World Atlas TopoJSON and TSV files, and the color scale uses `d3.scaleOrdinal` with the spectral scheme.

ZZhi Guangda

85% match

Loading thumbnail…

Chloropleth Map

This interactive chloropleth map displays world countries colored by income group, with a legend showing the categorical color scale. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render geographic boundaries from TopoJSON world data loaded via topojson.feature, while country names and income values come from a TSV file merged by ISO code. Users can pan and zoom using d3.zoom, and hovering highlights countries in red via CSS. The ordinal color scale employs d3.scaleOrdinal with the d3.schemeSpectral palette, and a custom colorLegend component renders circles and text labels.

VVishwa246

85% match