Untitled

<!DOCTYPE html>
<meta charset="utf-8">

<body>
  <svg></svg>
</body>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

let height = 100, barWidth=20, padding=10;

let y = d3.scaleLinear()                               // 1) Wertprojektion
    .domain([1, 50])
    .rangeRound([height, 0]);

d3.select('svg')
  .attr('width', 100)
  .attr('height', 100)
  .attr('style', 'background:orange;')
  .selectAll('rect')                                   // 2) Selection
  .data([12, 30, 42])                                  // 3) Databinding
  .enter()
    .append('rect')                                    // 4) SVG DOM
      .attr('y', (d) => {return y(d);})
      .attr('x', (d,i) => {return i*(barWidth+padding)+padding;})
      .attr('height', (d ) => {return height-y(d);})
      .attr('width',barWidth);

</script>
</html>