title: Custom quantized ticks on axis
body: <p>I'm creating a line-chart in d3js, which draws a graph of your performance over time. This means my data is a certain score at a certain point in time. Example:</p>
  
  <pre><code>2011-01-01: 75
  2012-01-01: 83
  2013-01-01: 50
  </code></pre>
  
  <p>Now I don't want to display the score as integer values on my Y-axis, but I'd like to map the integer values into useful words. Example:</p>
  
  <pre><code>a score between 50 and 70 means you've scored Excellent
  a score between 25 and 50 means you've scored Very Good
  etc.
  </code></pre>
  
  <p><strong>What's the best way for doing this?</strong></p>
  
  <p>The implementation of my axis is as follows:</p>
  
  <pre><code>var y = d3.scale.linear().range([settings.height, 0]);
  
  var yAxis = d3.svg.axis()
              .scale(y)
              .ticks(5)
              .orient("left");
  
  y.domain(d3.extent(data, function(d) { return d.score; }));
  
  svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     .append("text")
     .attr("x", (settings.width - 10 ))
     .attr("dy", ".71em")
     .style("text-anchor", "end")
     .text(settings.labels.y);
  </code></pre>