Shuffle I

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 29, 2014

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.

AI-generated description

An animation of Fisher–Yates shuffle.

gpl-3.0 Licensed

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

92% match

Loading thumbnail…

Quicksort III

Two hundred vertical lines represent an array of shuffled numbers, each line rotated by its value. The animation plays out the swaps of the quicksort algorithm in reverse, showing the array gradually becoming disordered. The visualization uses D3 v3 with SVG line elements, a linear scale for rotation, and an ordinal scale for x-positioning. The quicksort function generates a list of swap pairs, which d3 transitions then animate sequentially, adjusting line transforms on each step.

Mmbostock

76% match

Loading thumbnail…

The Fisher–Yates shuffle is an algorithm for generating a random permutation of a finite set—in plain terms, the algorithm shuffles the set. The algorithm effectively puts all the elements into a hat; it continually determines the next element by randomly drawing an element from the hat until no elements remain. The algorithm produces an unbiased permutation: every permutation is equally likely. The modern version of the algorithm is efficient: it takes time proportional to the number of items being shuffled and shuffles them in place https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle

This visualization demonstrates the Fisher–Yates shuffle algorithm by animating its in-place swapping process across a list of numeric values. It shows how each iteration randomly selects an unshuffled position and exchanges it with the current index, progressively building a random permutation. The implementation uses a custom `swap` function built from Power Query’s `List.Range` and `List.Buffer` operations, with `Number.RandomBetween` driving the random selection. The code, written in the M language, relies on `List.Accumulate` to iterate through the list, highlighting the algorithm’s efficiency and unbiased nature without external libraries.

HHugoberry

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

Quicksort

The visualizer shows the Quicksort algorithm sorting a shuffled array of 240 items as a fan of lines, with the current pivot highlighted in red. Each step is animated via a timer, swapping line positions to reflect array changes. The code uses d3.v3 with a linear scale for angular displacement and an ordinal scale for horizontal positioning, rendering SVG lines and driving the animation through `setInterval`. The data is generated by a Fisher–Yates shuffle and processed through the quicksort function.

Mmbostock

73% match

Loading thumbnail…

Mergesort I

The visualization animates the mergesort algorithm on 200 randomly shuffled values. Each value is rendered as a short line segment whose vertical position indicates the current working array and whose rotation reflects its numeric value, creating a dynamic, swirling pattern. The animation uses d3.v3, specifically `d3.transition` to sequence copy and swap actions, while `d3.scale.ordinal` and `d3.scale.linear` map indices, array positions, and values to visual attributes. The SVG lines update their `transform` attributes via `transition.attr("transform", transform)`, demonstrating the sorting process step-by-step.

Mmbostock

73% match

Loading thumbnail…

Quicksort IV

The visualization animates the quicksort algorithm on 200 shuffled values, rendering each value as a rotated vertical line whose angle reflects its magnitude. A red line marks the active pivot, while black lines indicate the current partition and gray lines show inactive regions. Using D3.js v3 and SVG, the animation replays recorded swap and partition actions in reverse order, updating line positions and classes via `d3.transition`. The code generates the action log by recursively partitioning the array, then drives the playback through chained transition callbacks.

Mmbostock

72% match

Loading thumbnail…

Gist 3d2406a594700ec447ebd0b208ead916

This example demonstrates a JavaScript implementation of the Fisher–Yates shuffle algorithm, providing two distinct array manipulation methods. The `shuffle()` function returns a new, shuffled copy of the original array without modifying it, while `permShuffle()` permanently rearranges the elements in place. The code extends the native `Array.prototype` with these custom methods, using modern JavaScript syntax including spread operators and destructuring assignments for element swapping. A usage example with a five-element array illustrates both behaviors, showing the original array preserved after copying and altered after permanent shuffling. The implementation relies solely on core JavaScript array operations and the built-in `Math.random()` function.

MMAKIO135

71% match