[ Launch: rebinding data lvl 2 ] 6524488 by neshmi
[ Launch: rebinding data ] 6098689 by gelicia
[ Launch: rebinding data ] 6097249 by gelicia
[ Launch: rebinding data ] 6097129 by gelicia
-
-
Save neshmi/6524488 to your computer and use it in GitHub Desktop.
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"} |
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
//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