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")
  .append('svg')
    .attr('width', 225)
    .attr('height', 300) // 5 * 33 = 165 < 300
  .selectAll("rect")
  .data(scores)
  .enter()
    .append("rect")
    // D3 convention: d for data, i for index.
    .attr('y', (d, i) => i * 33)
    .style("width", d => d.score)
    .text(d => d.name)
    // classed('bar', true) to set, classed('bar', false) to remove.
    .attr("class", "bar");