Skip to main content
100%

Mergesort animation

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 14, 2016
Created on Jun 14, 2016

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.

AI-generated description

This is an interpretation of <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/39566aca95eb03ddd526'>Mergesort I</a>.

I kept all the passes through the sort visible to be able to compare the steps of the sorting algorithm.

Similar vizzes