Enter, Update, Exit, part4

Back to table of contents
    var data = [10];
    var width = 500;
    var height = 500;
    var canvas = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);
    var circle1 = canvas.append("circle")
                  .attr("cx", 50)
                  .attr("cy", 100)
                  .attr("r", 25);
    var circle2 = canvas.append("circle")
                  .attr("cx", 100)
                  .attr("cy", 200)
                  .attr("r", 50);
    // Exit example. (There are more dom elements than data elements)
    // DOM elements > data elements (exit)
    // two circles were selected but only one was bounded because only element in data
    // notice the routine still passes through exit and colored circle blue.
    var circle = canvas.selectAll("circle")
                  .data(data)
                  // update any existing circles selected and color those green.
                  .attr("fill", "green")
                  .exit()
                    .attr("fill", "blue");