Mergesort II

100%

✓ Published0🌍 Public

Last edited Nov 7, 2015

Created on Nov 7, 2015

This animation visualizes the mergesort algorithm sorting 200 shuffled values. The two subarrays currently being merged are displayed in black, while inactive lines are gray. Each line represents a value, with its vertical position indicating which temporary array it occupies and its rotation encoding the value. The code implements the sorting logic and action queue in JavaScript, then uses d3.v3 transitions with 75ms duration to animate each copy and swap operation as SVG line elements.

AI-generated description

An improved animation of mergesort. As the name suggests, the algorithm merges sorted arrays, starting with arrays of length 1 and doubling at each step. The two subarrays currently being merged are shown in black.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6928381c7b61714da59e'>Mergesort II</a>

Similar vizzes

Loading thumbnail…

Mergesort II

This visualization animates the mergesort algorithm on 200 randomly ordered values, showing how arrays of length 1 are progressively merged into sorted larger arrays. It uses D3.js v3 with SVG line marks to represent each value, rotated based on its magnitude and translated to its current position. The active merge operation is highlighted in black while inactive elements fade to light gray. The animation relies on D3’s transition API with custom start handlers to process merge, copy, and swap actions, and the ordinal and linear scales position the lines in two alternating rows.

Mmbostock

92% 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

90% match

Loading thumbnail…

Mergesort III

This visualization shows each pass of the mergesort algorithm as a horizontal row of 200 vertical line segments, with each row representing the array state after one merge phase. The lines are rotated according to their values, creating a waveform-like pattern that reveals the sorting progress from top to bottom. The implementation uses D3 v3 with ordinal and linear scales to position and rotate the lines, and SVG line elements are rendered within separate SVG groups per row. The mergesort function records each intermediate array state, and the code uses `d3.shuffle` and `d3.range` to generate the initial unsorted data.

Mmbostock

84% match

Loading thumbnail…

Merge Sort

Two hundred forty line segments, each encoding an array value by rotation angle, animate through seven passes of bottom-up merge sort. Randomly shuffled values are rendered as SVG lines, with each pass showing sorted sub-arrays as groupings of parallel bars. The animation uses `d3.shuffle`, `d3.scale.linear`, and `transition.attr` to smoothly rotate lines into new positions. The design resembles wind gusting over grass, making sorted runs visually distinct.

Mmbostock

83% match

Loading thumbnail…

Mergesort IV

Merge sort is visualized as a series of colored paths, one per value, that travel across a timeline from their initial random positions to their final sorted order. The bottom-up merge sort algorithm is shown step-by-step, with each value’s horizontal displacement and color reflecting its current index, using a cubehelix color scale. The visualization uses D3.js v3 with SVG, d3.shuffle, and ordinal scales, while a custom line interpolation and CSS halos enhance the paths.

Mmbostock

81% 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

79% 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

78% 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

75% match