Gapminder GDP per Capita

100%

Gapminder GDP per Capita

✓ Published1🌍 Public

Last edited Oct 4, 2025

Created on Aug 31, 2025

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.

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 (Scatter Plot)

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.

Sskasliwal@wpi.edu

80% match

Loading thumbnail…

Gapminder Life Expectancy Data

This example loads a Gapminder life expectancy dataset in wide format and displays the raw parsed data as a JSON preview. It fetches `data.csv`, converts year columns to numbers, and handles values with a "k" suffix by multiplying by 1000. The visualization uses D3 v7's `csvParse` and `select` to manage asynchronous data loading and rendering. It demonstrates a data-loading workflow where the state tracks loading status and updates the view accordingly, without yet showing a chart.

Sskasliwal@wpi.edu

78% match

Loading thumbnail…

Gapminder Clone

This interactive visualization recreates the classic Gapminder chart, plotting GDP per capita against life expectancy for countries over time from 1800 to 2014. Users can filter by continent via a custom dropdown menu and animate the progression through years with a play button. The code uses D3 v7 scales, axes, and transitions for the SVG rendering, with a tooltip displaying country details on hover. Data is loaded as JSON from an external GitHub source, and a custom dropdown module handles the continent selection.

AAdan Rodriguez

76% match

Loading thumbnail…

demo

This interactive D3.js visualization displays GDP per capita trends from 1960 to 2023 for multiple countries using a dataset loaded from a GitHub CSV file. It renders grouped bar charts for each country-year combination, with axes, dashed grid lines, and hover tooltips to highlight values. The code uses D3 v7’s `d3.csv`, `d3.scalePoint`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeCategory10` for color encoding, producing an animated SVG view of economic changes over time.

Vvenkatabhaskaratetali@my.unt.edu

75% match

Loading thumbnail…

Loding and Parsing GDP and GDP per capita

This example demonstrates the initial steps of working with GDP and GDP per capita data from UNDATA, displaying basic dataset statistics such as row count, column count, and file size in a large text format. The page loads a CSV file from a GitHub gist using D3 v5’s `d3.csv` method, then computes the metrics with `data.length`, `data.columns.length`, and `d3.csvFormat` to measure the formatted size. A commented-out alternative using `fetch` with `async`/`await` and `d3.csvParse` is also provided. The visualization focuses on data loading and parsing rather than graphical representation.

Rrohame

74% match

Loading thumbnail…

Loading US GDP Data

This example demonstrates the asynchronous loading and parsing of a CSV file containing US GDP data, displaying the resulting data structure as JSON in a `<pre>` element. Initially showing "LOADING" and then the parsed array of objects, it fetches the dataset from a Gist URL, uses `d3.csvParse` to parse the CSV, and converts numeric fields like `date`, `level_current`, and `change_chained` to numbers. The visualization relies on the `d3` library for DOM selection and CSV parsing, with the data structured according to the BEA-sourced fields from datahub.io.

SSeekerzero

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

71% match

Loading thumbnail…

GDP per capita

This visualization shows GDP per capita trends for continents from 1970 onward, highlighting values on hover. It uses Vega-Lite APIs to build layered line, rule, and text marks, with interactive selection via `vl.selectSingle()`. Data is loaded asynchronously from a CSV via d3’s `csv` function, filtered to selected regions and series. The chart is rendered with Vega’s SVG renderer, and a guide title and labels are customized through the config object.

Rrohame

71% match