Implementing multiple item creation.

10 years ago · 29b3fa2942
parent f0e8fe4f44
commit 29b3fa2942
10 changed files with 64 additions and 103 deletions
--- 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 {
--- a/index.html
+++ b/index.html
@ -6,12 +6,20 @@

    <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="/beb-2016/css/style.css">
 </head>
 <body>
-    for each one: in place? adaptive? stable? swaps. comparisons. random example. best case example. worst case example.
+    <h1>D3: Sort algorithm walkthroughs</h1>

-    <h1>Quicksort discussion</h1>
-    used by chrome. <br>
+    Here are visualizations of common sorting algorithms. Use the comparisons counter
+    and number of items to observe the performance of each randomized case.
+
+    <a href='http://gogs.benburlingham.com/ben.burlingham/d3-sort-visualization' target='_new'>[Source repository]</a>
+    <br>
+
+    <h2>Quicksort discussion</h2>
+
+    <p>used by chrome.</p>
    <div class="sorter"
    data-algorithm='quick'
    data-stable='Maybe'
@ -23,8 +31,8 @@
    ></div>


-    <h1>Mergesort discussion</h1>
-    used by firefox and safari. <br>
+    <h2>Mergesort discussion</h2>
+    <p>used by firefox and safari. </p>
    helpful: http://stackoverflow.com/questions/2967153/space-requirements-of-a-merge-sort<br>
    <div class="sorter"
    data-algorithm='merge'
@ -37,7 +45,7 @@
    ></div>


-    <h1>Shellsort discussion</h1>
+    <h2>Shellsort discussion</h2>
    several ways to pick gap width, but dependence on input data makes gap selection trivial. <br>
    <div class="sorter"
    data-algorithm='shell'
@ -49,7 +57,7 @@
    data-worst-memory='0 (in place)'
    ></div>

-    <h1>Selection sort discussion</h1>
+    <h2>Selection sort discussion</h2>
    http://stackoverflow.com/questions/15799034/insertion-sort-vs-selection-sort <br>
    finds upstram minimum and swaps with current.
    <div class="sorter"
@ -62,7 +70,7 @@
    data-worst-memory='0 (in place)'>
    </div>

-    <h1>insertion sort discussion</h1>
+    <h2>insertion sort discussion</h2>
    how is this different from bubble and selection. <br>
    swap. highlight. fade.
    <div class="sorter"
@ -76,7 +84,7 @@
    ></div>


-    <h1>bubble sort discussion</h1>
+    <h2>bubble sort discussion</h2>
    how is this different from insertion and selection sorts. <br>
    talk about turtles and rabbits, because search loops from beginning each time. Every number out of place means a new pass must be done.
    <div class="sorter"
@ -90,24 +98,26 @@
    ></div>

 <!--
-    <h1>radix sort discussion</h1>
+    <h2>radix sort discussion</h2>

    <div class="sorter" data-algorithm='radix'></div>

 <!--
-    <h1>Heapsort discussion</h1>
+    <h2>Heapsort discussion</h2>

    <div class="sorter"></div>

-    <h1>Bubblesort discussion</h1>
+    <h2>Bubblesort discussion</h2>
    NOTE http://stackoverflow.com/questions/17270628/insertion-sort-vs-bubble-sort-algorithms
    <div class="sorter"></div>

-    <h1>Radixsort discussion</h1>
+    <h2>Radixsort discussion</h2>

    <div class="sorter"></div>
 -->

+    <script type="text/javascript" src='../beb-2016/js/ui.js'></script>
+    <script type="text/javascript" src='../beb-2016/js/prism.js'></script>

    <script type='text/javascript' src='vendor/d3/d3.min.js'></script>
    <script type='text/javascript' src='js/visualizer.js'></script>
--- 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)
--- 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)
--- 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)
--- 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)
--- 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)
--- 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;
 };
--- 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);

--- 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})`;
-            });
-};