d3 bar chart is upside down

Question

I have a simple bar chart drawn in d3, with vertical bars: http://jsfiddle.net/philgyford/LjxaV/2/

However, it\'s drawing the bars down, with the baseline at the top

Answer 1

The x and y coordinates for svg start in the top left. You want the y to start on the bottom. The code below assumes you're appending to some function along the lines of:

svg.selectAll('rect')
    .data(dataset)
    .enter()
    .append('rect')

To make the bar plot act as you desire, set the y attribute to begin at distance data[i] above the axis:

.attr('y', function(d) { return height - d; })

Then, you must make the distance extend the remaining data[i] to the axis.

.attr('height', function(d) { return d; }) 

And that's it!