Skip to main content
SimilarExport ZIP
100%

Bubbles gallery #2 - opacity

✓ Published0🌍 Public
PPatrick Wojda
Last edited Jan 17, 2020
Created on May 29, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/GitNoise/'>GitNoise</a>'s block: <a href='http://bl.ocks.org/GitNoise/4c58b07a143a9482c5e8f1d131cf315c'>Bubbles gallery #1</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Bubbles gallery #1

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.

PPatrick Wojda
89% 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…

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
66% 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
66% 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
65% 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
65% match
Loading thumbnail…

circle popup

Six colored circles of varying sizes pop into view on a light green background, each growing from a radius of zero to its assigned size over an eight-second staggered transition. The circles remain static once fully expanded, with no further movement or interaction. The visualization uses D3.js selection joins with enter, update, and exit handlers, applying the `transition` API with `easeLinear` for the fast update phase. Hardcoded data defines each circle's position, radius, and fill color, with opacity set to 0.708 for a translucent effect.

NNeeraj Kumar
65% match
Loading thumbnail…

D3 Transitions

Six colored circles of varying sizes move across a light green canvas, growing from and shrinking to a radius of zero at different speeds. The visualization demonstrates the D3 transition API, using a slow two-second transition to animate the circles' entry and exit by scaling their radius, while a fast 500-millisecond linear ease animates position updates. The sketch initializes six data points with id, x, y, r, and fill attributes, then uses D3's `select`, `transition`, and `easeLinear` functions to orchestrate the dynamic reshaping of the circle group. A video embed links to a YouTube demonstration of the transition effects.

SShad Frigui
64% match