exit transition

_.md

[ Launch: exit transition ] 976b748f66e81a836c75 by ninjaPixel

config.json

{"description":"exit 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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/CEqLgQn.png"}

inlet.js

var data = [50, 100, 150, 200];
var divs = d3.select('svg')
  .selectAll('div.item')
  .data(data);
divs.enter()
  .append('div').classed('item', true);
divs.style({
  width:'20px',
  height:function(d) { return d + 'px' },
  margin:'15px',
  float:'left',
  'background-color':'#25B0B0'
});

data = [50, 100];
divs = d3.select('#exit .right')
  .selectAll('div.item')
  .data(data);
divs.exit().transition(20).style({'background-color':'#B42424'});