Skip to content

Instantly share code, notes, and snippets.

@gelicia
Created July 28, 2013 14:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gelicia/6098689 to your computer and use it in GitHub Desktop.
rebinding data lvl 2
{"description":"rebinding data lvl 2","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}
// press the "toggle data" button to move between the three arrays of data
//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: 11},{key:"CA", val: 3},
{key:"NY", val: 6}];
var data_arr3 = [{key:"GA", val: 7},{key:"HI", val: 9},
{key:"LA", val: 3},{key:"RI", val: 4},
{key:"SD", val: 1}];
var allData = [data_arr1, data_arr2, data_arr3];
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, function(d) { return d.key; });
var text = svg.selectAll("text").data(data, function(d) { return d.key; });
var maxValue = d3.max(data, function(d){return d.val});
console.log(maxValue);
var xScale = d3.scale.linear()
.domain([0, maxValue])
.range([0, 500]);
//remove old
rect.exit().transition()
.duration(500)
.attr({
width : 0
})
.remove();
text.exit().remove();
//enter - add new
rect.enter()
.append("rect")
.attr({
x: 56,
y: function(d, i){ return i * 52;},
height : 50
});
var newText = text.enter()
.append("text")
.attr({
x: 11,
y: function(d, i){ return 35+ (i * 52);}
})
//update width + label
rect.transition()
.duration(500)
.delay(500)
.attr({
y: function(d, i){ return i * 52;},
width : function(d) {return xScale(d.val);}
});
text.transition()
.duration(500)
.delay(500)
.attr({
y: function(d, i){ return 35+ (i * 52);}
})
.text(function(d){return d.key;});
}
ul, ol {
margin-left: 46px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment