Funky Data Transitions

_.md

[ Launch: Binding Data ] 071679e61af7070e4ab2 by Dan-Nolan
[ Launch: Binding Data ] b6b57cb5592b82f1b698 by Dan-Nolan

config.json

{"description":"Funky Data Transitions","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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var letters = [
  {name: "A", frequency: .08167},
  {name: "B", frequency: .01492},
  {name: "C", frequency: .02780},
  {name: "D", frequency: .04253},
  {name: "E", frequency: .12702}
];

var letters2 = [
  {name: "Y", frequency: .28337},
  {name: "E", frequency: .01492},
  {name: "A", frequency: .182797},
  {name: "O", frequency: .04253},
  {name: "I", frequency: .12702}
];

function name(d) {
  return d.name;
}

d3.select("svg")
	.selectAll('g')
	.data([1,2])
	.enter()
	.append('g')
.attr({
  transform: function(d,i) { return 'translate(0,' + (i * 320 + 27) + ')' }
});


function bindData(letters) { 
  var text = d3.select("svg")
      .selectAll('g')
      .selectAll("text")
      .data(letters, name)
  
  text.attr("class", "update")
    .transition()
      .duration(750)
      .attr("y", function(d,i) { return i *57 + 38 })
  
  text.exit() 
  .attr("class", "exit")
  	.transition()
  	.duration(520)
  	.style('opacity', '0')
  	.remove()
  
  text.enter()
      .append("text")
      .text(function(d,i){ return d.name + ':' + d.frequency })
      .attr({
        y: function(d,i) { return i *57 + 38 },
        x: 19
      })
      .style('opacity', '0')
  	  .transition()
      .delay(520)
      .style('opacity', '1')
  
}

var first = true;

setInterval(function() {
  first = !first;
  bindData(first?letters:letters2);
}, 5000);

style.css

text {
  font: bold 48px monospace;
}

.enter {
  fill: green;
}

.update {
  fill: #333;
}

.exit {
  fill: brown;
}