Bubble Testing

100%

Bubble Testing

✓ Published0🌍 Public

Last edited Nov 27, 2017

Created on Nov 27, 2017

This example visualizes character dialogue data as a force-directed bubble chart, where each circle represents a character and its size encodes total word count via `d3.scaleSqrt`. A toggle switch in the top-left corner filters the circles by sex, splitting them into two clusters or merging them back together by changing the force’s x-position. The code uses `d3.forceSimulation`, `d3.forceX`, `d3.forceCollide`, and `d3.csv` to load the data, with an animated SVG background circle loaded via `d3.xml`.

AI-generated description

forked from <a href='http://bl.ocks.org/ProQuestionAsker/'>ProQuestionAsker</a>'s block: <a href='http://bl.ocks.org/ProQuestionAsker/79d0228ae7161e349770e7d553cf4c94'>Bubble Testing</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/07365c0f28b53e44aac54c0023c77a7e'>Bubble Testing</a>

forked from <a href='http://bl.ocks.org/NicholasARossi/'>NicholasARossi</a>'s block: <a href='http://bl.ocks.org/NicholasARossi/3bd0f757a3806808359a0f21c81465dd'>Bubble Testing</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bubble Testing

The visualization shows a bubble chart of characters from a movie, where each bubble represents a character and its size corresponds to the character's total word count. The complex-looking interface includes a toggle switch that lets users flip the data between categorized and combined states, changing both bubble colors and the simulation's force dynamics. Built with D3 v4, it uses `d3.forceSimulation`, `d3.forceX`, and `d3.forceCollide` to animate bubble positions, while the toggle triggers a transition that swaps between male/female color schemes and adjusts the force's strength. The data comes from a local CSV file, and rendering is done via SVG with animated transitions.

NNicholasARossi

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

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

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

74% 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…

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

73% match

Loading thumbnail…

force directed text fit done

A force-directed layout arranges a hierarchical dataset as a bubble chart, with circle size proportional to each node’s value and text labels fitted inside. Nodes cluster by parent, while lines show parent–child links. The simulation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide`. Labels are rendered as SVG text with font sizes computed per tick and node radius. Data loads from a CSV via `d3.csv`, and colors come from `d3.scaleOrdinal(d3.schemeCategory10)`.

RRobinL

73% match