Transition practice

_.md

[ Launch: Transition practice ] 6130959 by tarvaina

config.json

{"description":"Transition practice","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/0Z3UrYn.png"}

inlet.js

var data = [
  {id: "A Finn", value: 532},
  {id: "A Swede", value: 87},
  {id: "A Norwegian", value: 246}
];

var data2 = [
  {id: "A Finn", value: 53},
  {id: "A Swede", value: 32},
  {id: "A Norwegian", value: 346}
];

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


var bars = svg.selectAll("rect.bars").data(data)
  .enter()
  .append("rect")
  .classed("bars", true)
  .attr({
    x: function(d, i) { return 30 + i * 40; },
    y: 30,
    width: 30,
    height: function(d, i) { return d.value; },
    fill: "#FF0000"
  });

var button = svg.append("rect")
  .classed("button", true)
  .attr({
    x: 200,
    y: 30,
    width: 80,
    height: 30,
    fill: "#CCCCCC",
    stroke: "#000000"
  })
  .on("click", function() {
    bars
      .data(data2, function(d) { return d.id; })
      .transition()
      .duration(500)
      .attr("height", function(d, i) { return d.value; });
  });