Visualizing Sorting Algorithms

100%

Visualizing Sorting Algorithms

✓ Published0🌍 Public

Last edited Oct 10, 2016

Created on Aug 9, 2016

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.

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.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Visualizing Sorting Algorithms

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.

TThanaporn-sk

93% match

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

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

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

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

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

79% match

Loading thumbnail…

Repeating sorting animation

A shuffled array of 100 bars repeatedly animates through a sort-and-reset cycle, showing each value sliding horizontally to its sorted position before the array reshuffles and restarts. Two rows of SVG rectangles represent the original and sorted states, with fill opacity encoding each bar's numeric value. The animation uses d3.v3 transitions with staggered timeouts, ordinal scales for positioning, and duration-based easing sequences to coordinate the sorting, return, and shuffle phases.

Aalexmacy

78% match

Loading thumbnail…

Mergesort w/ color

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.

Aalexmacy

78% match