d3.js - Custom quantized ticks on axis -

i'm creating line-chart in d3js, draws graph of performance on time. means data score @ point in time. example:

2011-01-01: 75 2012-01-01: 83 2013-01-01: 50 

now don't want display score integer values on y-axis, i'd map integer values useful words. example:

a score between 50 , 70 means you've scored excellent score between 25 , 50 means you've scored etc. 

what's best way doing this?

the implementation of axis follows:

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); 

you can define own tickformat. example:

function scoreformat(d) {     if (d <= 70 && d > 50) {         return "good";     } else if (d <= 50 && d > 25) {         return "bad";     }     return "ugly"; }  var yaxis = d3.svg.axis()     .scale(y)     .ticks(5)     .orient("left")     .tickformat(function(d) { return scoreformat(d); });