bar chart with placeholders d3 v4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<svg id="barData"></svg>
<body>
  
  <script>

var width = 250;
var height = 300;

var svg = d3.select('svg#barData')
.attr('width',width)
.attr('height',height);

var frontBars = svg.append('g')
.classed('frontBar',true);

var backBars =svg.append('g').
classed('backBar',true);

var data = [
  41,25,25,40,50,66,41,25,25,40,50,66,41,25,25,40,50,66,41,25,25,40,50,66
]; 
var barHeight = 100; 
var yscale = d3.scaleLinear()
.domain([0,d3.max(data)])
.range([barHeight,0]);

var barWidth = width / data.length-1;

backBars.selectAll('rect.backRect')
    .data(data)
    .enter()
    .append('rect')
    .classed('backRect',true)
    .style('fill',"rgb(174, 199, 232)") 
 .attr('ry',5)
.attr('rx',3)
    .attr('width', barWidth)
    .attr('height',barHeight)
    .attr('x', (d,i) => barWidth*i)
    .attr('y',0)
    .attr('stroke','#fff')
    .attr('stroke-width','2')
.attr('fill-opacity', '0.5');

frontBars.selectAll('rect.frontRect')
  .data(data)
  .enter()
  .append('rect')
  .classed('frontRect',true)
  .style('fill',"rgb(31, 119, 180") 
  .attr('width', barWidth)
  .attr('height',(d) => barHeight-yscale(d))
  .attr('x', (d,i) => barWidth*i )
  .attr('y',d => yscale(d))
  .attr('stroke','#fff')
  .attr('stroke-width','2');

</script>
</body>

https://d3js.org/d3.v4.min.js