Population Bubble Chart

100%

Population Bubble Chart

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 22, 2023

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.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

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

84% match

Loading thumbnail…

Bubble Chart

A bubble chart displays the relationship between cost of living and population across five countries, with circle size encoding population and position encoding both variables. The example loads D3 v6 via UNPKG and uses SVG rendering. It constructs linear scales for the x- and y-axes, a square-root scale for circle radii, and an ordinal color scale from `d3.schemeCategory10`. Axis components are generated with `d3.axisBottom` and `d3.axisLeft`, and country labels are added as SVG text elements.

UUVarshaReddy

83% match

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

82% match

Loading thumbnail…

Population

This example displays a static bar chart of population figures for five countries, rendered as an SVG. It loads the D3 v6 library via UNPKG and uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization. Bars change color from blue to red on mouseover via D3 transitions. Population values are displayed as text labels above each bar. The chart defines its own dimensions, margins, and axes, using the hardcoded `popn` dataset.

VVenkat-Sumith-Thota

80% match

Loading thumbnail…

Scatter plots

This scatter plot displays population figures for five countries, with each circle positioned along a y-axis of country names and an x-axis of population values. The visualization uses d3.csv to load the data, converts population strings to numbers, and renders SVG circles scaled with d3.scaleLinear and d3.scalePoint. Axis creation relies on d3.axisLeft and d3.axisBottom, with tick formatting that replaces "G" with "B" for billion. The chart includes gridlines, axis labels, and a title, with styling applied via external CSS.

TTimothy sit

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

79% match

Loading thumbnail…

D3 Example

This example shows the population of the world’s five largest countries as circles, where the area of each circle encodes population size along a common horizontal axis. The chart uses D3.js version 3.5.5, with an ordinal x-scale for country names and a square-root radius scale to map population values. Rendered as SVG, it pulls data from a CSV file (`populationByCountry2015.csv`) and formats large numbers with a custom SI tick label that replaces "G" with "B".

CCurran Kelleher

79% match