Income level classifications

100%

Income level classifications

✓ Published0🌍 Public

Last edited May 22, 2021

Created on May 18, 2021

This interactive choropleth map visualizes World Bank income level classifications for countries, using a purple color scale to show GDP-based categories such as low, lower-middle, upper-middle, and high income. Built with D3 v5 and topojson, it loads geographic and tabular data from `world-atlas`, projects countries with `geoNaturalEarth1` and `geoPath`, and applies a custom legend component. Hovering highlights individual countries, while the legend displays the income categories and their corresponding colors. The map provides a global view of wealth distribution, contrasting with the donut charts from the original article.

AI-generated description

Income level classifications map by 王神鐸 107753048 Original article: https://worldpopulationreview.com/countries/countries-by-gdp Reference and dataset used by article: https://blogs.worldbank.org/opendata/new-world-bank-country-classifications-income-level-2020-2021

other Data sources:https://github.com/topojson/topojson-client

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

85% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups, with each country colored according to its economic classification from the world-atlas dataset. The visualization uses a D3 v5 SVG rendering with a natural Earth projection, allowing users to pan and zoom through the interactive geoPath features. The map employs an ordinal color scale with a spectral scheme, while a custom legend (colorLegend.js) displays the categorical colors with circle markers. The data loads asynchronously from TSV and TopoJSON files via Promise.all, with country names and income group values shown as tooltips on hover.

Ccaydener

85% match

Loading thumbnail…

Choropleth Map of Income Group

This choropleth map visualizes countries color-coded by income group, using a yellow-green sequential color scale. The map renders world countries as SVG paths via `d3.geoPath` with a `geoNaturalEarth1` projection, and includes an interactive color legend built with a custom `colorLegend` component. Hovering highlights countries in red, while tooltips show the country name and income group. The visualization loads and joins geographic and tabular data from the `world-atlas` package using `Promise.all` with `d3.json` and `d3.tsv`, then processes it with `topojson.feature`.

Ssherryyx

85% match

Loading thumbnail…

Interactive Map - Countries by Income

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.

Aannadehtiarova

84% match

Loading thumbnail…

Choropleth Map

This choropleth map displays global income groups using a color scale applied to each country’s territory. The visualization employs d3.geoPath with a natural Earth projection to render the GeoJSON features, while d3.scaleOrdinal and schemeSpectral map income categories to colors. A custom color legend, built with select and merge, appears on the left. The map supports zooming via d3.zoom, and hovering highlights countries in red. Data comes from the world-atlas TopoJSON and TSV files, processed with topojson.feature.

PPiotr Paszek

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

83% match

Loading thumbnail…

Choropleth Map

This choropleth map colors world countries by income group using an ordinal color scale with a spectral scheme. The visualization supports pan and zoom interactions through d3.zoom, while d3.geoPath and a Natural Earth projection render the geographic shapes. A custom color legend component displays the categorical colors with labeled circles. Country names and income groups appear as tooltips via SVG title elements, with data loaded from the world-atlas TopoJSON and TSV files.

Aanouckstbr@gmail.com

83% match

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global income groups by coloring each country according to its income_grp property. The map uses a natural Earth projection and fills countries with colors from a spectral ordinal scale, with a background legend showing the color categories. Built with D3 v5, the code loads world geometry from TopoJSON and income data from TSV files, then renders the map as SVG paths with zoom support via d3.zoom. The color legend is implemented as a reusable component, and hovering highlights individual countries.

Aanuj1450

83% match