2016-02-09T21-10-12-05-00-transition-example.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js" charset="utf-8"></script>
</head>
<body>
  <div id="vizcontainer">
    <svg style="width:500px;height:500px;border:1px lightgray solid;" />
  </div>
  <script type="text/javascript">
    d3.select("svg")
      .append("circle")
      .attr("r", 20)
      .attr("cx",20)
      .attr("cy",20)
      .style("fill","red");

    d3.select("svg")
      .append("text")
      .attr("id", "a")
      .attr("x",20)
      .attr("y",20)
      .style("opacity", 0)
      .text("HELLO WORLD");

    d3.select("svg")
      .append("circle")
      .attr("r", 100)
      .attr("cx",400)
      .attr("cy",400)
      .style("fill","lightblue");

    d3.select("svg")
      .append("text")
      .attr("id", "b")
      .attr("x",400)
      .attr("y",400)
      .style("opacity", 0)
      .text("Uh, hi.");

    d3.select("#a").transition().delay(1000).style("opacity", 1);
    d3.select("#b").transition().delay(3000).style("opacity", .75);

    d3.selectAll("circle").transition().delay(3000).duration(2000).attr("cy", 200);
  </script>
</body>
</html>

Transition example from D3.js in Action book. Pretty cool!