just another inlet to tributary

inlet.js

var margin = 50,
    width = 600,
    height = 600;

var colors = ["#2C8121", "#494949"];
var n = 5;

svg = d3.select('svg');

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

data = 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)};
     data.push(point);
   }
}


cs = d3.interpolateHsl("#C43838", "#4AC054");
function zCord(x,y){
  
  return Math.sqrt(1-Math.pow(x,2)-Math.pow(y,2));

}


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]);

svg
  .selectAll('rect')
   .data(data)
   .enter()
   .append('svg:rect')
  .attr('rx',function(d){return 4})
   .attr('ry',function(d){return 4})
  .attr('x', function(d){return x_scale(d.x)})
  .attr('y', function(d){return y_scale(d.y)})
   .attr('width', 200/n)
   .attr('height',200/n)
	.style("fill", function(d,i) {
        return cs(Math.random());
    });