d3 transitions with bar graphs

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"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:60}
  ];

var data2 = [
  {id: "weezy", value:171},
   {id: "yeezy", value:129},
   {id: "jeezy", value:42}
  ];

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]+")";
      }
    })
    .classed("bars",true)
//add bars class above so that the 
//selection used for the transition won't 
//also affect the button since it's also a rect

    
//below in the .data(data2 line the function(d)
//parameter passes the item ids as keys so that 
//reordering items in the array won't change the 
//order of the bars within the graph
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(1000)
        //.ease("linear")
        //.ease("cubic")
        .ease("bounce")
        .attr({
           height: function(d,i){
        return d.value;
      }   
        })
        
        
    })