diff --git a/css/style.css b/css/style.css index 3113ff5..3389ee0 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,6 @@ /* https://color.adobe.com/create/color-wheel/?base=2&rule=Monochromatic&selected=4&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.17972473935894973,0.30406031865629857,0.5,0.6594494787178995,0.7916562131964631,1,0.35944947871789945,0.6081206373125971,1,0.0014128559043085631,0.1949717379336841,0.5,0.28755958297431955,0.48649650985007775,0.8&swatchOrder=0,1,2,3,4 */ -@font-face { +/*@font-face { font-family: 'thin'; src: url('res/distproth-webfont.eot'); src: url('res/distproth-webfont.eot?#iefix') format('embedded-opentype'), @@ -13,14 +13,7 @@ } -* { - box-sizing:border-box; -} - -html, body { - font-family:sans-serif; - margin:0; -} +*/ .sorter { background:#f4f4f4; @@ -29,7 +22,7 @@ html, body { margin:20px auto; padding:10px; position:relative; - width:960px; + width:760px; } .sorter-sidebar { @@ -47,7 +40,7 @@ html, body { left:10px; position:absolute; top:10px; - width:770px; + width:570px; } .sorter-svg .marker { @@ -64,14 +57,14 @@ html, body { left:10px; position:absolute; top:210px; - width:770px; + width:570px; } .sorter-properties .property { border-right:1px solid #ddd; float:left; text-align:center; - width:128px; + width:95px; } .sorter-properties .p6 { diff --git a/index.html b/index.html index f6b40d6..f9da5ac 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,20 @@ + - for each one: in place? adaptive? stable? swaps. comparisons. random example. best case example. worst case example. +

D3: Sort algorithm walkthroughs

-

Quicksort discussion

- used by chrome.
+ Here are visualizations of common sorting algorithms. Use the comparisons counter + and number of items to observe the performance of each randomized case. + + [Source repository] +
+ +

Quicksort discussion

+ +

used by chrome.

-

Mergesort discussion

- used by firefox and safari.
+

Mergesort discussion

+

used by firefox and safari.

helpful: http://stackoverflow.com/questions/2967153/space-requirements-of-a-merge-sort
-

Shellsort discussion

+

Shellsort discussion

several ways to pick gap width, but dependence on input data makes gap selection trivial.
-

Selection sort discussion

+

Selection sort discussion

http://stackoverflow.com/questions/15799034/insertion-sort-vs-selection-sort
finds upstram minimum and swaps with current.
-

insertion sort discussion

+

insertion sort discussion

how is this different from bubble and selection.
swap. highlight. fade.
-

bubble sort discussion

+

bubble sort discussion

how is this different from insertion and selection sorts.
talk about turtles and rabbits, because search loops from beginning each time. Every number out of place means a new pass must be done.
+ + diff --git a/js/bubblesort.js b/js/bubblesort.js index eac19cf..ac49f35 100644 --- a/js/bubblesort.js +++ b/js/bubblesort.js @@ -2,12 +2,6 @@ * */ var BubbleSort = function() { - //===== Inits. - this.actions = []; - - this.swaps = 0; - this.comparisons = 0; - //===== Action management. // this.preSort = function(arr) { @@ -78,6 +72,10 @@ BubbleSort.prototype = Object.create(Sorter.prototype); BubbleSort.prototype.init = function() { var len = this.shuffled.length; + this.actions = []; + this.swaps = 0; + this.comparisons = 0; + this .instruct(Itemgroup.items, 0, 0, len) .instruct(Itemgroup.items, 1, 0, len) diff --git a/js/insertionsort.js b/js/insertionsort.js index 7806707..76d1171 100644 --- a/js/insertionsort.js +++ b/js/insertionsort.js @@ -2,12 +2,6 @@ * */ var InsertionSort = function() { - //===== Inits. - this.actions = []; - - this.swaps = 0; - this.comparisons = 0; - //===== Action management. // this.preSort = function(arr) { @@ -69,6 +63,10 @@ InsertionSort.prototype = Object.create(Sorter.prototype); InsertionSort.prototype.init = function() { var len = this.shuffled.length; + this.actions = []; + this.swaps = 0; + this.comparisons = 0; + this .instruct(Itemgroup.items, 0, 0, len) .instruct(Itemgroup.items, 1, 0, len) diff --git a/js/mergesort.js b/js/mergesort.js index 4f429dd..8a221de 100644 --- a/js/mergesort.js +++ b/js/mergesort.js @@ -2,10 +2,6 @@ * */ var MergeSort = function() { - //===== Inits. - this.actions = []; - this.comparisons = 0; - //===== Action management. // this.reset = function(len) { @@ -93,6 +89,9 @@ MergeSort.prototype = Object.create(Sorter.prototype); MergeSort.prototype.init = function() { var len = this.shuffled.length; + this.actions = []; + this.comparisons = 0; + this .instruct(Itemgroup.items, 0, 0, len) .instruct(Itemgroup.items, 1, 0, len) diff --git a/js/quicksort.js b/js/quicksort.js index ee499e7..1dff8ba 100644 --- a/js/quicksort.js +++ b/js/quicksort.js @@ -2,12 +2,6 @@ * */ var QuickSort = function() { - //===== Inits. - this.actions = []; - - this.swaps = 0; - this.comparisons = 0; - //===== Action management. // this.preSort = function(left, right, pivot, len) { @@ -94,6 +88,10 @@ QuickSort.prototype = Object.create(Sorter.prototype); QuickSort.prototype.init = function() { var len = this.shuffled.length; + this.actions = []; + this.swaps = 0; + this.comparisons = 0; + this .instruct(Itemgroup.items, 0, 0, len) .instruct(Itemgroup.items, 1, 0, len) diff --git a/js/selectionsort.js b/js/selectionsort.js index f5f294d..e95039b 100644 --- a/js/selectionsort.js +++ b/js/selectionsort.js @@ -2,12 +2,6 @@ * */ var SelectionSort = function() { - //===== Inits. - this.actions = []; - - this.swaps = 0; - this.comparisons = 0; - //===== Action management. // this.preSort = function(arr) { @@ -75,6 +69,10 @@ SelectionSort.prototype = Object.create(Sorter.prototype); SelectionSort.prototype.init = function() { var len = this.shuffled.length; + this.actions = []; + this.swaps = 0; + this.comparisons = 0; + this .instruct(Itemgroup.items, 0, 0, len) .instruct(Itemgroup.items, 1, 0, len) diff --git a/js/shellsort.js b/js/shellsort.js index c3a98e1..0489a40 100644 --- a/js/shellsort.js +++ b/js/shellsort.js @@ -2,24 +2,17 @@ * */ var ShellSort = function() { - //===== 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, `Starting sort.`) + .instruct(Itemgroup.message, 0, 100, 5, `Starting sort at index ${i}.`) }; // @@ -41,7 +34,7 @@ var ShellSort = function() { if (j - gap > 0) { this - .instruct(Itemgroup.message, 0, 100, 5, `Pushing downstream...`) + .instruct(Itemgroup.message, 0, 100, 5, `Continuing downstream...`) } }; @@ -53,14 +46,12 @@ var ShellSort = function() { }; // - 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, ``) + this.postSort = function(arr) { + this + .instruct(Itemgroup.background, 1, 0, 0, arr.length, Visualizer.bg0) + .instruct(Itemgroup.message, 0, 0, 3, ``) + .instruct(Itemgroup.message, 0, 0, 4, ``) + .instruct(Itemgroup.message, 0, 100, 5, `Ready for insertion sort.`) }; }; @@ -70,10 +61,12 @@ 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.actions = []; + this.swaps = 0; + this.comparisons = 0; + this .instruct(Itemgroup.items, 0, 0, len) .instruct(Itemgroup.items, 1, 0, len) @@ -105,10 +98,7 @@ ShellSort.prototype.sort = function(arr) { this.gapSort(arr, i, gap); } - this.doInsertionSort(); - var IS = new InsertionSort(); - IS.sort(arr); - // this.postSort(); + this.postSort(arr); return arr; }; diff --git a/js/visualizer-dom.js b/js/visualizer-dom.js index a327dc0..7f8f54a 100644 --- a/js/visualizer-dom.js +++ b/js/visualizer-dom.js @@ -68,8 +68,8 @@ Visualizer.prototype.initRange = function() { }; var rangeChange = function(event) { - this.initItems(event.target.value); - this.reset(); + this.actions = this.sorter.generate(event.target.value); + this.actionIndex = 0; }; var container = document.createElement('div'); @@ -207,7 +207,7 @@ Visualizer.prototype.initProperties = function() { div4.className = 'property p4'; var title4 = document.createElement('div'); - title4.innerHTML = 'Average Performance'; + title4.innerHTML = 'Avg Performance'; title4.className = 'title'; div4.appendChild(title4); diff --git a/js/visualizer.js b/js/visualizer.js index 84b9bee..2d4a78e 100644 --- a/js/visualizer.js +++ b/js/visualizer.js @@ -119,26 +119,3 @@ Visualizer.prototype.go = function() { setTimeout(this.go.bind(this), delay); } }; - -/** - * - */ -Visualizer.prototype.reset = function() { - this.actionIndex = 0; - - this.message(0, 1, ''); - this.message(0, 2, ''); - this.message(0, 3, ''); - this.message(0, 4, ''); - this.message(0, 5, ''); - - this.unhighlight(); - this.unfade(); - - this.groups - .transition().duration(100) - .attr('transform', function doTransform(d, i) { - d.index = i; - return `translate(${Visualizer.calculateX(i)}, ${Visualizer.itemY})`; - }); -};