The Wealth & Health of Nations

100%

The Wealth & Health of Nations

✓ Published0🌍 Public

Last edited Aug 5, 2022

Created on Aug 5, 2022

This interactive scatterplot animates 209 years of global development, tracing each nation’s per-capita income (x-axis), life expectancy (y-axis), and population (circle radius) across time. Clicking and dragging the year slider scrubs forward and backward through the dataset, with circles colored by geographic region. The visualization uses D3 v3’s scales (log, linear, sqrt), axes, and transitions, interpolating sparse historical data from Gapminder via linear interpolation and bisection. Rendered as animated SVG elements, it recreates Hans Rosling’s famous 2006 TED talk visualization.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

wealth & health of nations

This scatterplot, titled “wealth & health of nations,” visualizes the relationship between income per capita and life expectancy across countries. Each circle represents a nation, positioned along a logarithmic x-axis for income and a linear y-axis for life expectancy. Hovering over a circle displays a tooltip with the country’s name. The chart includes labeled axes for "Income per capita" and "Life Expectancy," and the D3 v4 code uses an SVG and animation to render the data.

EElaineYu

87% match

Loading thumbnail…

CS171 - Health & Wealth of Nations

A scatterplot shows the relationship between national income and average life expectancy across countries, with bubble size representing population and color indicating world region. The visualization loads data from a CSV file and renders circles in an SVG using D3 v5, applying logarithmic and linear scales to map income and life expectancy. Animated transitions are not present, but the chart includes axis labels and a legend-less ordinal color scale for categorical region data.

Yyuva24

86% match

Loading thumbnail…

A Re-Recreation of Gapminder’s Wealth & Health of Nations - Romain Vuillemot

This interactive scatter plot recreates the classic Gapminder visualization, mapping countries as circles over time, with income per capita on the x-axis, life expectancy on the y-axis, and population encoded by circle radius. Users can drag any country circle to explore its historical trajectory, which is drawn as a gray path connecting its annual data points. The code uses D3.js v3 for SVG rendering and animation, with a custom `dragit.js` library handling the drag-and-drop interaction and trajectory display. Data is loaded from a local `nations.json` file, and a slider lets viewers scrub through years from 1800 to 2008.

Ffaversin17

86% match

Loading thumbnail…

Untitled

This visualization shows the economic and health progress of nations from 2000 to 2009, plotting income per capita against life expectancy for each country. Each circle represents a nation, with its size reflecting population and color indicating geographic region. The animation transitions through years automatically, with start and stop buttons controlling playback. The code uses d3.v2 with scales, axes, and a 30-second transition tween that interpolates yearly data from a JSON file, while enabling mouse interaction to scrub through years after the animation completes.

Jjijou31

85% match

Loading thumbnail…

Interactividad

This interactive scatter plot displays global health and economic data, plotting life expectancy against GDP per capita, with circle radius encoding population and color distinguishing continents. Built with React and D3.js v7, the visualization uses `d3.scaleLog` for the x-axis, `d3.scaleLinear` for y and radius, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The code implements enter/update/exit logic for SVG circles, enabling dynamic highlighting. Hovering over a circle triggers a custom tooltip showing country, population, GDP, and life expectancy, with other circles dimmed via `d3.selectAll` and opacity styles. Data comes from a remote rosling.json file.

Mmaxthamt

82% match

Loading thumbnail…

fresh block

This example visualizes global health and economic trends using a Gapminder-style scatterplot. Each circle represents a country, positioned by life expectancy (x-axis) and fertility rate (y-axis), with circle size encoding population and color representing geographic region. The visualization animates through years 1964 to 2013, showing how countries move across the chart as their metrics evolve. The data, loaded from a CSV, includes fields for country, year, fertility, life expectancy, population, child mortality, and GDP. Using D3 v5 and SVG rendering, the chart emphasizes the relationship between health outcomes and economic development over time, with a transition effect revealing changing distributions across decades. The visualization is minimal and functional, with axes labeling life expectancy and fertility, and a legend for regions.

JJuanma-GP

81% match

Loading thumbnail…

Data Reading & Shaping

This animated bubble chart shows the relationship between income per capita, life expectancy, and population for nations from 1800 to 2009, with bubbles colored by region. Using D3 v4 and SVG, it loads data from a JSON file, applies logarithmic and linear scales, and updates circle positions through a 2-second transition each year. A counter displays the current year as the visualization progresses through the dataset.

EElaineYu

80% match

Loading thumbnail…

Health and Wealth of Nations - Bubble Chart

A bubble chart displays the relationship between life expectancy and income for nations, using population for bubble size and region for color. The data comes from a JSON file loaded via `d3.json`, and the chart is rendered with d3fc’s cartesian chart, logarithmic x-scale, and linear y-scale. A point series with a linear size scale creates the bubbles, while a legend from `d3-legend` is positioned over the SVG plot.

CColinEberhardt

80% match