Skip to main content
100%

Bubble attempt Mambo #5

✓ Published0🌍 Public
Aalexhoke
Last edited Apr 17, 2018
Created on Apr 17, 2018

A force-directed bubble chart animates 38 Salmonella isolates, with each circle positioned by a D3 v4 force simulation and sized by the number of AMR genes (ranging from 0 to 6). Circles are colored by serotype using a categorical color scale, and hovering reveals the isolate ID, serotype, and gene count in a tooltip. The animation cycles through data keys, updating circle positions and sizes through collision forces, demonstrating a playful "cartogram" style re-layout of the microbial data.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/greenmna/'>greenmna</a>'s block: <a href='http://bl.ocks.org/greenmna/58a26dc56edbe1c2592bb62b78b4c1bd'>Bubble attempt Mambo #5</a>

mit Licensed

Similar vizzes

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
74% 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
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
71% 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
71% match
Loading thumbnail…

Org Bubbles

Org Bubbles visualizes a 13-node organizational hierarchy as a force-directed bubble chart, using data from a CSV with ID, PID, level, and type fields. The D3 v4 code builds an SVG with circles and connecting lines, using `d3.forceSimulation` with forces for links, collision, many-body charge, and center attraction to create a dynamic, draggable layout. Interactive buttons group all bubbles together or split them by location, type, or organization, while the simulation animates the repositioning and fades link strokes.

TTa-Moon-A
71% match
Loading thumbnail…

D3 JS BUBLES

This visualization displays a set of fifteen animated bubbles moving vertically in a sinusoidal wave pattern, with their radii oscillating as they travel across the screen. The circles are rendered as SVG elements using D3 v7, with the data generated procedurally through a sine function that updates each frame. A `setInterval` timer drives the animation at approximately 60 frames per second, recalculating each bubble's `cx`, `cy`, and `r` attributes continuously. The example demonstrates basic D3 data joins and transitions without interaction.

TTehran Mammadov
70% match
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
70% match
Loading thumbnail…

Force-Based Cartogram to Bubble Chart

This interactive visualization morphs a force-based cartogram of U.S. county demographics into a bubble chart using the same underlying data. Built with D3 v4 and SVG animation, it leverages the forceSimulation engine to transition between the two representations: initially, each county appears as a geographic-shaped region whose size reflects population, then seamlessly animates into circular bubbles for comparison. The transformation highlights demographic distributions across counties, with the force simulation preserving spatial relationships while shifting visual encoding. The example is implemented as an SVG animation and includes census-derived demographic data from Duke University.

Aalexhoke
70% match