Mergesort IV

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 3, 2014

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

87% match

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

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

85% match

Loading thumbnail…

Mergesort II

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.

BBeaupe

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

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

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

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

73% match