title: Inverting the y-axis on a heatmap in D3.js
body: <p>Check out this <a href="http://jsfiddle.net/qrBBS/" rel="nofollow">jsFiddle</a> of a heatmap done in D3.js.</p>
  
  <p>By default, the y-axis goes top down. I've had to invert the y-axis on line charts before <a href="https://groups.google.com/forum/?fromgroups=#!topic/d3-js/xVTaq9vfyIk" rel="nofollow">as described in this conversation</a>.</p>
  
  <p>However, I'm not quite sure how to do the required inversion here. Any ideas?</p>
  
  <p>The relevant portions of my code (where the inversion would need to be applied) are as follows:</p>
  
  <pre><code>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);
  }
  </code></pre>