merging selections

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

var dataEarly = [
      { ldap: "enjalot", x: 0 },
      { ldap: "siumei", x: 1},
      { ldap: "ramesh", x: 2}
    ]
    
    var dataLate = [
      { ldap: "sami", x: 3},
      { ldap: "logan", x: 4},
      
      { ldap: "siumei", x: 5},
      
      { ldap: "phillip", x: 6},
      { ldap: "kristen", x: 7},
      { ldap: "adelaide", x: 8}
    ]
    
    svg.selectAll("circle")
      .data(dataEarly, function(d) {
        return d.ldap
      })
    .enter()
			.append("circle")
      .attr("r", 30)
      .attr("cx", function(d,i) {
        return 50 + d.x * 80
      })
      .attr("cy", 100)
      .attr("fill", "#eda39a")
      .on("mouseover", function(d,i) {
        console.log(i,d)
      })
    
    console.log("get ready")
    setTimeout(function() {
      //console.log("hiiii")
      var circles = svg.selectAll("circle")
        .data(dataLate, function(d) {
          return d.ldap
        })
      
      var enteredCircles = circles.enter()
        .append("circle")
        .attr("r", 30)
        .attr("cy", 100)
        .attr("cx", function(d,i) {
          return 50 + d.x * 80
        })
        .style("opacity", 0)
        
      
      enteredCircles.merge(circles)
        .on("mouseover", function(d,i) {
          console.log(i,d)
        })
        .transition().duration(2000)
        .attr("cx", function(d,i) {
          return 50 + d.x * 80
        })
        .attr("fill", "#9bedd4")
        .attr("stroke", "#111")
        .style("opacity", 1)
      
      
    }, 1000)

</script>
</body>

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