Skip to main content
SimilarExport ZIP
100%

Bubbles gallery #1

✓ Published0🌍 Public
PPatrick Wojda
Last edited May 29, 2018
Created on May 28, 2018

A paginated gallery cycles through six kitten photos from placekitten.com, displaying three at a time as circular thumbnails. The `update` function uses D3’s `transition` API to animate new bubbles growing from zero to their full size while exiting bubbles shrink and are removed. Click handlers on the "previous" and "next" buttons rotate the dataset, wrapping around to create a loop.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Bubbles gallery #2 - opacity

A gallery of six kitten photos cycles through three visible bubbles, with previous and next buttons shifting the window and wrapping around. Each bubble displays a background image at full opacity after a fade-in transition; clicking a button fades existing bubbles to 0.2 opacity, swaps in new images, and resizes alternating bubbles to 100 or 175 pixels. The code uses d3.transition with a custom end-of-transition callback to sequence the opacity change, and d3.select to bind click handlers for navigation.

PPatrick Wojda
89% match
Loading thumbnail…

animated distortion

A single kitten image is displayed on an SVG canvas, with its appearance continuously shifting through two different distortion effects. The visualization alternates between two SVG filters, each combining a `feTurbulence` fractal noise generator with a `feDisplacementMap` to warp the image’s pixels. A recursive `setTimeout` function in plain JavaScript toggles the active filter every 400 milliseconds for ten iterations, creating a rhythmic pulsing distortion. The code uses D3 v4 for SVG selection and attribute manipulation, while the image itself is loaded from an external placeholder service.

PPatrick Wojda
68% match
Loading thumbnail…

Bubble Update Pattern I

This example demonstrates the general update pattern for D3 selections applied to a bubble chart layout, showing how entering, updating, and exiting circles and labels are handled as data changes. Using the D3 v4 pack layout, it joins data to circle and text elements, then animates transitions: exiting circles shrink and fade, updating elements smoothly move and resize, and entering circles grow from a tiny radius while text fades in. The code relies on `d3.hierarchy`, `d3.pack`, and `d3.transition`, with data randomized by the jeezy utility. The visualization cycles every 1.5 seconds, repeatedly shuffling the alphabet subset and updating the chart accordingly.

GGerardoFurtado
67% 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
67% match
Loading thumbnail…

hexagon clip + blend

A grid of kitten images, each clipped to a hexagon shape, is arranged in a staggered pattern across the canvas. The images are layered with semi-transparent circles in pink, blue, and green, all using CSS screen blend modes to create overlapping color effects. The visualization is built with D3 v4, using SVG elements such as `clipPath` and `polygon` for the hexagonal clipping, and `append` with `.classed` to apply the clip. The code also references `d3.select` and `d3.scaleOrdinal` for color schemes, though the images come from external placeholder URLs.

PPatrick Wojda
67% match
Loading thumbnail…

Bubble Update Pattern I

This example demonstrates the general update pattern for hierarchical data using a pack layout, where circles and labels animate in response to randomly generated datasets. The visualization shows how data joins, exits, updates, and enters across three phases, with transitions handled by `d3.transition`. The code uses `d3.pack` to compute circle positions and radii, `d3.hierarchy` to structure the data, and SVG circles and text elements for rendering. Each cycle, random subsets of letters and sizes are generated, causing circles to appear, disappear, resize, and reposition smoothly over 750 milliseconds.

GGerardoFurtado
67% match
Loading thumbnail…

Buble game

Eight colored bubbles animate from a central point onto a grid of four by two light grey tiles, with each tile labeled by its card ID. Nested circles in shades of blue, white, yellow, and green reveal a concentric layered design, and a zoom interaction is attached to the root group. The example uses D3 v5 selections, `transition` for the entrance animations, and the `zoom` API to enable pan and zoom on the entire SVG scene.

LLudovicGouverneur
66% match
Loading thumbnail…

Bubble Update Pattern I

The example demonstrates a bubble chart update pattern using a pack layout, where circles and labels transition between states when the data changes. It shows the four-phase update sequence—join, exit, update, and enter—using d3.pack, d3.hierarchy, and transition methods. The code explicitly styles exiting circles with a reddish fill, while entering circles fade in with a teal fill and grow from a near-zero radius, all animated over 750 milliseconds. The visualization uses SVG elements and d3.v4, with data derived from a hardcoded alphabet array and randomizeData function.

GGerardoFurtado
66% match