D3.js Quick Start Guide

Adjusting the horizontal and the vertical placement of the bars

Our bars all overlap one another at the moment. Let's space them out by mapping x's position to index in the data array. Add the following to the bottom of the AJAX callback:

var xScale = d3.scaleLinear(); xScale.range([0, WIDTH]); xScale.domain([0, data.length]); d3.selectAll('rect') .attr('x', function(datum, index){ return xScale(index); });

This maps indices in the array to horizontal range points. Chrome should look as follows:

Now let's move the bars so they grow from the bottom, as opposed to hanging from the top. Add the following to the end of the AJAX callback:

d3.selectAll('rect') ...