d3-sort-visualization/js/visualizer-inits.js

/**
 *
 */
Visualizer.prototype.initItems = function(n) {
    var data = this.sorter.generate(n);
    var shuffled = this.sorter.shuffle(data);
    var ordered = Object.create(shuffled);
    ordered = this.sorter.sort(ordered, 0, ordered.length - 1);

    // A swap on the dataset will not take effect until after transition is complete, so custom index is required.
    var n = 0;
    for (var i in shuffled) {
        shuffled[i].index = n++;
    }

    // Items
    this.groups = this.svg.selectAll('g').data(shuffled).enter().append('g')
        .attr('transform', `translate(0, ${Visualizer.itemY})`);

    this.groups.append('rect')
        .attr('class', 'item')
        .attr('height', Visualizer.itemH)
        .attr('width', Visualizer.itemW)
        .attr('fill', function doFill(d) { return d.fill; });

    this.groups.transition(500)
        .attr('transform', function doTransform(d, i) {
            return `translate(${i * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
        });

    // Item labels
    this.groups.append('text')
        .text(function t(d) { return d.value; })
        .attr('fill', '#aaa')
        .attr('font-size', 10)
        .attr('font-family', 'sans-serif')
        .attr('transform', function doTransform(d) {
            return `rotate(90 0,0), translate(5, -3)`;
        });

    // Markers
    var m1 = this.svg.append('g')
        .attr('class', 'marker')
        .attr('id', 'marker1');

    m1.append('rect')
        .attr('height', Visualizer.itemW)
        .attr('width', Visualizer.itemW);

    m1.append('text')
        .attr('text-anchor', 'middle')
        .attr('x', (Visualizer.itemW / 2))
        .attr('y', 10);

    var m2 = this.svg.append('g')
        //temp
        .attr('transform', 'translate(19,0)')
        //temp
        .attr('class', 'marker')
        .attr('id', 'marker2');

    m2.append('rect')
        .attr('height', Visualizer.itemW)
        .attr('width', Visualizer.itemW);

    m2.append('text')
        .attr('text-anchor', 'middle')
        .attr('x', (Visualizer.itemW / 2))
        .attr('y', 10);

    setTimeout(this.followInstruction.bind(this, 0), 500);
};

/**
 *
 */
Visualizer.prototype.initMessages = function() {
    var container = document.createElement('div');
    container.className = 'message-container';

    var div1 = document.createElement('div');
    div1.className = 'message';

    var div2 = document.createElement('div');
    div2.className = 'message';

    var div3 = document.createElement('div');
    div3.className = 'message';

    container.appendChild(div1);
    container.appendChild(div2);
    container.appendChild(div3);

    return container;
};

/**
 *
 */
Visualizer.prototype.initRange = function() {
    var rangeInput = function(label, event) {
        label.innerHTML = 'Number of items (n) = ' + event.target.value;
    };

    var rangeChange = function(event) {
        this.init.items(event.target.value);
    };


    var container = document.createElement('div');
    container.className = 'range-container';

    var msg = document.createElement('div');
    msg.className = 'msg';
    msg.innerHTML = "Number of items (n) = 10";

    var range = document.createElement('input');
    range.setAttribute('type', 'range');
    range.setAttribute('value', 40);
    range.setAttribute('min', 5);
    range.setAttribute('max', 80);
    range.addEventListener('change', rangeChange.bind(this));
    range.addEventListener('input', rangeInput.bind(null, msg));

    container.appendChild(range);
    container.appendChild(msg);

    return container;
},

/**
 *
 */
Visualizer.prototype.initControls = function() {
    var play = document.createElement('button');
    play.className = 'fa fa-play';
    play.title = 'Play'
    play.addEventListener('click', onclick);

    var back = document.createElement('button');
    back.className = 'fa fa-step-backward';
    back.title = 'Step Backward';
    back.addEventListener('click', onclick);

    var forward = document.createElement('button');
    forward.className = 'fa fa-step-forward'
    forward.title = 'Step Forward';
    forward.addEventListener('click', onclick);

    var reset = document.createElement('button');
    reset.className = 'fa fa-fast-backward';
    reset.title = 'Restart'
    reset.addEventListener('click', onclick);

    var stat1 = document.createElement('div');
    stat1.className = 'stat';
    stat1.innerHTML = 'Swaps: 999';

    var stat2 = document.createElement('div');
    stat2.className = 'stat';
    stat2.innerHTML = 'Comparisons: 999';

    var container = document.createElement('div');
    container.className = 'controls-container';

    container.appendChild(reset);
    container.appendChild(back);
    container.appendChild(play);
    container.appendChild(forward);
    container.appendChild(stat1);
    container.appendChild(stat2);

    return container;
};