Skip to main content
SimilarExport ZIP
100%

Bubble Chart

✓ Published0🌍 Public
UUVarshaReddy
Last edited Jul 21, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

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.

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 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
91% 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
83% 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
81% 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
80% 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
79% match
Loading thumbnail…

D3 Country Bubble Chart

This bubble chart displays each country as a circle scaled by population, with hover tooltips showing the country name and population. Interactive radio buttons switch between grouping modes—combining all bubbles, clustering by continent, positioning at country centers, or sorting by population—and toggle circle fills between continent colors and country flag patterns. The visualization uses d3.forceSimulation with custom force configurations for each grouping, d3.scaleSqrt for radius scaling, and SVG patterns for flag fills. It loads data from a CSV file and animates transitions between the different layouts.

AAnnie Chang
78% match
Loading thumbnail…

D3 Example

This example visualizes population totals for the world’s five largest countries using area-encoded circles. It shows a bubble chart where each circle’s radius scales with population, with countries positioned along an ordinal x-axis. The visualization uses D3.js version 3.5.5 to load a CSV file via `d3.csv`, apply a square-root scale for radii, and render SVG circles with an axis. The code employs `d3.scale.ordinal` and `d3.scale.sqrt` to map data, and custom tick formatting replaces "G" with "B" for billions.

CCurran Kelleher
78% match
Loading thumbnail…

Let's make a face with D3.js!

This chart displays the population of the top 10 most populous countries using a bubble plot, with circle size fixed and position encoding population along the x-axis and country along the y-axis. The data is loaded from a CSV file and processed before rendering. Built with D3.js v5, the visualization uses `d3.scaleLinear`, `d3.scalePoint`, `d3.axisLeft`, and `d3.axisBottom` to construct the SVG elements, with circles styled in steel blue via CSS.

Rrenjiez
77% match