Visualizing Sorting Algorithms

100%

Visualizing Sorting Algorithms

✓ Published0🌍 Public

Last edited Mar 21, 2017

Created on Mar 21, 2017

This interactive visualization compares five sorting algorithms—merge sort, insertion sort, selection sort, bubble sort, and bogosort—by animating the rearrangement of vertical bars on an SVG canvas. Buttons let the user trigger each sort, stop it mid-process, or reshuffle the initial data. The code uses D3 v4 to render and transition the bar rectangles and value labels, with the current step count displayed in a counter. Sorted or actively tested elements are highlighted in red via CSS classes, while color changes and positions update through `d3.select` and `.transition()` calls at a duration scaled to the dataset size.

AI-generated description

JavaScript and D3.js have their own means for sorting and one may never need to use traditional sorting algorithms when developing in JavaScript. So I made this for comparing sorting algorithms in an environment that is more familiar to me.

It's a bit of an off-shoot of the Mergesort series I did here: <a href="http://bl.ocks.org/alexmacy/d6f48eb15d4608c3a71b7681309ebf8c">Mergesort w/ color</a> & <a href="http://bl.ocks.org/alexmacy/9f109c383f8ed21f5f610cb21113ca68">Mergesort animation</a>. I left Mergesort out here because it doesn't work very well with the way I wanted to visualize these. Instead, I used insertion sort, selection sort, bubble sort, and bogosort just for fun.

Update 10/9/16: Added Mergesort.

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/770f14e11594623320db1270361331dc'>Visualizing Sorting Algorithms</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/9fac1bf510409fe0c8e4c73ffa652955'>Visualizing Sorting Algorithms</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/472d81fe469764f16b9d83ab4dc4f20e'>Visualizing Sorting Algorithms</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Bubble Sort

This example visualizes the Bubble Sort algorithm as an animated SVG bar chart. A shuffled array of 100 numbers is sorted step-by-step, with each comparison and swap rendered as a smooth transition of bar positions. The visualization uses D3 v6 to manage data binding, scales, and transitions, with bars drawn as SVG `rect` elements. Sorting steps are precomputed and replayed via `setTimeout`, triggering `render()` calls that animate x-coordinates using D3’s `transition` method.

MMTR

79% match

Loading thumbnail…

Coding Challenge #114: Bubble Sort Visualization

A bubble sort visualization renders 30 random-height vertical bars as SVG line elements on a light green background. The code uses d3-selection’s `selectAll`, `enter`, `merge`, and `exit` to update the bars. After one second, the values are sorted descending via native JavaScript `Array.sort`, swapping the bar heights in place. D3 v5’s `attr` setter maps each line’s x-position from its index and y2 from its value.

RRubens

77% match

Loading thumbnail…

Bubble Sort rAF

This visualization demonstrates the Bubble Sort algorithm animating a shuffled array of 50 bars, rendered as SVG rectangles inside a single group. The bars are color-coded blue and repositioned via `d3.scaleBand` and `d3.scaleLinear` as the algorithm steps through each comparison and swap. It uses D3 v6 with a React framework, advancing through precomputed array snapshots using `requestAnimationFrame`. Keyboard arrow keys allow stepping forward or backward through the recorded states, while clicking a circle reinitializes the data with a fresh shuffle.

MMTR

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

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

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

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

74% match

Loading thumbnail…

85. D3 Sort

Animated bar chart displays 20 numeric values as vertical bars, color-coded by intensity, that rearrange into ascending order when clicked. Built with D3.js v4.5.0, the visualization uses `d3.scaleBand` for x-axis positioning and `d3.scaleLinear` for y-axis scaling. The code demonstrates sorting via `d3.ascending` comparator within a `sort()` method on rect elements, with mouseover highlighting and mouseout color transitions, all rendered as SVG with 1000ms transition animations.

Aamakanju@nyit.edu

73% match