Skip to main content
100%

Quicksort I

✓ Published0🌍 Public
Aandressarg
Last edited Aug 15, 2018
Created on Aug 15, 2018

A visualization of the quicksort algorithm shows each row as the array’s state before partitioning, with orange lines marking values left of the pivot that need moving right, and green lines marking right-side values needing moving left. The animation uses SVG line elements scaled by d3.scale.ordinal and rotated via d3.scale.linear, while mouseover and mouseout transitions temporarily rotate lines relative to the pivot value. The code generates 200 shuffled numbers, records each partition step, and renders the sequence using D3 v3 with SVG and animated transitions.

AI-generated description

A visualization of quicksort. Each row represents the state of the array prior to the partition operation. Orange values are left of and greater than the pivot and need to be moved right; green values are right of and less than the pivot and need to be moved left. After these exchanges, the algorithm recurses onto the left and right subarrays.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/63350657ecaf99dbb5ad'>Quicksort I</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Quicksort I

A visualization of the quicksort algorithm shows each row as a snapshot of the array before a partition operation, with lines rotated to represent values. Orange lines indicate left-side elements greater than the pivot that need moving right, while green lines show right-side elements less than the pivot needing movement left. Built with D3 v3, it renders 200 shuffled numbers as SVG lines across multiple rows, each animated on mouseover to display values relative to the pivot using ordinal and linear scales, and uses the `quicksort` function to generate partition states.

Mmbostock
97% 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
93% match
Loading thumbnail…

Quicksort II

This visualization shows every recursive step of quicksort on a shuffled array of 200 numbers, with each row representing the array state before recursing into a partition. Red lines mark the chosen pivots, while gray lines indicate inactive elements. The code uses d3.v3 with SVG rendering, employing ordinal and linear scales to map array positions and rotated line marks. The quicksort algorithm is implemented in JavaScript, generating the level data and pivot metadata for each state.

Mmbostock
91% 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
90% match
Loading thumbnail…

Quicksort V

A visualization of quicksort on 100 elements, where each horizontal row represents the array state after a single swap and colored lines trace each element’s positional movement through the sorting process. The code uses d3.v3 with custom SVG path interpolators to render the straight and diagonal segments, and a cubehelix color scale to differentiate elements. Randomly shuffled data is generated with `d3.shuffle` and `d3.range`, and the quicksort algorithm is implemented manually to record swap operations.

Mmbostock
90% 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
88% match
Loading thumbnail…

Quicksort VI

An animated quicksort network visualizes the sorting process of 100 shuffled values, with time progressing on the vertical axis and each swap rendered as a colored path. The value-to-color mapping uses a cubehelix color scale. The animation is drawn on a Canvas via `d3.transition` and custom tweening, while a precomputed list of swaps drives the sequence. Pressing the Alt key slows the animation. The implementation uses d3.v3, including ordinal and linear scales, and a custom `quicksort` function to generate swap pairs.

Mmbostock
85% match
Loading thumbnail…

Quicksort CodingTrain sketch

This visualization demonstrates the quicksort algorithm by animating the partitioning and recursive sorting of an array of vertical bars. Each bar’s height represents a random value, while color encodes state: white for unsorted, green for the current subarray, and red for the pivot. The p5.js `draw` loop renders the bars and draws orange comparison lines between active elements. The code uses p5.js `createCanvas`, `rect`, and `line`, plus JavaScript `async`/`await` with `setTimeout`-based `sleep` to pace swaps, with `Promise.all` coordinating recursive calls.

WWikunia
81% match