Enter, Update, Exit, part3

    var data = [10, 20];
    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);
    // Enter example. (dom elements have the same number of data elements)
    // DOM elements = data elements (enter)
    // at this point 2 circles are already created and does not go through the enter routine
    var circle = canvas.selectAll("circle")
                  .data(data)
                  // update any existing circles selected and color those green.
                  .attr("fill", "green")
                  .enter()
                    .append("circle")
                    .attr("cx", 50)
                    .attr("cy", 50)
                    .attr("r", 25)
                    // any data-bound created circles color those to red.
                    // notice that these were not actually triggered.
                    .attr("fill", "red");