Skip to main content
SimilarExport ZIP
100%

Bubble Chart

✓ Published0🌍 Public
VVenkat-Sumith-Thota
Last edited Jul 16, 2023
Created on Jul 16, 2023
Forked from Hello VizHub

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.

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…

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
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
86% 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
84% match
Loading thumbnail…

A5_BubbleChart

This visualization shows life expectancy across various countries using a bar chart with a sequential color scale. The chart maps average life expectancy values to a light-to-dark green gradient, with color intensity and bar height both encoding the data. Built with D3 v7 and rendered as SVG, it uses d3.scaleSequential with d3.interpolateRgb for coloring, d3.scaleBand for the x-axis, and d3.legendColor from the d3-legend library for the legend. The data comes from a CSV file hosted on GitHub containing country-level expectancy metrics.

DDuc Pham
82% 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
81% 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
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
79% 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
79% match