Skip to main content
SimilarExport ZIP
100%

Bubble Chart

✓ Published2🌍 Public
PPranay Matalia
Last edited Mar 1, 2022
Created on Mar 1, 2022
Forked from HTML Starter

This bubble chart visualizes the relationship between age, BMI, and insurance charges for roughly 250 individuals, with gender distinguishing the data points. The x-axis maps age while the y-axis shows BMI, and circle radius encodes the magnitude of insurance charges. The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleLinear` for axes and `d3.scaleOrdinal` to color points by gender. A legend displays the minimum and maximum charge values alongside color swatches for male and female categories, with data loaded from an external CSV file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bubble Chart

This bubble chart visualizes the relationship between age and BMI for approximately 250 individuals, with circle size encoding insurance charges and color distinguishing gender. Built with D3 v7 in a React-agnostic HTML page, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for male/female coloring, and `Math.sqrt` to map charges to radius. Data loads asynchronously from a CSV file via `d3.csv`, and the SVG rendering includes custom axes, labels, and a legend showing size and color ranges.

AArun Pratap
93% match
Loading thumbnail…

Age vs BMI Bubble Chart

This visualization is a multidimensional scatter plot that maps age on the x-axis against BMI on the y-axis for approximately 250 individuals, with each bubble’s size encoding insurance charges and its color indicating gender. The chart uses a D3 v7 selection with data binding to append SVG circles, scaled with `d3.scaleLinear` for axes and `d3.scaleOrdinal` for the male/female color mapping. A legend explains bubble size ranges and gender colors, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is loaded asynchronously from a CSV file using `d3.csv`.

VVishnu Sudireddy
89% match
Loading thumbnail…

Qualitative Bubble Chart

This bubble chart visualizes the relationship between age and BMI for roughly 500 individuals, with color encoding gender. The SVG rendering uses d3.scaleLinear for both axes and d3.scaleOrdinal with a custom color range to distinguish male and female data points. The code loads data from a CSV via d3.csv and positions circles using xScale and yScale. A d3-legend legend is added for gender, and both axes are generated with d3.axisBottom and d3.axisLeft.

PPranay Matalia
86% match
Loading thumbnail…

assignment 2 4q

This multidimensional scatter plot maps age and BMI for roughly 250 individuals, encoding insurance charges through circle radius and gender through color. The visualization uses D3 v7 with linear scales for both axes, an ordinal color scale for male/female categories, and square-root scaling to size circles proportionally to charges. Rendered as SVG, the chart includes axes with tick formatting, a legend showing charge minimum and maximum values, and example male/female colored dots, with data loaded asynchronously from a CSV file hosted on GitHub.

HHarshiiiiiiiip
82% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between age and insurance charges using data loaded from a CSV file. D3.js v7 scales map age and charge values to SVG circle positions, with axes labeled and a title displayed. The visualization uses d3.csv to fetch external data, d3.scaleLinear for both x and y domains, and d3.axisBottom and d3.axisLeft to render the axes. The SVG rendering approach draws each data point as a small blue circle.

PPranay Matalia
81% match
Loading thumbnail…

Assignment 2 Question 5

This visualization shows how insurance charges relate to age, BMI, and sex using a scatter plot. The chart animates every 5 seconds, cycling its x-axis between patient age, insurance charges, and BMI, while the y-axis consistently displays insurance charges. Data points are color-coded blue for males and red for females. Built with D3 version 6.7.0, it uses `scaleLinear`, `axisLeft`, and `axisBottom` from the library and loads data from a local CSV file, rendering as an animated SVG.

MMichael Biancardi
81% match
Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes the relationship between age and BMI using an insurance dataset, with each point colored by species. The visualization uses D3 v6 with SVG rendering, loading data from a GitHub gist via `d3.csv` and parsing numeric values. Axes are generated with `axisLeft` and `axisBottom`, while `scaleLinear` maps data domains to pixel ranges. Circle marks are drawn using `selectAll` and `join`, with axis labels styled via SVG text elements in a React-friendly HTML page.

SSrujana390
76% match
Loading thumbnail…

bubble one more time

A force-directed bubble chart displays individual BMI measurements grouped by race and sex, with circle radius proportional to BMI value and color encoding racial categories. Using D3 v3 and SVG rendering, the visualization loads data from a CSV file and applies a cluster force layout with collision detection to arrange bubbles into distinct groups. The code implements custom `cluster` and `collide` functions alongside the `d3.layout.force` simulation, while a tooltip on mouseover reveals each bubble's race, BMI, and sex. Circles are colored via an ordinal scale and positioned through the force layout's tick handler.

GGerardoFurtado
76% match