Accepted answer

If the bars on your chart are 100 units wide, the maximum x value should be d3.max(points => d[0]) + 100. If you plug that into your scale, you will find your chart now covers the correct range.

xScale = d3.scaleLinear()
                    d3.min(points, d => d[0]),
                    d3.max(points, d => d[0]) + 100
                .range([paddings.left, width - paddings.right]);

You will now find that you have made a mistake in calculating the width of the bars:

  .attr('x', d => xScale(d[0]))
  .attr('y', d => yScale(d[1]))
  .attr('width', width / points.length)
  .attr('height', d => height - yScale(d[1]) - paddings.bottom)     

Can you work out why they are too wide?

Related Query