[dot append: 06] simple transition

_.md

[ Launch: [dot append: 06] simple transition ] 6285836 by jgautsch

config.json

{"description":"[dot append: 06] simple transition","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}},"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,"thumbnail":"http://i.imgur.com/Ag8kDmx.png"}

inlet.js

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

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

var data2 = [
  {id: "weezy", value: 607},
  {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);

var which = 1
  

var button = svg.append("rect")
	.attr({
      width: 100,
      height: 30,
      x: 426,
      y: 200,
      rx: 7,
      fill: "#e3e3e3",
      stroke: "#000"
	})

	.on("click", function() {
      
      if (which == 1) {
        
        which = 2;
  		svg.selectAll("rect.bars")
        	.data(data2)
        	.transition()
        	.delay(100)
        	.duration(1000)
        	//.ease("linear")
        	//.ease("cubic")
        	.ease("bounce")
	        .attr({
              height: function(d,i) {
                return d.value;
              }
    	    })
      } else {
        
        which = 1;
        svg.selectAll("rect.bars")
        	.data(data1)
        	.transition()
        	.delay(100)
        	.duration(1000)
        	//.ease("linear")
        	//.ease("cubic")
        	.ease("bounce")
	        .attr({
              height: function(d,i) {
                return d.value;
              }
    	    })
        
      }
	})

style.css

.background {
 visibility: visible !important; 
}

.extent {
 visibility: visible !important; 
 fill: #FF44E1;
}

.resize rect {
 visibility: visible !important; 
	fill: #2C1DD8;
}