[ 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
-
-
Save biovisualize/6099038 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: "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]); | |
//enter - add new | |
var groupEnter = group.enter() | |
.append('g') | |
.style({ | |
opacity : 1 | |
}); | |
groupEnter.append("rect") | |
.attr({ | |
x: 56, | |
height : 50 | |
}); | |
groupEnter.append("text") | |
.attr({ | |
x: 11, | |
dy: 30 | |
}) | |
group.transition().attr({transform: function(d, i){ return 'translate(0, '+(i*52)+')'; }}); | |
//update width | |
group.each(function(d, i){ | |
d3.select(this) | |
.select('rect').transition() | |
.attr({ | |
width : function(d) {return xScale(d.val);} | |
}); | |
}) | |
group.selectAll('text').text(function(d){return d.key;}); | |
//remove old | |
group.exit() | |
.transition() | |
.style({ | |
opacity : 0 | |
}) | |
.remove(); | |
} |
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