JS Sort (Efficacy)

Evaluation efficacy for sorts by JavaScript.

by Tinytsunami

HTML

<div id="demo">
  <canvas></canvas>
  <div>
    <br/> DATA LENGTH = <input type="number" value="1000" /> x <input type="number" value="10" /><br/> DATA RANGE = [<input type="number" value="0" />, <input type="number" value="100" />]<br/>
    <button>Evaluation</button>
    <br/>
    <input type="checkbox" checked/>Bubble Sort<br/>
    <input type="checkbox" checked/>Selection Sort<br/>
    <input type="checkbox" checked/>Insertion Sort<br/>
    <input type="checkbox" />Cocktail Sort<br/>
    <input type="checkbox" />Comb Sort<br/>
    <input type="checkbox" />Gnome Sort<br/>
    <input type="checkbox" />Ood-Even Sort<br/>
    <input type="checkbox" />Shell Sort<br/>
    <input type="checkbox" />Bucket Sort<br/>
    <input type="checkbox" />Counting Sort<br/>
    <input type="checkbox" />Radix Sort<br/>
    <input type="checkbox" />Merge Sort (recursive)<br/>
    <input type="checkbox" />Merge Sort (non-recursive)<br/>
    <input type="checkbox" />Quick Sort (recursive)<br/>
    <input type="checkbox" />Quick Sort (non-recursive)<br/>
    <input type="checkbox" />Binary Tree Sort<br/>
    <input type="checkbox" />Heap Sort<br/>
    <input type="checkbox" />Heap Sort (restore)<br/>
    <input type="checkbox" />Stooge Sort (inefficient!)<br/>
    <input type="checkbox" />Sleep Sort<br/>
    <input type="checkbox" />Bogo Sort (inefficient!)<br/>
  </div>
</div>

CSS

body {
  color: #ffffff;
  background: #20262e;
  font-family: monospace, sans-serif;
}

#demo input {
  width: 60px;
  color: #ffffff;
  background: #20262e;
  outline: none;
}

#demo input[type="number"] {
  border: none;
  border-bottom: 1px solid #ffffff;
}

#demo canvas {
  border: solid 1px #333333;
}

#demo button {
  cursor: pointer;
  color: #ffffff;
  background: #20262e;
  border: 1px solid #ffffff;
  outline: none;
  margin: 5px;
}

JavaScript

(function() {
  /* HTML DOM */
  let demo = document.getElementById("demo");
  let canvas = demo.getElementsByTagName("canvas")[0];
  let context = canvas.getContext("2d");
  let inputs = demo.getElementsByTagName("input");
  let lengthNodeA = inputs[0];
  let lengthNodeB = inputs[1];
  let rangeNodeA = inputs[2];
  let rangeNodeB = inputs[3];
  let sortNode = demo.getElementsByTagName("button")[0];

  /* variable */
  let LENGTH = 10; // size of data(accumulate by times)
  let LENGTH_TIMES = 10; // repeat times
  let MIN = 0; // range of data, underbound
  let MAX = 100; // range of data, upperbound
  let data = []; // data for sorting
  let save = []; // show array, step by step
  let interval = null; // object for animation

  /* canvas initaizlie */
  canvas.width = 750;
  canvas.height = 400;

  /* canvas drawing (screen update) */
  let refresh = function() {
    /* check data */
    let max_size = -1;
    let max_spend = -1;
    let table = {};
    for (let i in save) {
      let obj = save[i];
      if (!table[obj.name])
        table[obj.name] = [];
      table[obj.name].push({
        size: obj.size,
        spend: obj.spend
      });
      if (obj.size > max_size)
        max_size = obj.size;
      if (obj.spend > max_spend)
        max_spend = obj.spend;
    }
    /* draw canvas */
    context.clearRect(0, 0, canvas.width, canvas.height);
    let keys = Object.keys(table);
    let SORT_LIST_WIDTH = 150;
    context.fillStyle = "#ffffff";
    context.strokeStyle = "#ffffff";
    for (let i = 0; i < keys.length; i++) {
      let sort = table[keys[i]];
      let last_y = 0;
      for (let j = 1; j < sort.length; j++) {
        let ox = (canvas.width - SORT_LIST_WIDTH) * (sort[j - 1].size / max_size);
        let oy = canvas.height - (canvas.height - 50) * (sort[j - 1].spend / max_spend);
        let x = (canvas.width - SORT_LIST_WIDTH) * (sort[j].size / max_size);
        let y = canvas.height - (canvas.height - 50) * (sort[j].spend / max_spend);
       ...