title: How to use ordinal scale in d3 to return month names
body: <p>I am trying to use d3.scaleOrdinal() to return corresponding monthNames for a set of data. The month is provided by an integer ranging from 1 to 12 in the original set of data, which can be found here. (I manually added in a monthName field in each datum object)</p>
  
  <p><a href="https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json" rel="noreferrer">https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json</a></p>
  
  <p>Here is how I am trying to create the scale </p>
  
  <pre><code>var y = d3.scaleOrdinal().range([height, 0]).domain(month);
  chart.selectAll('.temp')
         .data(monthlyData)
         .enter().append('rect')
         .attr('class', 'temp')
         .attr('x', function(d){
            return x(new Date(d.year, 0))
         })
         .attr('y', function(d){
            return y(d.monthName)
         })
         .attr('transform', 'translate(30, 0)')
         .attr('width', gridWidth)
         .attr('height', gridHeight)
         .attr('fill', function(d){
             return colorScale(d.variance + data.baseTemperature)
         });
  </code></pre>
  
  <p>However, I get a really strange result where my data is separated into two bands, one at the top and one all the way at the bottom, which can be seen in this codepen</p>
  
  <p><a href="http://codepen.io/redixhumayun/full/ZBgVax/" rel="noreferrer">http://codepen.io/redixhumayun/full/ZBgVax/</a></p>
  
  <p>How do I do this? </p>