Metro Style

_.md

[ Launch Inlet ]
Gist #4464996 [ Launch Inlet ]
Gist #4460789 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Metro Style","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6468749999999999,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

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

var x = 50;
var y = 80;

var colors = ["#0A4380", "#3B6592", "#1E3146", "#233344","#173758","#062A50","#325274","#2C435A","#0D253F","#33506F"]



var cols = 4;
var counterRow = 1;

for(var i = 0; i < 10; i++){
	var col = colors[i];
    svg.append("rect")
      .attr("width", 100)
      .attr("height", 100)
      .attr("x", x)
      .attr("y", y)
      .style("fill", col)
    
    x += 100;
  
  if(counterRow % cols == 0){
  
  	y += 100;
    
    counterRow = 1;
    cols -= 1;
    x = 50;
  }else{
  	counterRow += 1;
  }
  
  
   
  
}