D3 Bar Chart

bar-chart.js

const w = 400, h = 250;
const padding = 4;
const data = [50,100,150,200,250,130,210,30,170];

let svg = d3.select('body')
            .append('svg')
            .attr('width', w)
            .attr('height', h);

svg.selectAll('rect')
  .data(data)
  .enter()
    .append('rect')
    .attrs({
      x: (d, i) => i * (w / data.length),
      y: d => h - d,
      width: w / data.length - padding,
      height: d => d,
      fill: 'green'
});

svg.selectAll('text')
  .data(data)
  .enter()
    .append('text')
    .text((d) => d)
    .attrs({
      x: (d,i) => i * (w / data.length) + (w / data.length - padding) / 2,
      y: (d) => h - d + 20
});