Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHugoberry
Last edited Feb 1, 2017
Created on Feb 1, 2017

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.

AI-generated description

Similar vizzes

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

Array method

This example demonstrates a JavaScript array-shuffling algorithm. It creates an array containing the numbers 1 through 90, then randomizes the order of those elements using the Fisher–Yates shuffle technique. The shuffled array is output to the browser’s console via `console.log`. The page uses no external libraries; it relies solely on vanilla JavaScript and the native `Math.random` function for randomness. The code is embedded directly in a minimal HTML file and executes on page load, with commented-out variations showing alternate array sizes.

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

random array Html

This example demonstrates a randomly shuffled array of numbers from 1 to 90 displayed as a vertical list of individual paragraph elements. The code first builds the array, then applies the Fisher-Yates shuffle algorithm using JavaScript’s `Math.random()` to permute the order. Each resulting number is rendered into a `<p>` element via the DOM API `document.createElement` and appended to a container. The page uses no external libraries, relying solely on vanilla HTML, CSS, and JavaScript within a single `index.html` file.

EErik L
59% 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
57% match
Loading thumbnail…

Swapping the list elements in positions _from and _to. Power Query implementation

This example demonstrates a reusable Power Query function that swaps two elements in a list by their zero-based positions. The visualization highlights the function’s logic: it first normalizes the _from and _to indices by sorting them, then reconstructs the list using List.Range, concatenating the segments before, between, and after the swapped elements. The function returns the original list unchanged if the indices are equal. The implementation relies solely on Power Query’s standard library functions, such as List.Range and the concatenation operator, with no external libraries. The gist shows a compact, purely functional approach to list manipulation, making the data transformation explicit and testable.

HHugoberry
56% 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
53% 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
53% match