The update function

Not only do we have our rectangles, but we've also joined them to a dataset composed of two objects. Both objects share the same properties, namely x, y, width, and height, so it's easy to loop through them and read/bind the values to our visualization. The output of this is a set of static SVG elements. This section will cover how to update the SVG elements and properties as the joined data changes. Let's enhance the previous example to explain exactly how this works (http://localhost:8080/chapter-3/example-4.html):

function makeData(n){ 
  var arr = []; 
 
  for (var i=0; i<n; i++){ 
    arr.push({ 
      x:Math.floor((Math.random() * 100) + 1), 
      y:Math.floor((Math.random() * 100) + 1), 
      width:Math.floor((Math.random() * 100) + 1), 
      height:Math.floor((Math.random() * 100) + 1) 
    }) 
  }; 
 
  return arr; 
} 

This function...