just another inlet to tributary

inlet.js

var margin = 50,
    width = 667,
    height = 633;

tributary.duration =2000;
tributary.loop = "pingpong";
var colors = ["#FC28DA", "#494949"];
cs = d3.interpolateHsl("#FA1B1B", "#A7D869");

svg = d3.select('svg');

svg
   .attr('width', width)
   .attr('height',height);

tributary.init = function(g) {
  
};
tributary.run = function(g,t) {
  n =32.88*t ;
  if (n>500){n=1};
  
  d3.selectAll('rect').remove();
  var dat = new Array();

  for (var i = 0; i < n; i++){
   for(var j = 0; j < n; j++){
     var point = {x:(i+1)/(n+1), y:(j+1)/(n+1)};
     dat.push(point);
    }
   }

  g.selectAll('rect')
   .data(dat)
   .enter()
   .append('svg:rect')
  .attr('rx',function(d){return t*90/n})
   .attr('ry',function(d){return t*90/n})
  .attr('x', function(d){return x_scale(d.x)})
  .attr('y', function(d){return y_scale(d.y)})
   .attr('width', 250/n)
   .attr('height',250/n)
    .attr('stroke-width',54)
	.style("fill", function(d,i) {
        return cs(4*d.x*t);
    });
  d3.selectAll('rect').on('mouseover',function(d){return d.x});
  
};


corners = 2;

x_scale = d3.scale.linear()
   .range([margin,width-margin])
   .domain([0,1]);

y_scale = d3.scale.linear()
   .range([height-margin,margin])
   .domain([0,1]);