Skip to main content
100%

Mergesort w/ color

✓ Published0🌍 Public
Aalexmacy
Last edited Aug 5, 2016
Created on Jun 9, 2016

A random array of 100 values is sorted by the mergesort algorithm, with each value drawn as a colored vertical line whose color transitions from light green to dark green based on its numeric value. The animation shows the sorting process as lines move between two horizontal bands representing the two arrays being merged, with copies and swaps visualized through D3 transitions. The code uses d3.shuffle, d3.scale.ordinal for positioning, and d3.scale.linear for the color ramp, rendering in SVG with animated transitions.

AI-generated description

An adaptation of <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/39566aca95eb03ddd526'>Mergesort I</a>, modified to include color. The sorting is admittedly not as clear at first.

gpl-3.0 Licensed

Similar vizzes

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

Mergesort animation

This animation visualizes the mergesort algorithm on 64 shuffled values, displaying every pass through the sort as a separate row of rectangles so the progressive reordering remains visible. Each rectangle’s fill opacity encodes its value, and the sort steps animate via chained d3 transitions. The code uses d3.v3 with ordinal scales for positioning, d3.shuffle to generate the initial array, and SVG rect elements with custom transition timing to copy items between rows, ultimately returning all sorted values to a single row.

Aalexmacy
87% 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
87% 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
85% 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…

Visualizing Sorting Algorithms

A visualization compares sorting algorithms by animating 50 shuffled bars in D3 v4 with SVG transitions. Users select Merge, Insertion, Selection, Bubble, or Bogosort, and each step highlights elements being tested or moved in red while counting steps. The code uses D3 scales, timeouts for pacing, and transition-based re-positioning, with shuffle and reset controls.

Aalexmacy
78% match