gistfile1.txt

var iteration = 0;

var createCells = function(l, iteration) {
    var data = generateCoordinates(l);

    var svg = d3.select("svg");

    var gs = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g");

    gs.append("rect")
            .attr("y", function(d){return d.y;})
            .attr("x", function(d){return d.x;})
            .attr("width", 30)
            .attr("height", 30)
            .style("fill", "white")
            .style("stroke", "black")
            .style("stroke-width", "2px")
            .attr("class", function(d){return "cell_" + d.id + "_" + iteration;})

    gs.append("text")
            .text(function(d){return d.text;})
            .style("alignment-baseline", "central")
            .attr("y", function(d){return d.y + 15;})
            .attr("x", function(d){return d.x + 2;})
            .attr("class", function(d){return "cell_text_" + d.id + "_" + iteration;})
};

var showPivot = function(number, index, iteration) {
    var cell = d3.selectAll(".cell_" + index + "_" + number + "_" + iteration);
    var text =  d3.selectAll(".cell_text_"+ index + "_" + number + "_" + iteration);

    cell.transition().attr("x",620)
            .attr("y", (iteration + 1) * 90);


    text.transition().attr("x",620)
            .attr("y", (iteration + 1) * 90);

}

var generateCoordinates = function(ql) {
    var result = [];
    var o = {};
    var x = 100;
    var y = 90;

    for (var i=0; i < ql.length; i++)
    {
        o = {text: ql[i], id:i +"_" + ql[i], x:x, y:(iteration + 1) * y, index:i};
        result.push(o);
        x+=29;
    }

    return result;
}


$(document).ready(function() {
    createCells([1,3,7,5,6], iteration);
    iteration = iteration + 1;
    showPivot(3, 1, 0);
    createCells([1,7,5,6], 2);
});