Gapminder GDP per Capita (Scatter Plot)

100%

Gapminder GDP per Capita (Scatter Plot)

✓ Published0🌍 Public

Last edited Oct 4, 2025

Created on Oct 4, 2025

This scatter plot visualizes the change in per-capita GDP for various countries from 1800 to 2100. A logarithmic scale on the y-axis reveals the wide range of economic output, from under 500 to over 25,000 dollars, with individual points representing a country-year pair. Built using D3 v7, the visualization uses `csvParse` to load the wide-format Gapminder Foundation data, transforms it into a long format, and renders each data point as a semi-transparent circle, with linear and log scales for the temporal and GDP axes, respectively.

AI-generated description

Gapminder GDP per Capita This dataset, sourced from the Gapminder Foundation, provides Gross Domestic Product per capita (GDP) for various countries over a long period of time. The data is structured in a "wide" format, with each country as a row and each year as a column, making it ideal for visualizing trends and comparisons.

Source URL: https://www.gapminder.org/data/

Attribute Descriptions country: Categorical (The name of the country).

Years (1800 through 2100): Quantitative and Temporal (The GDP per capita value for each corresponding year).

MIT Licensed

Similar vizzes

Loading thumbnail…

Gapminder GDP per Capita

This example loads a Gapminder GDP dataset in wide format and displays the raw parsed data as JSON in the browser. It uses D3 v7’s `csvParse` to convert the CSV into an array of objects, then transforms string values like `"10.1k"` into numeric GDP per capita figures. The visualization fetches the remote CSV via `fetch`, processes the year columns from 1800 to 2100, and relies on a state management pattern with a `setState` function to trigger re-renders. The current implementation is a data-loading scaffold, not a finished chart.

Sskasliwal@wpi.edu

80% match

Loading thumbnail…

New_Scatter_Plot

This scatter plot displays the relationship between GDP per capita and population for countries, using World Bank data. The visualization uses red, semi-transparent circles to represent each country, with axes showing population in millions and GDP per capita in thousands. Built with D3 v7, the code applies `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and renders the plot as SVG. The chart includes gridlines, axis labels, and a title, with data loaded via `csv` from a GitHub-hosted dataset.

Mmartin

77% match

Loading thumbnail…

countries GDP in 2015 or before

This scatter plot visualizes countries' population and GDP from a 2015-or-earlier dataset, with each circle representing a country. The x-axis maps population in millions, while the y-axis shows GDP in millions of USD. The chart uses D3’s scaleLinear, extent, axisLeft, and axisBottom to construct axes. Circles are rendered via SVG, and each includes a title element showing detailed country data on hover. The reusable scatterPlot function, inspired by Towards Reusable Charts, is configured with margin, radius, and text value setters. The code loads CSV data from a GitHub repository using d3.csv.

KKerim

77% match

Loading thumbnail…

New Scatter Plot

This scatter plot visualizes worldwide GDP versus population for 1980, with each circle representing a country and tooltips revealing GDP per capita. The code loads CSV data from a GitHub gist using D3 v7’s `csv` loader, then renders an SVG with `scaleLinear`, `axisLeft`, and `axisBottom`. Axis ticks are formatted via a custom `numMaker` utility that converts large numbers into abbreviated units (e.g., “B” for billions). Circle tooltips use D3’s `title` element, driven by React-free DOM selection and data joins.

Aadventuresenglish.info@gmail.com

77% match

Loading thumbnail…

Bham block 1

A scatterplot of Gapminder data shows average GDP per capita against life expectancy for each country, with circle size encoding population and color indicating the region. The visualization uses D3 v4 to load the CSV and append SVG circles, scaling positions with `d3.scaleLinear` for the x- and y-axes and determining radius from the raw population value. Country labels and axis annotations are commented out, leaving the bare plot unadorned.

CCartophile

77% match

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This example plots global economic growth using a scatter plot of GDP per capita against time. Each small blue circle represents a single country's GDP value for a given year. The visualization uses a logarithmic y-axis scale to handle the wide range of data values, revealing trends across nations from 1800 to 2100. The code combines React's state management with D3.js v7, using `scaleLog` for the axis, `scaleLinear` for time, and `csvParse` to transform the loaded Gapminder dataset into a long format for plotting.

Sskasliwal@wpi.edu

76% match

Loading thumbnail…

Basic Scatter Plot

This scatter plot shows the relationship between GDP per capita and year for seven selected countries—China, the United States, India, Japan, Russia, Brazil, and France—between 1990 and 2014. Each circle represents a country-year observation, colored by country, with axis labels and a color legend. The visualization uses D3 v4’s scaleLinear, axisBottom, axisLeft, and legendColor APIs, rendering SVG circles. Data comes from Our World in Data, filtered from a CSV file containing internet usage, GDP, and population metrics.

QQ-Zhao

76% match

Loading thumbnail…

Gapminder Total Pop v Income per Cap Slider test

This interactive scatterplot displays total population versus income per capita for countries from 1950 to 2015, based on Gapminder data summarized from a CSV file. A slider filters the dataset by year, updating the displayed points. The visualization uses React with D3 v5 scales and SVG rendering for axes and circles, with tooltips showing country names via the SVG `title` element.

Llakalia@wpi.edu

75% match