[D3] Start Visualizing Data Driven Documents with D3 v4

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');