D3 start drawing

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v4.min.js"></script>
    <style>
        .chart {
            background: lightgray;
            border: 1px solid black;
            min-width: 200px;
            min-height: 350px;
        }
    </style>
    <title>D3V4</title>
</head>

<body>
    <div class="chart">
        <!-- -Billy and Cindy are already on the page, and has corrsponding data-->
        <div>Billy</div>
        <div>Cindy</div>

        <!-- Undefined is not in the data -->
        <div>Undefined</div>
    </div>
    <script>
      var scores = [
  { name: 'Alice', score: 96 },
  { name: 'Billy', score: 83 },
  { name: 'Cindy', score: 91 },
  { name: 'David', score: 96 },
  { name: 'Emily', score: 88 }
];

// There are three selection:
// enter: which in the data, but not yet on the page
// upate: which in the data, and also in the page
// exit: which not in the data, but exist on the page


// update function handle those elements which already on the page
var update = d3.select('.chart')
    .selectAll('div')
    .data(scores, function(d) {
        // A compare function which checks whether there are existing elements
        return d ? d.name : this.innerText;
    })
    .style('color', 'blue');

var enter = update.enter()
    .append('div')
    .text(function(d) {
        return d.name;
    })
    .style('color', 'green');

update.exit()
    .style('width', '1px')
    .style('height', '50px')
    .style('background', 'white')
    .style('border', '1px solid black'); 

// You can merge selection by using .merge() function    
update.merge(enter)
    .style('width', d => d.score + 'px')
    .style('height', '50px')
    .style('background', 'lightgreen')
    .style('border', '1px solid black');
    </script>
</body>

</html>

// Code goes here

/* Styles go here */