ben.burlingham
/
d3-sort-visualization
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Insertion sort visualization finished.

Browse Source
master
ben-burlingham 10 years ago
parent 781d61628d
commit 89c8909ce9
6 changed files with 293 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      index.html
  2. 33
      js/bubblesort.js
  3. 103
      js/insertionsort.js
  4. 2
      js/quicksort.js
  5. 33
      js/selectionsort.js
  6. 107
      js/shellsort.js

44
index.html
Unescape View File

@ -36,28 +36,60 @@
data-worst-memory='0 (in place)'
></div>
<!--
<h1>Shellsort discussion</h1>
several ways to pick gap width, but dependence on input data makes gap selection trivial. <br>
swap. highlight. fade.
<div class="sorter" data-algorithm='shell'></div>
<div class="sorter"
data-algorithm='shell'
data-stable='Maybe'
data-adaptive='Maybe'
data-worst-perf='O(n + m + 3k)'
data-avg-perf='O(n + m + 3k)'
data-best-perf='O(n + m + 3k)'
data-worst-memory='0 (in place)'
></div>
<h1>Selection sort discussion</h1>
http://stackoverflow.com/questions/15799034/insertion-sort-vs-selection-sort <br>
swap. highlight. fade.
<div class="sorter" data-algorithm='selection'></div>
<div class="sorter"
data-algorithm='selection'
data-stable='Maybe'
data-adaptive='Maybe'
data-worst-perf='O(n + m + 3k)'
data-avg-perf='O(n + m + 3k)'
data-best-perf='O(n + m + 3k)'
data-worst-memory='0 (in place)'>
</div>
<h1>insertion sort discussion</h1>
how is this different from bubble and selection. <br>
swap. highlight. fade.
<div class="sorter" data-algorithm='insertion'></div>
<div class="sorter"
data-algorithm='insertion'
data-stable='Maybe'
data-adaptive='Maybe'
data-worst-perf='O(n + m + 3k)'
data-avg-perf='O(n + m + 3k)'
data-best-perf='O(n + m + 3k)'
data-worst-memory='0 (in place)'
></div>
<h1>bubble sort discussion</h1>
how is this different from insertion and selection sorts. <br>
swap. highlight. fade.
<div class="sorter" data-algorithm='bubble'></div>
<div class="sorter"
data-algorithm='bubble'
data-stable='Maybe'
data-adaptive='Maybe'
data-worst-perf='O(n + m + 3k)'
data-avg-perf='O(n + m + 3k)'
data-best-perf='O(n + m + 3k)'
data-worst-memory='0 (in place)'
></div>
<!--
<h1>radix sort discussion</h1>
<div class="sorter" data-algorithm='radix'></div>

33
js/bubblesort.js
Unescape View File

