(function(d3){
  // full screen
  var docEl = document.documentElement,
      bodyEl = document.getElementsByTagName('body')[0];
  var width = window.innerWidth || docEl.clientWidth || bodyEl.clientWidth,
      height = window.innerHeight|| docEl.clientHeight|| bodyEl.clientHeight; 

  var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");

  var data = [5, 6, 7];

  var newCt = 0,
      updateCt = 0;
  for (var i=0; i < 10; i++){
    var circles = svg.selectAll("circle");
    circles = circles.data(data);

    // handle updates      
    circles.attr("r", function(d){
      return Math.pow(d, 2);
    })
      .attr("cx",
            function(d){
              updateCt++;
              return d*50;
            })
      .attr("cy", function(d){ return Math.pow(d,2); })
      .attr("fill", "red");
    
    // handle new elements
    circles.enter()
      .append("circle")
      .attr("r", function(d){
        newCt++;
        return d*5;
      })
      .attr("cx",
            function(d){
              return d*50;
            })
      .attr("cy", function(d){
        return Math.pow(d,2);
      })
      .attr("fill", "red");
    
    // remove old elements
  }
  console.log("number of function calls for enter() elements: " + newCt)                    
  console.log("number of function calls for update elements: " + updateCt)                    


  // handle window resizing
  function updateWindow(){
    var x = window.innerWidth || docEl.clientWidth || bodyEl.clientWidth;
    var y = window.innerHeight|| docEl.clientHeight|| bodyEl.clientHeight;
    svg.attr("width", x).attr("height", y);
  }
  window.onresize = updateWindow;

})(window.d3);