just another inlet to tributary

inlet.js

// SVG canvas attributes
var margin = 50;
    width = 600,
    height = 600;

// selection (instead of select body....)
svg = d3.select('svg');

// define body
svg
  .attr('width',width)
  .attr('height', height);


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

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



// Generate some data
var data = [];

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

// Bind Data
var squares = svg
  .selectAll('rect')
  .data(data)
  .enter()
  .append('svg:rect');

var sqW = 100;

// Set Data Attributes
squares
    .attr('rx',function(d){return 23})
    .attr('ry',function(d){return 23})
    .attr('x', function(d){return x_scale(d.x)})
    .attr('y', function(d){return y_scale(d.y)})
    .attr('width', sqW)
    .attr('height',100)
    .attr('stroke','black')
	.style("fill", function(d,i) { return 'red';})
    .on("mouseover", function() {
        d3.select(this).transition()
        .attr('width', function() { return sqW+10})
        .attr('height', function() { return sqW+10})
        .delay(0)
        .duration(500)
		.ease("elastic", 10, .3)         
    });