[ Launch: rebinding data ] 6098689 by gelicia
[ Launch: rebinding data ] 6097249 by gelicia
[ Launch: rebinding data ] 6097129 by gelicia
rebinding data lvl 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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;}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ul, ol { | |
margin-left: 46px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment