Using data() enter and exit in D3

<!DOCTYPE html>
<html>
<head></head>
<body></body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>   
<script type="text/javascript">

// Define the SVG domain in a viewbox to get automatic resize to 
// window.  This is a good alternative to d3.scale for simple stuff
svg=d3.select("body")
    .append("svg:svg")
    .attr("height","100%")
    .attr("width","100%")
    .attr("viewBox","0 0 50 50");

// define an arbitrary initial dataset
dataset=[{id:1,x:10,y:10}, 
        {id:23,x:20,y:20}, 
        {id:44,x:30,y:30}, 
        {id:13,x:40,y:40}];

// This helper function defines the initial shape of any new datapoints
function circle_factory(selection) {
    selection.attr("class","series")
        .attr("cx",function(d) {return d.x})
        .attr("cy",function(d) {return d.y})
        .attr("ObjectID",function(d) {return d.id;})  // for easy debugging/monitoring
        .attr("r",5)
        .style("fill","blue");
}

// enter() passes on all data not reflected already (by key) in the selection
// here all data points are passed on, and we append a circle for each
c=svg.selectAll(".series").data(dataset)
    .enter().append("svg:circle").call(circle_factory); 
        
// Subsequently the y value of #44 changes to 10
//   notice we only need to supply the y value and the id
c.data([{id:44,y:10}],function(d) {return d.id;})
    .transition().delay(500).duration(1000).style("fill","red").style("fill","red") 
    .attr("cy",function(d) {return d.y;});

// Both x & y of #23 change
c.data( [ {id:23,x:10,y:40} ], function(d) {return d.id;})
    .transition().delay(2000).duration(1000).style("fill","yellow")
    .style("fill","yellow")
    .attr("cy",function(d) {return d.y;})
    .attr("cx",function(d) {return d.x;});
    
// Now remove #13 by supplying just the key
c.data( [ {id:13} ], function(d) {return d.id;})
    .attr("opacity",1).transition().delay(3500).duration(1000).attr("opacity",0)
    .remove();
    
// finally we go back to initial data without #23

function get_back() {
    dataset = [dataset[0],dataset[2],dataset[3]];
    c=c.data(dataset,function(d) {return d.key;});
    c.exit().remove();        // remove any existing objects not in the dataset
    c.call(circle_factory)    // move existing matching object to data specs
    c.enter().append("svg:circle").call(circle_factory);  // Finally add the non-existing objects
    
}

setTimeout(get_back,5000)   //  create any missing circles (from id)
    
</SCRIPT>

</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js