Update

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 creates a new array of objects with random properties for x, y, width, and height. We can use this to simulate a change in data, allowing...