Inverting the y-axis on a heatmap in D3.js

Question

Check out this jsFiddle of a heatmap done in D3.js.

By default, the y-axis goes top down. I've had to invert the y-axis on line charts before as described in this conversation .

However, I'm not quite sure how to do the required inversion here. Any ideas?

The relevant portions of my code (where the inversion would need to be applied) are as follows:

var xGrid = d3.scale.linear()
  .range([0, w - 2])
  .domain([0, data.influencer_range.length]);

var yGrid = d3.scale.linear()
  .range([0, h - 2])
  .domain([0, data.omm_range.length]);

var xOrdinal = d3.scale.ordinal()
  .domain(data.influencer_range)
  .rangeBands([0, data.influencer_range.length]);

var yOrdinal = d3.scale.ordinal()
  .domain(data.omm_range).
  rangeBands([0, data.omm_range.length]);

var x = function(point) {
  return point * xGrid(1);
};

var y = function(point) {
  return point * yGrid(1);
}

Answer 1

First, as the Google thread instructs, swap the two y-range values: .range([h - 2, 0])

Similarly, your yOrdinal needs to be reversed: .rangeBands([data.omm_range.length, 0])

Finally, the reversal breaks your calculation of the height of a row ( yGrid(1) is kinda hardcode-y, but oh well), so you need to adjust it too: return point * yGrid(2)

And there you have it: http://jsfiddle.net/qrBBS/2/