Tributary inlet

_.md

[ Launch: Tributary inlet ] 4981314 by trinary

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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":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}

inlet.js

var c = d3.select("svg").append("g").classed("container",true);
var data = [1,1,1,1];
c.selectAll(".box").data(data)
	.enter()
	.append("rect")
	.classed("box",true)
    .attr("x",function(d,i) {return i * 30})
    .attr("y",200)
    .attr("width",30)
    .attr("height",1)
    .style("fill","#696")
    .transition()
    .duration(500)
.attr("height",function(d) {return d});

function redraw(dat) {
  c.selectAll(".box").data(dat)
  .transition()
  .duration(2000)
  .attr("height",function(d) {return d});
}
redraw([10,10,10,10]);
setTimeout(redraw([20,40,60,80]),6000);