rebinding data lvl 2 fixing data attempt

_.md

[ Launch: rebinding data lvl 2 ] 6099312 by gelicia
[ Launch: rebinding data lvl 2 ] 6099038 by biovisualize
[ Launch: rebinding data ] 6098689 by gelicia
[ Launch: rebinding data ] 6097249 by gelicia
[ Launch: rebinding data ] 6097129 by gelicia

config.json

{"description":"rebinding data lvl 2 fixing data attempt","endpoint":"","display":"div","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}},"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/5IMhkWV.png"}

inlet.js

//http://stackoverflow.com/questions/10710327/best-way-to-rebind-data-in-d3-js
var data_arr1 = [{key:"AZ", val: "5"},{key:"CT", val: "4"},
                 {key:"GA", val: "3"},{key:"ID", val: "6"},
                 {key:"KY", val: "8"},{key:"MN", val: "2"},
                 {key:"NY", val: "4"}];

var data_arr2 = [{key:"AZ", val: "2"},{key:"CA", val: "3"},
                 {key:"NY", val: "6"}];
var allData = [data_arr1, data_arr2];
var idxToggle = 0;

var display = d3.select("#display");
  
display.append("button")
.text("toggle data")
.on("click", function(){
	idxToggle = (idxToggle + 1 ) % (allData.length)
	d3.selectAll("svg").call(drawChart, allData[idxToggle]);
});
 
var svg = display.append("svg");

svg.call(drawChart, allData[idxToggle]);
 
function drawChart(svg, data) {
  var group = svg.selectAll("g").data(data, function(d) { return d.key; });
  
  var xScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d){return d.val})])
    .range([0, 500]); 
  
   //remove old
  group.exit()
    .transition()
    .style({
      opacity : 0
    })
    .remove();

  //enter - add new
  var groupEnter = group.enter()
  .append('g')
  .style({
      opacity : 1
    }).attr({transform: function(d, i){ return 'translate(0, '+(i*52)+')'; }});

  groupEnter.append("rect")
    .attr({
      x: 56,
      height : 50
    });
   
  groupEnter.append("text")
    .attr({
		x: 11,
		dy: 30
    });
 
  
  group.transition().delay(500).attr({transform: function(d, i){ return 'translate(0, '+(i*52)+')'; }});
   
  //update width
  group.each(function(d, i){ 
    d3.select(this)
    .select('rect').transition()
      .delay(500)
    .attr({
        width : function(d) {return xScale(d.val);}
    });
  })
  
  group.selectAll('text').text(function(d){return d.key;});
  
 
}

style.css

ul, ol { 
  margin-left: 46px;
}