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

const bar = d3.select(".chart")
  .append('svg')
    .attr('width', 225)
    .attr('height', 300) // 5 * 33 = 165 < 300
  .selectAll("g")
  .data(scores)
  .enter()
    // In D3, the SVG <g> is used as a generic container like a HTML <div>.
    .append("g")
    // D3 convention: d for data, i for index.
    // <g> doesn't support x,y, but needs transform.
    // translate take a comma-separated list of x,y coordinates.
    .attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');

// Notice how we don't pass data again or use a loop: they are included in the selection.
bar.append('rect')
  .style("width", d => d.score)
  .text(d => d.name)
  // classed('bar', true) to set, classed('bar', false) to remove.
  .attr("class", "bar");

bar.append('text')
  .attr('y', 20)
  .text(d => d.name);