reversed Y-axis D3

Question

I created a bar plot and my Y axis is reversed somehow (also seems like the scale is not right). I really couldn't figure it out by myself. Here is the link for Jsfiddle.

This is the code I am working on, in case you want to try it elsewhere.

var w = 700; var h = 400; var margin = 40;  var dataset = [ {key:1,value:4000}, {key:2,value:3500}, {key:3,value:4400}, {key:4,value:3250}, {key:5,value:4785}, {key:6,value:3600}, {key:7,value:3200} ];   var key = function(d) {     return d.key; };  var value = function(d) {     return d.value; }; console.log(dataset);  //Create SVG element var svg = d3.select("body")             .append("svg")             .attr("width", w)             .attr("height", h);  var xScale = d3.scale.ordinal()                 .domain(d3.range(dataset.length+1))                 .rangeRoundBands([40, w], 0.05);   var yScale = d3.scale.linear()                      .domain([0, 5000])                      .range([0, h-40]);                  var x_axis = d3.svg.axis().scale(xScale); var y_axis = d3.svg.axis().scale(yScale).orient("left");   d3.select("svg")     .append("g")         .attr("class","x axis")         .attr("transform","translate(0,"+(h-margin)+")")     .call(x_axis);          d3.select("svg")     .append("g")         .attr("class","y axis")         .attr("transform","translate("+margin+",0)")     .call(y_axis);      //Create bars svg.selectAll("rect")    .data(dataset, key)    .enter()    .append("rect")    .attr("x", function(d, i) {         return xScale(i);    })    .attr("y", function(d) {         return h - yScale(d.value);    })    .attr("width", xScale.rangeBand())    .attr("height", function(d) {         return yScale(d.value)-margin;    })    .attr("fill", function(d) {         return "rgb(96, 0, " + (d.value * 10) + ")";    })      //Tooltip .on("mouseover", function(d) {     //Get this bar's x/y values, then augment for the tooltip     var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;     var yPosition = parseFloat(d3.select(this).attr("y")) + 14;          //Update Tooltip Position & value     d3.select("#tooltip")         .style("left", xPosition + "px")         .style("top", yPosition + "px")         .select("#value")         .text(d.value);     d3.select("#tooltip").classed("hidden", false) }) .on("mouseout", function() {     //Remove the tooltip     d3.select("#tooltip").classed("hidden", true); })  ;  //Create labels svg.selectAll("text")    .data(dataset, key)    .enter()    .append("text")    .text(function(d) {         return d.value;    })    .attr("text-anchor", "middle")    .attr("x", function(d, i) {         return xScale(i) + xScale.rangeBand() / 2;    })    .attr("y", function(d) {         return h - yScale(d.value) + 14;    })    .attr("font-family", "sans-serif")     .attr("font-size", "11px")    .attr("fill", "white"); 

Answer 1

Maybe this will help.

http://jsfiddle.net/S575k/4/

A few notes:

1. I reversed your y domain range from .range([0, h-margin]); to .range([h-margin, 0]); This will fix the issue of the y-axis marks going in the wrong direction because the browser consider's the origin (0,0) point to the the upper-left corner, and not the bottom-left corner like in math.

2. Because of this reversal I had to tweak your .attr('height') and .attr('y').

3. A nice way to find the height of bar in a bar chart is to realize that the yscale(0) will give you the pixel-position of the bottom of the barchart. You can then do yscale(value) - yscale(0) to get the pixel-height of your bars.