Force-Directed Bubble Chart: Age vs. Balance

100%

Force-Directed Bubble Chart: Age vs. Balance

✓ Published0🌍 Public

Last edited Jul 25, 2023

Created on Jul 23, 2023

A force-directed bubble chart visualizes the relationship between customer age and account balance. Node sizes are scaled proportionally to account balance, and the simulation clusters circles centrally using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces. The chart is rendered as an SVG with 120 simulation ticks, and interactive tooltips display the precise age and balance values for each bubble on hover. Data is loaded via the Fetch API from a remote CSV file.

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…

Force-Directed Bubble Chart: Age vs. Balance

This force-directed bubble chart visualizes the relationship between age and financial balance for individual records, using bubble size to encode balance magnitude and color to represent job categories. The chart employs a physics-based layout where circles repel and attract each other using `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` forces, settling into a non-overlapping arrangement after 120 simulation ticks. Data is fetched from a remote CSV file, parsed into objects, and rendered as SVG circles with interactive tooltips that display the exact age and balance on hover. The visualization uses D3 v7 loaded from UNPKG, with circle positions driven by the simulation's x and y coordinates.

Ssrikkanth05

93% match

Loading thumbnail…

Heatmap Chart: Age vs. Balance

This heatmap chart visualizes the distribution of customers’ age versus balance, using a sequential viridis color scale to encode balance values. The D3 v7 code fetches CSV data from a GitHub gist, maps age and balance to linear scales, and renders each record as a circle positioned by those axes. Interactive tooltips appear on mouseover, and SVG axes, labels, and a title are drawn with d3.axisBottom, d3.axisLeft, and text elements.

Ssrikkanth05

79% match

Loading thumbnail…

D3 selection and Exploration Bubble Force Chart

This example shows a bubble force chart of music sales data, with circles sized by sales volume and clustered around a central point. The visualization loads CSV data from an external URL and renders it as SVG circles using D3.js v7. It employs `d3.forceSimulation` with `forceX` and `forceY` to gently pull points toward the center, while `forceCollide` prevents circle overlap based on their scaled radii. Users can click individual bubbles to log the corresponding data to the console, and the chart responds to window dimensions.

DDonald Bagwell

74% match

Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani

73% match

Loading thumbnail…

Bubbles - Force bounding

This example demonstrates a force-directed bubble chart that packs 21 data values into a square boundary. Fixed "boundary" nodes, positioned along the top and left edges, constrain the visible data circles within the 500x500 pixel area. The visualization uses D3 v5’s `d3.forceSimulation`, combining `forceX`, `forceY`, `forceManyBody`, and `forceCollide` to repel and pack circles without overlap, while radii are scaled with `scaleSqrt`. Each bubble is rendered as an SVG circle with a white label. The simulation runs 120 ticks before rendering, and the final layout is drawn in a single frame.

RRenan Barbosa

73% match

Loading thumbnail…

Bubble chart SparkCentral 2019: 1

A bubble chart visualizes the relative volumes of customer support conversations across platforms, with a few large labeled bubbles for named channels and many smaller unlabeled bubbles for individual interactions. The visualization uses a force-directed layout driven by `d3.forceSimulation`, combining `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to group bubbles by category while preventing overlap. Circle size encodes the `size` value from a CSV data source, and colors map categories through a `d3.scaleOrdinal`. The chart renders to SVG, with circles and text labels updated on each simulation tick.

MMisunoKitara

73% match

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

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

72% match