simple_transition

_.md

[ Launch: simple_transition ] 7029694 by jshumakerpruitt

config.json

{"description":"simple_transition","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/53VUI9s.gif","ajax-caching":true}

inlet.js

var svg = d3.select("svg");
var data1 = [
  {id: "first", value: 10},
  {id: "second", value: 107},
  {id: "third", value: 79} 
];

var data2 = [
  {id: "first", value: 122},
  {id: "second", value: 27},
  {id: "third", value: 82} 
];


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 + 101
        var y = 100;
        return "translate(" + [x, y] + ")";
      }
    }).classed("bars", true);

var button = svg.append("rect")
	.attr({
      width: 100,
      height: 30,
      x: 433,
      y: 117,
      fill: "#C5C5C5",
      stroke: "#000"
    }).on("click", function() {
      svg.selectAll("rect.bars")
      .data(data2, function(d) { return d.id })
      .transition()
      .duration(1000)
      .ease("bounce")
      .attr({
        fill: "red",
        height: function(d,i) {
          return d.value;
        }
      })
    });