title: reversed Y-axis D3
body: <p>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 <a href="http://jsfiddle.net/S575k/" rel="nofollow noreferrer">the link</a> for Jsfiddle.</p>
  <p>This is the code I am working on, in case you want to try it elsewhere.</p>
  <pre><code>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(&quot;body&quot;)
              .append(&quot;svg&quot;)
              .attr(&quot;width&quot;, w)
              .attr(&quot;height&quot;, 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(&quot;left&quot;);
  
  
  d3.select(&quot;svg&quot;)
      .append(&quot;g&quot;)
          .attr(&quot;class&quot;,&quot;x axis&quot;)
          .attr(&quot;transform&quot;,&quot;translate(0,&quot;+(h-margin)+&quot;)&quot;)
      .call(x_axis);
          
  d3.select(&quot;svg&quot;)
      .append(&quot;g&quot;)
          .attr(&quot;class&quot;,&quot;y axis&quot;)
          .attr(&quot;transform&quot;,&quot;translate(&quot;+margin+&quot;,0)&quot;)
      .call(y_axis);
      
  //Create bars
  svg.selectAll(&quot;rect&quot;)
     .data(dataset, key)
     .enter()
     .append(&quot;rect&quot;)
     .attr(&quot;x&quot;, function(d, i) {
          return xScale(i);
     })
     .attr(&quot;y&quot;, function(d) {
          return h - yScale(d.value);
     })
     .attr(&quot;width&quot;, xScale.rangeBand())
     .attr(&quot;height&quot;, function(d) {
          return yScale(d.value)-margin;
     })
     .attr(&quot;fill&quot;, function(d) {
          return &quot;rgb(96, 0, &quot; + (d.value * 10) + &quot;)&quot;;
     })
  
      //Tooltip
  .on(&quot;mouseover&quot;, function(d) {
      //Get this bar's x/y values, then augment for the tooltip
      var xPosition = parseFloat(d3.select(this).attr(&quot;x&quot;)) + xScale.rangeBand() / 2;
      var yPosition = parseFloat(d3.select(this).attr(&quot;y&quot;)) + 14;
      
      //Update Tooltip Position &amp; value
      d3.select(&quot;#tooltip&quot;)
          .style(&quot;left&quot;, xPosition + &quot;px&quot;)
          .style(&quot;top&quot;, yPosition + &quot;px&quot;)
          .select(&quot;#value&quot;)
          .text(d.value);
      d3.select(&quot;#tooltip&quot;).classed(&quot;hidden&quot;, false)
  })
  .on(&quot;mouseout&quot;, function() {
      //Remove the tooltip
      d3.select(&quot;#tooltip&quot;).classed(&quot;hidden&quot;, true);
  })  ;
  
  //Create labels
  svg.selectAll(&quot;text&quot;)
     .data(dataset, key)
     .enter()
     .append(&quot;text&quot;)
     .text(function(d) {
          return d.value;
     })
     .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
     .attr(&quot;x&quot;, function(d, i) {
          return xScale(i) + xScale.rangeBand() / 2;
     })
     .attr(&quot;y&quot;, function(d) {
          return h - yScale(d.value) + 14;
     })
     .attr(&quot;font-family&quot;, &quot;sans-serif&quot;) 
     .attr(&quot;font-size&quot;, &quot;11px&quot;)
     .attr(&quot;fill&quot;, &quot;white&quot;);
  </code></pre>