D3 enter selection

enter.js

// html:
// <ul>
//   <li></li>
//   <li></li>
// </ul>

const users = [{
  id: 1,
  name: 'Nancy',
  role: 'person'
}, {
  id: 2,
  name: 'Bart',
  role: 'cartoon'
}, {
  id: 3,
  name: 'Maggie',
  role: 'cartoon'
}];

const enterUsers = d3.select('ul.app-user-list')
  .selectAll('li.app-user')
  .data(users, keyFunc)
  .enter();

// prints 1
// Nancy and Bart match existing "li" elements,
// so they are not included in the enter set.
//
// Maggie does not match an existing "li" element,
// so there is one element in the enter set.
console.log(enterUsers.size());

// Add all "new" users to the document.
enterUsers.append('li')
  .attr('class', 'app-user')
  .attr('text', d => d.name)
  .style('color', d => (d.role === 'human' ? 'purple' : 'yellow'))