Skip to main content
100%

selection sort in node

✓ Published0🌍 Public
VVinodLouis
Last edited Jul 13, 2017
Created on Jul 13, 2017

A selection sort algorithm animates through an array of 13 numbers, visually swapping elements as it finds the minimum value in each pass. The visualization uses a force-directed layout via `d3.forceSimulation` to position nodes, with circles representing array values and lines connecting them in their current order. Each comparison between `arrNumbers[j]` and `arrNumbers[minIdx]` triggers a color change, while a successful swap updates the node positions using `transition.attrTween` to smoothly move the circles. The code, written by VinodLouis, runs the sort logic in plain JavaScript and renders the result through D3's data binding and SVG transforms.

AI-generated description

Similar vizzes

Loading thumbnail…

insertion sort in node

This visualization demonstrates an insertion sort algorithm sorting an array of thirteen numbers in ascending order. It uses JavaScript’s native array operations and a while loop to shift elements, showing the step-by-step reordering of the dataset. The code relies on standard JavaScript syntax rather than external libraries, logging the final sorted array to the console via `console.log`. The visualization captures the algorithm’s logic through the source code itself, illustrating the comparison and insertion mechanics without graphical rendering.

VVinodLouis
79% match
Loading thumbnail…

Implementing bubble sort in node

This visualization demonstrates a bubble sort algorithm in action, using an array of 13 numbers as the data source. The code implements the sort with nested JavaScript loops, comparing adjacent values and swapping them when the left value exceeds the right one, with a temporary variable storing values during each swap. The inner loop iterates progressively fewer times through the array on each pass, accounting for elements already sorted at the end. A console.log statement outputs the fully sorted array, while commented-out logging shows the sort state at each iteration for debugging.

VVinodLouis
76% match
Loading thumbnail…

Quicksort VI

An animated quicksort network visualizes the sorting process of 100 shuffled values, with time progressing on the vertical axis and each swap rendered as a colored path. The value-to-color mapping uses a cubehelix color scale. The animation is drawn on a Canvas via `d3.transition` and custom tweening, while a precomputed list of swaps drives the sequence. Pressing the Alt key slows the animation. The implementation uses d3.v3, including ordinal and linear scales, and a custom `quicksort` function to generate swap pairs.

Mmbostock
71% match
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
71% 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
70% 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
70% 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
69% 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
69% match