Testing data join pattern

<!DOCTYPE html>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

button {
    margin-right: 5px;
  }
</style>

<button class="first">First Data</button>
<button class="second">Second Data</button>
<div class="stage"></div>

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>

https://d3js.org/d3.v3.min.js