Enter, Update, Exit, part2

    var data = [10, 20];
    var width = 500;
    var height = 500;
    var canvas = d3.select("body")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", height);
    var circle = canvas.append("circle")
                  .attr("cx", 50)
                  .attr("cy", 100)
                  .attr("r", 25);
    // Enter example. (more data elements than existing circle elements)
    // DOM elements < data elements (enter)
    // at this point there's one circle created already
    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.
                    .attr("fill", "red");