Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Jjijou31
Last edited Mar 4, 2020
Created on Mar 4, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

The Wealth & Health of Nations

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.

Aabhineetsingh10
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
80% 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…

Untitled

An interactive bar chart displays GDP per capita for a selection of countries, with bars rendered as SVG rectangles. Hovering over a bar highlights it in orange and displays a label with the country name and value, while a checkbox button toggles sorting of the bars in descending order. The visualization uses d3.v4 scales, axes, and transitions for animation, with data hardcoded in a JavaScript array and styled via CSS classes.

Ppriyankab23
79% match
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
79% 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
79% 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
79% 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
78% match