bubble one more time

100%

bubble one more time

✓ Published0🌍 Public

Last edited Apr 28, 2019

Created on Apr 28, 2019

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/lydiawawa/'>lydiawawa</a>'s block: <a href='http://bl.ocks.org/lydiawawa/347e2b0aeed51d7dc56fde40b08e5fcd'>bubble one more time</a>

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

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

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

77% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

76% match

Loading thumbnail…

Bubble Chart

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.

PPranay Matalia

76% match

Loading thumbnail…

D3 Notebook: Playing With Bubble Charts

This example builds an interactive bubble chart from cereal nutritional data, letting viewers toggle between different measurements like calories, protein, fat, and sugar. Each cereal is represented as a circle whose size encodes the selected value, and the SVG bubbles gently animate when the category changes. The visualization is implemented with D3 v4, uses a force simulation to position the bubbles, and is styled with a single blue color at partial opacity, with a light blue outline for each circle. The dataset is loaded from a CSV file and bound to the circles using D3's data join. The chart offers a simple, playful way to explore multivariate nutrition data through direct manipulation.

663anp3ca

76% match

Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani

75% match

Loading thumbnail…

Bubble Chart in D3

This bubble chart visualizes breakfast cereal data, plotting calories on the x-axis against weight on the y-axis. It uses D3 v7 with an SVG rendering approach, loading the dataset from a GitHub gist via `d3.csv`. The chart employs `scaleLinear` for both axes and renders them with `axisBottom` and `axisLeft` on an SVG group element, including a title and subtitle. The code sets explicit margins and dimensions, demonstrating a clean, static scatter-style bubble chart without any interaction or animation.

EEunice Tu

74% match