D3NutsAndBolts4

by Simon Raper

HTML

<svg></svg>

JavaScript

circleData = [{
    "x": 10,
        "y": 10,
        "r": 10
}, {
    "x": 50,
        "y": 50,
        "r": 15
}, {
    "x": 90,
        "y": 90,
        "r": 30
}]

svg = d3.select("svg");

svg.selectAll(".node")
    .data(circleData)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function (d) {
    return d.x
})
    .attr("cy", function (d) {
    return d.y
})
    .attr("r", function (d) {
    return d.r
});

setTimeout(dropCircle, 1000);

function dropCircle() {
    circleData.pop();
    circles = svg.selectAll(".node");
    circles.data(circleData).exit().remove();
}