Bubble Chart: All Data

100%

Bubble Chart: All Data

✓ Published0🌍 Public

Last edited Nov 1, 2022

Created on Nov 1, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

Untitled

A bubble chart displays countries as circles positioned by GDP per capita (x-axis) and life expectancy (y-axis), with circle size encoding population. Each bubble is colored by continent, drawn as SVG circles using `d3.forceSimulation` with custom forces for positioning. The code loads data from a JSON array and uses `d3-scale-chromatic` for categorical color mapping. Hovering a bubble changes its stroke from white to black via CSS.

JJoker-tr

84% match

Loading thumbnail…

Chart Controls III

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.

11Cr18Ni9

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

82% match

Loading thumbnail…

fresh block

This example visualizes global health and wealth data as a bubble chart, where each circle represents a country positioned by life expectancy (y-axis) and GDP per capita (x-axis), with circle size encoding population and color encoding continent. It uses D3 v4’s scales (`scaleLinear`, `scaleLog`, `scaleSqrt`, `scaleOrdinal`) to map variables and renders SVG circles with axes labeled accordingly. The code loads CSV data via `d3.csv` and applies sorting by population, while styling uses opacity and a light grey background. The chart focuses on comparing country-level indicators, with axes labeled in French.

CClaraGriot

82% match

Loading thumbnail…

Bubble Chart

This bubble chart maps countries by cost of living on the x-axis and population on the y-axis, with bubble radius encoding population using a square-root scale. The visualization uses d3.scaleLinear for axes, d3.scaleSqrt for bubble size, and d3.scaleOrdinal with d3.schemeCategory10 for categorical coloring. SVG circles and text labels are positioned via xScale and yScale, with d3.axisBottom and d3.axisLeft rendering the axes. The data is a static array of five country records, rendered as semi-transparent colored bubbles to compare living expenses against population size.

VVenkat-Sumith-Thota

82% match

Loading thumbnail…

Bubble Chart GDP by Country

This bubble chart displays GDP by country for 2016, with each bubble’s size encoding the GDP value and its color indicating the region. The visualization is built with D3 v5 using the `d3.pack` layout and `d3.hierarchy` to structure the data, rendered as SVG circles with text labels. Tooltips appear on mouseover, showing the country name and formatted GDP. The data is loaded via `d3.csv` from a World Bank dataset hosted in a GitHub gist.

663anp3ca

82% match