d3-sort-visualization/js/visualizer.js

/**
 *
 */
var Visualizer = function() {};

Visualizer.spacerW = 5;
Visualizer.itemW = 14;
Visualizer.itemH = 50;
Visualizer.itemY = 20;

Visualizer.svg = null;
Visualizer.groups = null;
Visualizer.instructions = null;

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

    this.svg = d3.select('body').append('svg')
        .attr('class', 'quicksort-random');

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

    this.groups.append('rect')
        .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})`;
        });

    this.groups.append('text')
        .text(function t(d) { console.log(d.val); return d.val; })
        .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)`;
        });

    // this.svg.append('sometext').id('left-marker'); L
    // this.svg.append('sometext').id('right-marker'); R
    // this.svg.append('sometext').id('pivot-marker'); triangle or arrow
};

/**
 *
 */
Visualizer.prototype.swap = function(indexA, indexB) {
    // Move up
    // NOTE Two way binding here between dataset and function parameter?
    // NOTE swapping will not reorder index and i parameter will be off
    // NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
    // TODO now that elements aren't cached, is there a need for .index?
    this.groups
        .transition().duration(400)
            .attr('transform', function doTransform(d) {
                if (d.index === indexA) {
                    d.index = indexB;
                }
                else if (d.index === indexB) {
                    d.index = indexA;
                }

                return `translate(${d.index * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
            })
};

/**
 *
 */
Visualizer.prototype.moveMarker = function(id, toIndex) {
    this.svg.select('#' + id).attr('x', toIndex * 22);
};

/**
 *
 */
Visualizer.prototype.addMarker = function(id) {
    // this.svg.append('text')
    //     .attr('id', id)
    //     .attr('x', 53)
    //     .attr('y', 50)
    //     .attr('width', 20)
    //     .attr('height', 20)
    //     .attr('fill', '#aaa')
    //     .attr('font-size', 20)
    //     .attr('alignment-baseline', 'middle')
    //     .attr('text-anchor', 'middle')
    //     .attr('transform', 'rotate(0 53,50)')
    //     .text('P');
};

/**
 *
 */
Visualizer.prototype.fade = function(startIndex, endIndex) {
    console.log(`fading from ${startIndex} to ${endIndex}`)

    this.svg.selectAll('rect')
        // NOTE this replaces the fill function reference for each rectangle - key point!
        .attr('fill', function fill(d) {
            if (d.index >= startIndex && d.index <= endIndex) {
                console.log(`${d.index} to ${d.fade}`)
                return d.fade;
            }
            return d.fill;
        });
};

/**
 *
 */
Visualizer.prototype.unfade = function() {
    this.svg.selectAll('rect')
        .attr('fill', function fill(d) {
            console.log(`unfade ${d.index}`)
            return d.fill;
        })
};

/**
 *
 */
Visualizer.prototype.followInstruction = function(instructions, index) {
    if (index >= instructions.length) {
        return;
    }

    var i = instructions[index];
    console.log(i);

    if (i.operation === 'swap' && i.left < i.right) {
        this.swap(i.left, i.right);
        setTimeout(this.followInstruction.bind(this, instructions, index + 1), 400);
    }
    else if (i.operation === 'init') {
        // this.unfade();
        // this.fade(0, i.left - 1);
        // this.fade(i.right + 1, 1000)
        this.followInstruction(instructions, index + 1);
    }
    else if (i.operation === 'swap') {
        this.followInstruction(instructions, index + 1);
    }
    else {
        this.followInstruction(instructions, index + 1);
    }
};