Tributary inlet

_.md

[ Launch: Tributary inlet ] 5862691 by enjalot
[ Launch: Tributary inlet ] 5862649 by trinary

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":true,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/5q3uDIw.png"}

inlet.js

var rhombus = "M-30,0 L0,-48 L30,0 L0,48 Z";

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

tributary.loop_type = "period" //"pingpong", "off"
tributary.duration = 3000;

var data = d3.range(101);

tributary.init = function(g) {
  var c = g.append("g").classed("c",true).attr("transform","translate(180,82)");
  c.selectAll(".rhomb").data(data)
    .enter()
	.append("path")
	.classed("rhomb", true)
	.attr("d",rhombus);

}

tributary.run = function(g,t) {
  g.selectAll(".rhomb").data(data)
  .attr("transform",function(d,i) { 
    return "translate(" + [0,i * 5] + ") rotate("+ (i % 5) * 180 * t +") scale(" + [(50-d) / 50,(50-d)/50] + ")";
  });
}

style.css

.rhomb { 
  stroke: teal;
  stroke-width: 1.5px;
  fill:white;
  fill-opacity: 0.2;
  stroke-opacity: 0.5;
}