Skip to content

Instantly share code, notes, and snippets.

@shancarter
Last active February 18, 2016 01:55
Show Gist options
  • Save shancarter/f3a50e2c6291fbb0f36b to your computer and use it in GitHub Desktop.
Save shancarter/f3a50e2c6291fbb0f36b to your computer and use it in GitHub Desktop.
Testing data join pattern
<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style media="screen">
.child {
margin: 10px 0;
color: white;
}
button {
margin-right: 5px;
}
</style>
<button class="first">First Data</button>
<button class="second">Second Data</button>
<div class="stage"></div>
<script>
var data = [
["red", "blue", "green"],
["red", "blue", "orange", "magenta"]
];
var size = 100;
function render(data) {
var stage = d3.select(".stage");
var div = stage.selectAll(".group").data(data),
divExit = div.exit().transition().style("opacity", 0).remove(),
divEnter = div.enter().append("div").attr("class", "group"),
divUpdate = div.style("color", function(d) { return d; });
var childEnter = divEnter.append("div")
.attr("class", "child")
.style("opacity", 1e-6)
.style("width", size + "px"),
childUpdate = divUpdate.select(".child")
.transition().duration(1000)
.style("opacity", 1)
.style("background", function(d) { return d; })
.style("width", size + "px");
childEnter.append("button").text("boom")
childEnter.append("span").text(function(d) { return d; })
}
d3.select(".first").on("click", function() {
size = 200;
render(data[0]);
});
d3.select(".second").on("click", function() {
size = 300;
render(data[1]);
});
render(data[0]);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment