title: D3 legend for a color scale
body: <p>I have a color scale like this</p>
  
  <pre><code>var colorscale=colorbrewer['RdYlGn']['11'].reverse();
  var color=d3.scaleQuantize()
    .domain([0,360,1600])
    .range(colorscale);
  </code></pre>
  
  <p>I'm trying to display that color scale as a legend cross the bottom of my SVG</p>
  
  <pre><code>function drawColorScale(){
    var pallete=svg.append('g')
      .attr('id','pallete')
    var swatch=pallete.selectAll('rect').data(colorscale);
    swatch.enter().append('rect')
      .attr('fill',function(d){
        return d;//return rgb
      })
     .attr('x',function(d,i){
       return (i*30)+'';
      })
      .attr('y',function(d,i){
        return (height-12)+'';
      })
      .attr('width','30')
      .attr('height','10');
  }
  </code></pre>
  
  <p>I want to add numbers to svg rects to show the range values covered by each color.  <code>color.ticks(11)</code> returns values only up to the defined midpoint at <code>360</code>.  No matter what value I put into ticks I get back only values up to the midpoint.  </p>