svg - Plunker

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="//d3js.org/d3.v4.min.js"></script>
    <style>
        .chart {
            background: lightgray;
            border: 1px solid black;
            min-width: 200px;
            min-height: 350px;
        }

        .bar {
            height: 30px;
            color: white;
            fill: lightgreen;
            stroke: black;
            stroke-width: 1;
        }
    </style>
    <title>D3V4</title>
</head>

<body>
    <div class="chart">
    </div>
    <script>
      var scores = [
  { name: 'Alice', score: 96 },
  { name: 'Billy', score: 83 },
  { name: 'Cindy', score: 91 },
  { name: 'David', score: 96 },
  { name: 'Emily', score: 88 }
];

const bars = d3.select('.chart')
    .append('svg')
        .attr('width', 300)
        .attr('height', 300)
        .style('background', 'white')
    .selectAll('g') // 'g' works as canvas on svg
    .data(scores)
    .enter()
        .append('g')
        .attr('transform', (d, i) => 'translate(0, ' + i * 33 + ')');


bars.append('rect')
    .attr('width', d => d.score)
    .attr('class', 'bar');

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

    </script>
</body>

</html>

/* Styles go here */