@ -2,11 +2,40 @@
*
*/
var BubbleSort = function() {
this.instructions = [];
//===== Inits.
this.actions = [];
this.swaps = 0;
this.comparisons = 0;
//===== Action management.
};
BubbleSort.prototype = Object.create(Sorter.prototype);
/**
*
*/
BubbleSort.prototype.init = function() {
var len = this.shuffled.length;
this
.instruct(Itemgroup.items, 0, 0, len)
.instruct(Itemgroup.items, 1, 0, len)
.instruct(Itemgroup.items, 2, 0, len)
for (var i = 0; i < len; i++) {
this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
}
this
.instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
.instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
.instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
.instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
};
/**
*
*/
@ -17,7 +46,7 @@ BubbleSort.prototype.sort = function(arr) {
// NOTE this starts at the beginning of the array each time
for (i = 1; i < len; i++) {
if (arr[i - 1].value > arr[i].value) {
if (arr[i - 1] > arr[i]) {
this.swap(arr, i, i - 1);
swapped = true;
// console.log(dump(arr));

103
js/insertionsort.js
Unescape View File

@ -2,11 +2,97 @@
*
*/
var InsertionSort = function() {
this.instructions = [];
//===== Inits.
this.actions = [];
this.swaps = 0;
this.comparisons = 0;
//===== Action management.
//
this.preSort = function(arr) {
this
.instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
.instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
.instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
.instruct(Itemgroup.message, 0, 0, 3, ``)
.instruct(Itemgroup.message, 0, 0, 4, ``)
.instruct(Itemgroup.message, 0, 100, 5, ``)
};
//
this.midSort = function(arr, i, j) {
this
.instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
.instruct(Itemgroup.background, 1, 0, j, j, Visualizer.bg1)
.instruct(Itemgroup.background, 1, 0, (j - 1), (j - 1), Visualizer.bg1)
.instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
.instruct(Itemgroup.message, 0, 0, 4, `Comparing [${j - 1}] and [${j}]`)
.instruct(Itemgroup.message, 0, 100, 5, ``)
};
//
this.swap = function(arr, j) {
this
.instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
.instruct(Itemgroup.message, 0, 0, 5, `${arr[j]} < ${arr[j - 1]}, swapped.`)
.instruct(Itemgroup.swap, 1, 300, j - 1, j)
if (j - 1 > 0) {
this.instruct(Itemgroup.message, 0, 0, 3, `Continuing downstream...`)
}
else {
this.instruct(Itemgroup.message, 0, 0, 3, ``)
}
};
//
this.noswap = function(arr, j) {
this
.instruct(Itemgroup.message, 0, 0, 3, ``)
.instruct(Itemgroup.message, 0, 100, 5, `${arr[j]} > ${arr[j - 1]}, not swapped.`)
};
//
this.postSort = function(arr) {
this
.instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
.instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
.instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
.instruct(Itemgroup.message, 0, 0, 3, ``)
.instruct(Itemgroup.message, 0, 0, 4, ``)
.instruct(Itemgroup.message, 0, 100, 5, `Sorting complete.`)
};
};
InsertionSort.prototype = Object.create(Sorter.prototype);
/**
*
*/
InsertionSort.prototype.init = function() {
var len = this.shuffled.length;
this
.instruct(Itemgroup.items, 0, 0, len)
.instruct(Itemgroup.items, 1, 0, len)
.instruct(Itemgroup.items, 2, 0, len)
for (var i = 0; i < len; i++) {
this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
}
this
.instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
.instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
.instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
.instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
};
/**
*
*/
@ -15,24 +101,29 @@ InsertionSort.prototype.sort = function(arr) {
var i;
var j;
var tmp;
var swaps = 0;
var comparisons = 0;
this.preSort(arr);
for (i = 0; i < len; i++) {
for (j = i; j > 0; j--) {
comparisons++;
this.comparisons++;
this.midSort(arr, i, j);
if (arr[j - 1].value > arr[j].value) {
swaps++;
if (arr[j - 1] > arr[j]) {
this.swaps++;
tmp = arr[j - 1];
arr[j - 1] = arr[j];
arr[j] = tmp;
this.swap(arr, j);
}
else {
this.noswap(arr, j);
break;
}
}
}
this.postSort(arr);
return arr;
};

2
js/quicksort.js
Unescape View File

@ -116,7 +116,6 @@ QuickSort.prototype.init = function() {
*/
QuickSort.prototype.sort = function(arr, start, end) {
if (end <= start) {
// message: Left and Right have crossed, start sorting sublists.
this.postSort();
return arr;
}
@ -129,7 +128,6 @@ QuickSort.prototype.sort = function(arr, start, end) {
var tmp;
var rval;
// Message: pivot chosen
this.preSort(left, right, pivot, arr.length);
while (left <= right) {

33
js/selectionsort.js
Unescape View File

@ -2,11 +2,40 @@
*
*/
var SelectionSort = function() {
this.instructions = [];
//===== Inits.
this.actions = [];
this.swaps = 0;
this.comparisons = 0;
//===== Action management.
};
SelectionSort.prototype = Object.create(Sorter.prototype);
/**
*
*/
SelectionSort.prototype.init = function() {
var len = this.shuffled.length;
this
.instruct(Itemgroup.items, 0, 0, len)
.instruct(Itemgroup.items, 1, 0, len)
.instruct(Itemgroup.items, 2, 0, len)
for (var i = 0; i < len; i++) {
this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
}
this
.instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
.instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
.instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
.instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
};
/**
*
*/
@ -25,7 +54,7 @@ SelectionSort.prototype.sort = function(arr) {
min = i;
for (j = i + 1; j < len; j++) {
comparisons++;
if (arr[j].value < arr[i].value) {
if (arr[j] < arr[i]) {
min = j;
}
}

107
js/shellsort.js
Unescape View File

@ -2,11 +2,96 @@
*
*/
var ShellSort = function() {
this.instructions = [];
//===== Inits.
this.actions = [];
this.swaps = 0;
this.comparisons = 0;
//===== Action management.
//
this.preSort = function(arr, i, gap) {
this
.instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
.instruct(Itemgroup.background, 1, 0, i, i, Visualizer.bg1)
.instruct(Itemgroup.message, 0, 0, 1, `Comparisons: ${this.comparisons}`)
.instruct(Itemgroup.message, 0, 0, 2, `Swaps: ${this.swaps}`)
.instruct(Itemgroup.message, 0, 0, 3, `Gap: ${gap}`)
.instruct(Itemgroup.message, 0, 0, 4, ``)
.instruct(Itemgroup.message, 0, 100, 5, ``)
};
//
this.midSort = function(arr, i, j, gap) {
this
.instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
.instruct(Itemgroup.background, 1, 0, j, j, Visualizer.bg1)
.instruct(Itemgroup.background, 1, 0, (j - gap), (j - gap), Visualizer.bg1)
.instruct(Itemgroup.message, 0, 0, 4, `Comparing [${j - gap}] and [${j}]`)
.instruct(Itemgroup.message, 0, 100, 5, ``)
};
//
this.swap = function(arr, j, gap) {
this
.instruct(Itemgroup.message, 0, 100, 4, `${arr[j]} < ${arr[j - gap]}, swap required.`)
.instruct(Itemgroup.swap, 1, 300, j - gap, j)
if (j - gap > 0) {
this
.instruct(Itemgroup.message, 0, 100, 5, `Pushing downstream...`)
}
};
//
this.noswap = function(arr, j, gap) {
this
.instruct(Itemgroup.message, 0, 0, 4, `${arr[j]} > ${arr[j - gap]}, no swap required.`)
.instruct(Itemgroup.message, 0, 100, 5, ``)
};
//
this.doInsertionSort = function() {
// this
// .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0)
// .instruct(Itemgroup.background, 1, 0, j, j, Visualizer.bg1)
// .instruct(Itemgroup.background, 1, 0, (j - gap), (j - gap), Visualizer.bg1)
// .instruct(Itemgroup.message, 0, 0, 4, ``)
// .instruct(Itemgroup.message, 0, 100, 5, ``)
};
};
ShellSort.prototype = Object.create(Sorter.prototype);
/**
*
*/
ShellSort.prototype.init = function() {
console.error('Shell sort visualization ends with insertion sort, how to manage?');
var len = this.shuffled.length;
this
.instruct(Itemgroup.items, 0, 0, len)
.instruct(Itemgroup.items, 1, 0, len)
.instruct(Itemgroup.items, 2, 0, len)
for (var i = 0; i < len; i++) {
this.instruct(Itemgroup.text, 1, 0, i, this.shuffled[i]);
}
this
.instruct(Itemgroup.foreground, 1, 0, 0, len, Visualizer.fg0)
.instruct(Itemgroup.background, 1, 0, 0, len, Visualizer.bg0)
.instruct(Itemgroup.opacity, 0, 0, 0, len, 0)
.instruct(Itemgroup.opacity, 2, 0, 0, len, 0)
};
/**
*
*/
@ -16,11 +101,14 @@ ShellSort.prototype.sort = function(arr) {
var i, j;
for (i = 0; i < gap; i++) {
this.preSort(arr, i, gap);
this.gapSort(arr, i, gap);
}
this.doInsertionSort();
var IS = new InsertionSort();
IS.sort(arr);
// this.postSort();
return arr;
};
@ -32,26 +120,23 @@ ShellSort.prototype.gapSort = function(arr, start, gap) {
var i, j;
var len = arr.length;
// console.log(`start ${start}, gap ${gap}`)
for (i = start; i < len; i += gap) {
// console.log(`i: ${i}`)
for (j = i; j > start; j -= gap) {
// console.log(`j: ${j}`)
// console.log(`checking if ${arr[j - gap].value} > ${arr[j].value}`)
this.midSort(arr, i, j, gap);
this.comparisons++;
if (arr[j - gap].value > arr[j].value) {
// console.log(`swapping ${arr[j - gap].value} and ${arr[j].value}`)
if (arr[j - gap] > arr[j]) {
this.swaps++;
tmp = arr[j - gap];
arr[j - gap] = arr[j];
arr[j] = tmp;
// console.log(dump(arr));
this.swap(arr, j, gap);
}
else {
this.noswap(arr, j, gap);
break;
}
}
}
// console.log(dump(arr));
};

Write Preview
Loading…
Cancel
Save