rebinding data lvl 1

_.md

[ Launch: rebinding data ] 6097249 by gelicia
[ Launch: rebinding data ] 6097129 by gelicia

config.json

{"description":"rebinding data lvl 1","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","ajax-caching":true}

inlet.js

// press the "toggle data" button to move between the two arrays of data

//http://stackoverflow.com/questions/10710327/best-way-to-rebind-data-in-d3-js
var data_arr1 = [1,7,3,4,5,6];
var data_arr2 = [3,2,1];
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 rect = svg.selectAll("rect").data(data);
  
  var xScale = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 500]); 

  //enter - add new
  rect.enter()
  .append("rect")
  .attr({
    x: 9,
    y: function(d, i){ return i * 52;},
    height : 50
  });
  
  //update width
  rect.attr({
	  width : function(d) {return xScale(d);}
  });
  
  //remove old
  rect.exit().remove();
}

style.css

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