title: Legend with smooth gradient and corresponding labels
body: <p>I'm creating a legend for some data.</p>
  
  <p>This is my code: <a href="http://plnkr.co/edit/ZLCiytPahZcZK5HA1sPu" rel="noreferrer"><strong>Plunker</strong></a>.</p>
  
  <p>The problem is that the labels are uniformly distributed along the <code>x</code> axis while they should follow the color scale scheme:</p>
  
  <pre><code>var colorScale = d3.scaleLinear()
     .domain([0, 10, 15, 20, 25, 100])
     .range(['#E28672', '#EC93AB', '#CEB1DE', '#95D3F0', '#77EDD9', '#A9FCAA']);
  </code></pre>
  
  <p>Here is what I have:</p>
  
  <p><a href="https://i.stack.imgur.com/hLAZ6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hLAZ6.png" alt="enter image description here"></a></p>
  
  <p>And this is what I would like: </p>
  
  <p><a href="https://i.stack.imgur.com/jrMEu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jrMEu.png" alt="enter image description here"></a></p>
  
  <p>Thanks!</p>