Chart Controls III

100%

Chart Controls III

✓ Published0🌍 Public

Last edited Jan 13, 2017

Created on Jan 13, 2017

This chart animates four dimensions of global development data—life expectancy, fertility rate, population, and time—using a bubble chart. Each circle represents a country, positioned by life expectancy and fertility rate, with size encoding population via a power scale. The animation steps through years, transitioning all circles simultaneously. A dropdown menu filters the display by region. The visualization is built with D3 v3, using `d3.scale.pow` for sizing, `d3.nest` to group data by year, and the `d3.timer` function to drive transitions. Data comes from the included `lfp_all.csv` file.

AI-generated description

Built with blockbuilder.org

Forked from D3byEx.

There are more interactive with data. If there are more elements than the data, the extra elements(circles) will move up to top and dispared with zero radius.

The origin example uses linear scale to size circles, while I set it to pow scale. All the fancy is come from the timer function.

mit Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart: All Data

This bubble chart displays global life expectancy against GDP per capita, with bubble size representing population and color indicating continent. The visualization includes an interactive tooltip showing country names on hover, plus a legend for population scale. Built with D3 v4, it uses SVG circles, d3.scaleLinear for axes, d3.scaleSqrt for bubble sizing, and d3.scaleOrdinal with d3.schemeSet1 for color mapping. The chart reads data from a CSV of three numeric variables per country and adds hover effects to highlight individual data points.

SSimon Hackbert

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

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

80% match

Loading thumbnail…

fresh block

This example animates the classic Gapminder bubble chart, mapping fertility, life expectancy, and population over time. It uses D3 v5 to render SVG circles, with x position encoding GDP per capita, y position encoding life expectancy, and circle size encoding population, while color distinguishes world regions. The chart plays through decades of country-level data, showing how nations move across the socioeconomic landscape as development indicators shift.

AAitorCCE

79% match

Loading thumbnail…

Bubble Chart

This bubble chart maps countries’ birth rates to the x-axis and life expectancy to the y-axis, with bubble size scaled by population. The visualization uses D3 v6’s `scaleLinear` for positioning and `scaleSqrt` for radius, while an ordinal color scale distinguishes countries. Each circle is rendered as an SVG element with a dark blue text label, and the chart includes standard `axisBottom` and `axisLeft` axes. The sample dataset is embedded directly in the code, and the visualization is presented in a 700x450 pixel container.

VVenkat-Sumith-Thota

79% match

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

78% match

Loading thumbnail…

Module6

This visualization uses birth-rate data from 2000–2013 for 39 countries to show how national rates change over time. A time slider scrubs through the years, with each country represented by a small circle positioned along a vertical axis. The current year is highlighted in a large display, and country labels fade or emphasize as the user drags the slider. The chart is rendered using D3 v3 with SVG, presenting a clean, static-scale line-and-dot layout that lets viewers compare relative birth rates across countries and track temporal trends.

CClevejones

78% match

Loading thumbnail…

Population Bubble Chart

This example visualizes population data for five countries as a bubble chart, mapping birth rate to the x-axis, life expectancy to the y-axis, and population to the size of each circle. Drawn as SVG circles with country labels, the chart also includes axes. The code uses D3 v6 scales (`d3.scaleLinear`, `d3.scaleSqrt`, `d3.scaleOrdinal`) with `d3.schemeCategory10` for colors and `d3.axisBottom` and `d3.axisLeft` to render the axes.

VVenkat-Sumith-Thota

77% match