const scores = [
  { name: "Alice", score: 96 },
  { name: "Billy", score: 83 },
  { name: "Cindy", score: 81 },
  { name: "David", score: 96 },
  { name: "Emily", score: 88 }
];

/**
 * @see https://bost.ocks.org/mike/join/
 */
d3.select('.chart')
  .selectAll('div')
  // A "data join": merge the data with that selection.
  .data(scores)
  .enter()
    .append('div')
    .text(d => d.name)
    .style('color', 'green')
    .style('width', d => d.score + 'px')
    .style('height', '50px')
    .style('background-color', 'lightgreen')
    .style('border', '1px solid black');