Currently, our bars have a fixed width. No matter how many elements we have, they have a 15 px width. If we had more data elements, the bars could overlap. Let's change this. Since each rect will be the same width, no matter what the data is, we can just assign width a computed value. Add the following to the end of the AJAX callback:
d3.selectAll('rect')
.attr('width', WIDTH/data.length);
Now let's adjust our rect CSS so our bars are more visible:
rect {
/* remove the width rule that was here */
stroke:white;
stroke-width:1px;
}
The output will be shown as follows:
![](https://static.packt-cdn.com/products/9781789342383/graphics/assets/fcf980d3-2e3e-486c-970f-3857c60f4bff.png)