Bubble Sort

100%

✓ Published2🌍 Public

Last edited Sep 15, 2021

Created on Mar 22, 2021

Forked from Tree

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

84% match

Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

深深度碎片

76% match

Loading thumbnail…

Quicksort III

Two hundred vertical lines represent an array of shuffled numbers, each line rotated by its value. The animation plays out the swaps of the quicksort algorithm in reverse, showing the array gradually becoming disordered. The visualization uses D3 v3 with SVG line elements, a linear scale for rotation, and an ordinal scale for x-positioning. The quicksort function generates a list of swap pairs, which d3 transitions then animate sequentially, adjusting line transforms on each step.

Mmbostock

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

Sortable Bar Chart

A bar chart displays 24 random values from a normal distribution, with bars sorted and animated into ascending or original order every five seconds. The reordering uses d3.transition with staggered delays per bar to make individual movements traceable, referencing Heer and Robertson’s animated transitions. Built with d3.js v3, the chart uses d3.scale.ordinal with rangeRoundBands for vertical positioning, while bar rectangles and text labels are rendered as SVG elements. The x-axis is drawn via d3.svg.axis, and sorting is triggered by a setInterval toggling the index order.

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

73% match

Loading thumbnail…

Quicksort

The visualizer shows the Quicksort algorithm sorting a shuffled array of 240 items as a fan of lines, with the current pivot highlighted in red. Each step is animated via a timer, swapping line positions to reflect array changes. The code uses d3.v3 with a linear scale for angular displacement and an ordinal scale for horizontal positioning, rendering SVG lines and driving the animation through `setInterval`. The data is generated by a Fisher–Yates shuffle and processed through the quicksort function.

Mmbostock

73% match