shancarter/index.html

## index.html
<!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>
	<!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>