d3-sort-visualization/js/visualizer.js

/**
 *
 */
function Visualizer(parent) {
    this.actions = [];
    this.actionIndex = 0;
    this.parent = parent;
    this.sorter = null;
    this.paused = true;
    this.groups = this.initSvg();

    var sorterSidebarContainer = document.createElement('div');
    sorterSidebarContainer.className = 'sorter-sidebar';
    parent.appendChild(sorterSidebarContainer);

    var properties = this.initProperties();
    parent.appendChild(properties);

    var controls = this.initControls();
    parent.querySelector('.sorter-sidebar').appendChild(controls);

    var messages = this.initMessages();
    parent.querySelector('.sorter-sidebar').appendChild(messages);

    var range = this.initRange();
    parent.querySelector('.sorter-sidebar').appendChild(range);

    switch(parent.attributes['data-algorithm'].value) {
        case 'quick':
            this.sorter = new QuickSort();
            break;

        case 'merge':
            this.sorter = new MergeSort();
            break;

        case 'selection':
            this.sorter = new SelectionSort();
            break;

        case 'bubble':
            this.sorter = new BubbleSort();
            break;

        case 'insertion':
            this.sorter = new InsertionSort();
            break;

        case 'shell':
            this.sorter = new ShellSort();
            break;

        case 'radix':
            this.sorter = new RadixSort();
            break;

        default:
            throw new Error('Unrecognized sort type.');
    }

    this.actions = this.sorter.generate(10);
};

// Static properties (global, mutable)
Visualizer.spacerW  = 5;
Visualizer.itemW    = 14;
Visualizer.itemH    = 50;
Visualizer.padding  = 10;
Visualizer.bg0      = '#284A8F';
Visualizer.bg1      = '#C25C49';
Visualizer.bg2      = '#CCCC53';
Visualizer.fg0      = '#e7e7e7';
Visualizer.fg1      = '#e7e7e7';
Visualizer.fg2      = '#000000';

/**
 * Instructions contain a string with the name of a function in this object which is called to perform an action.
 */
Visualizer.prototype.go = function() {
    if (this.actionIndex >= this.actions.length) {
        return;
    }

    var obj = this.actions[this.actionIndex];
    var action = new Array();

    for (var key in obj) {
        if (obj[key].hasOwnProperty) {
            action.push(obj[key]);
        }
    }

    action[1] = this.groups[action[1]];
    var delay = action[2];
    var args = action.slice(1);

    action[0].apply(this, args);

    // TODO add tabs for best/worst cases
    // TODO add links to stats
    // TODO fix init slider and match to width
    // TODO heap sort
    // TODO extra memory
    // TODO disable next button if no further actions and during action
    // TODO source code tab

    // NOTE functional programming discussion
    // NOTE interesting (anti?)pattern here.
    // NOTE use of call() vs apply() (apply only delivered first array item as string)
    // if (typeof operation === 'function') {
    //     operation.call(this, action);

    if (delay === 0) {
        this.actionIndex++;
        this.go();
    }
    else if (this.paused === false) {
        this.actionIndex++;
        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})`;
            });
};