Untitled

var rw = [40, 40]
var rh = [40, 40]
var x0 = 15;
var y0 = 10;
var color = ["#ff0000", "#0000ff"]

var nr = 6;
var nc = 6;

var sw = parseInt(d3.select("svg").style("width"))
var sh = parseInt(d3.select("svg").style("height"))
var xoffset = sw / nr;
var yoffset = sh / nc;

delta.duration = 1500;
//delta.ease = d3.ease("linear")
//delta.ease = d3.ease("bounce")
delta.ease = d3.ease("cubic")

delta.clone_opacity = 0.34145
var corners = 37;
var matrix = _.map(d3.range(nr), function(j){  return d3.range(nc); })
delta.append = function(g) {
    g.append("g").attr("class", "shapes")
    var shape_row = g.select("g.shapes").selectAll("g.shape_row")
        .data(matrix)
        .enter().append("g").attr("class", "shape_row")

    var shapes = shape_row.selectAll("g.shape")
        .data(function(d) { return d; })
      .enter().append("g").attr("class", "shape");

    var shapes = g.selectAll(".shapes g.shape_row").selectAll("g.shape")
    shapes.append("rect")
        .attr("width", rw[0])
            .attr("height", rh[0])
            .attr("fill", "#ff0000")
        .attr("rx", corners)
        .attr("ry", corners)

}

delta.run = function(t, g) {
    //console.log("t", t)
    var shapes = g.selectAll("g.shapes g.shape_row").selectAll("g.shape")
    var rect = shapes.select("rect")
        .attr("width", function(d,i) {
            var w = d3.interpolate(rw[0], rw[1])(t);
            return w;
        })
        .attr("height", function(d,i) {
            var h = d3.interpolate(rh[0], rh[1])(t)
            return h;
        })
        .attr("fill", function(d,i,j) {
            //var c0 = color[i%2]
            var c0 = d3.interpolateHsl(color[0], color[1])(i / nr)
            //console.log(i, color[0])
            //var c1 = d3.scale.category20b()(3)
            //var c1 = color[(i%2 * -1) + 1]
            var c1 = d3.interpolateHsl(color[0], color[1])(j / nc)
            return d3.interpolateHsl(c0, c1)(t)
        })
        .attr("transform", function(d,i,j) {
            var oddneg = ((i % 2) * -2 + 1)
            //oddneg = 1
            var tt = t - 0.5
            var xt = tt * oddneg - -0.5 * oddneg
            var yt = tt * tt * oddneg - .25 * oddneg
            //var x1 = x[0] + x[1] * xt
            var x1 = x0 + xoffset * xt
            var y1 = y0 + yoffset * yt
            //var xx = d3.interpolate(x[0], x1)(t) * i * xoffset
            //var yy = d3.interpolate(y[0], y1)(t) * j * yoffset
            var xx = x1 + i * xoffset
            var yy = y1 + j * yoffset
            return "translate(" + [
                xx,
                yy
                ] + ")"
        })
}