Card Shuffler

100%

✓ Published0🌍 Public

Last edited Jan 31, 2017

Created on Jan 31, 2017

Two labeled rectangular cards, one green and one red, sit stacked in the center of the screen. Every second, the top card slides down over the bottom card, swaps its color and text label with the bottom card, and then the bottom card slides back up, repeatedly cycling their positions. The animation uses D3 v4 transitions with `transition.attr` and `transition.on` callbacks to chain the shuffling loop. Both cards are SVG groups containing a styled `<rect>` and `<text>` element, rendered with Impact font and black outlines.

AI-generated description

Similar vizzes

Loading thumbnail…

Shuffle II

An array of 200 vertical lines rotates in place to visualize a Fisher–Yates shuffle, with shuffled elements rendered in black while unshuffled ones stay light gray. The animation plays the swap sequence in reverse, shuffling the array from a fully shuffled state back to its original order. Built with D3 v3, it uses ordinal and linear scales, SVG line elements, and chained transitions to update each line’s rotation transform after every swap. The shuffle function generates random pairwise swaps, and the code references DOM nodes directly to swap their positions efficiently.

Mmbostock

75% match

Loading thumbnail…

Shuffle blocks

Eight colored blocks, each labeled with a Swedish party abbreviation, shuffle through a three-by-three grid before returning to their original positions. The animation alternates between a forward sequence and a backward sequence after an initial delay. Built with D3 v4, the code selects SVG groups containing rectangles and text, applying `transition.attr` with `duration` and `delay` to update each block's `transform` attribute. The data consists of a hardcoded array of party codes, with movements defined as index, row, and column targets.

PPatrick Wojda

73% match

Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

MMTR

71% match

Loading thumbnail…

Shuffle I

A Fisher–Yates shuffle is animated as 200 vertical line segments, each rotating to illustrate the random swapping of array positions. The visualization uses D3.js v3 with SVG and a transition system that chains animations step-by-step, reversing the shuffle steps to trace the algorithm’s progression. The `d3.scale.ordinal` and `d3.scale.linear` maps data indices to x-coordinates and rotation angles, while the `shuffle` function generates swap pairs for the animation sequence.

Mmbostock

71% match

Loading thumbnail…

SVG text experiment - Choreography of elements

A circular arrangement of text cards, each containing a category label and a body of related words, rotates continuously around a central statement. The central text repeatedly fades out and rewrites itself with a new sentence composed of words from the taxonomy dataset. D3.js (v5) constructs the SVG elements and performs the text transitions, while the GreenSock (GSAP) library animates the cards' rotation and the progress of text along SVG paths.

LLaurens

69% match

Loading thumbnail…

TD1

Three circles—green, blue, and red—sit in a row on a gray SVG canvas. Clicking a rectangle starts a two-second animated transition that moves the red circle diagonally downward, followed by a second transition returning it horizontally. The red circle also turns black on mouseover, while the green circle responds to hover via a CSS class. Built with D3 v5, the example demonstrates selections, event handlers, and chained `transition.attr` calls, with no external data source.

LLauranJade

69% match

Loading thumbnail…

test

A continuously shuffling set of the 26 alphabet letters animates horizontally across an SVG canvas. The visualization demonstrates D3's general update pattern with a key function, showing how data joins handle enter, update, and exit selections. Each letter's x-position is recalculated based on its new index after each shuffle via `d3.shuffle`. An infinite loop triggers repeated updates, with a 750ms transition on position changes. The code primarily uses D3 v7 selections, `join()`, and `transition()` for the animation.

Aa15923647

68% match

Loading thumbnail…

10.transition-update pattern

The visualization demonstrates the D3 update pattern by animating a changing subset of the alphabet as text elements enter, update, and exit. The code defines separate transition states for each lifecycle phase—green for entering, dark gray for updating, and brown for exiting—using the `d3.transition` API with a 750-millisecond duration. Elements move horizontally to their new indexed positions, while exiting items fade out and shift downward before removal. The data shuffles and slices randomly every second via `d3.interval`, with the SVG output repositioning based on the current array.

深深度碎片

68% match