D3 experiments with enter/update/exit

Looking at this article: http://mbostock.github.io/d3/tutorial/circle.html

by Anton

HTML

<svg>
    <circle></circle>
    <circle></circle>
    <circle></circle>
</svg>

CSS

svg {
    width: 400px;
    height: 250px;
    background: #f0f0f0;
}

circle {
    fill: #0088ff;
}

JavaScript

var data = [32, 112, 57, 293];

var width = 400,
    height = 250;

var svg = d3.select("svg")
    .attr('width', width)
    .attr('height', height);

var circles = svg.selectAll("circle")
    .data(data); // this returns the update-set

// Get rid of old
circles.exit().remove();

circles.enter()
    .append("circle"); // after .append the enter-set is merged to update-set

// Update and enter merged
circles
        .attr("cy", function(d, i) { return height / data.length * (i+0.5); })
        .attr("cx", function(d) {return d;})
        .attr("r", function(d) {return Math.sqrt(d);})
    .append("title")
        .text(function(d) {return d;});