Ex 4.2

<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>
  <body>
  <script>
    var ds = [
      {"id":1,"name":"John","Age":22},
      {"id":2,"name":"Fred","Age":45},
      {"id":3,"name":"Ann","Age":32}
    ];
    d3.select("body")
      .selectAll("div")
      .data(ds,function(d){return d.id;})
      .enter()
        .append("div")
        .text(function(d){ return d.name});
    // A new array with 1 element with a matching Key
    var updated = [  {"id":2,"name":"Freddy","Age":45} ];
    d3.select("body")
      .selectAll("div")
      .data(updated,function(d){return d.id;})
      // Since we just want to update, we don't need the enter()
      // list, instead, by default the data() method gives us
      // access to the existing data/element joins
      // we just get the matching exiting list and can set 
      // its text. 
      .text(function(d){ return d.name})
      .exit()
      .style('color','red')
 </script>
  </body>
</html>

// Code goes here

/* Styles go here */