Tributary inlet

_.md

[ Launch: Tributary inlet ] 5412847 by spsaaibi

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 svg = d3.select("svg");

var data1 = [
  {id: "weezy", value: 100},
  {id: "yeezy", value: 40},
  {id: "jeezy", value: 600}
];


var bars = svg.selectAll("rect")
	.data(data1)
	.enter()
	.append("rect")
.attr({
  width: 30,
  height: function(d,i) {
    return d.value;
  },
  transform: function(d,i) {
    var x = i * 40 + 100;
    var y = 100;
    return "translate(" + [x,y] + ")";
  }
})


var button = svg.append("rect")
	.attr({
      width: 100,
      height: 30,
      x: 426,
      y: 200,
      fill: "#e3e3e3",
      stroke: "#000"
    })
.on("click", function() {
      svg.selectAll("rect.bars")
        .data(data2, function(d) { return d.id })
        .transition()
        //.delay(1000)
        .duration(1499)
        //.ease("linear")
        //.ease("cubic")
        .ease("bounce")
        .attr({
          height: function(d,i) {
          return d.value;
          }
        })