title: d3 interpolation example explanation
body: <p>Can I confirm my understanding of what's happening in the following code?</p>
  
  <pre><code>var color = d3.scale.linear()
      .range(["hsl(-180,50%,50%)", "hsl(180,50%,50%)"])
      .interpolate(interpolateHsl);
  </code></pre>
  
  <p>We're defining a scaling function called color (not sure why we're able to define a variable as a function but I've learnt to accept this - clarification would be helpful).</p>
  
  <p>There's no domain specified, because using .interpolate() will only work with domain between 0 and 1? Or because domain == range in this case? Or some other reason?</p>
  
  <p>Calling interpolateHsl from the interpolate function takes 'implicit parameters' (no need to specify - are they called implicit parameters or some other ref?) of the start and end points of the range (a and b).</p>
  
  <pre><code>function interpolateHsl(a, b) {
      var i = d3.interpolateString(a, b);
      return function(t) {
          return d3.hsl(i(t));
      }
  }
  </code></pre>
  
  <p>Now we define an interpolation fn within interpolateHsl that interpolates strings - which I think will take say ['calibri 12px', 'calibri 24px'], pluck out the numerical part and interpolate over that and then rejoin it the text element? So in this case it'll pluck out the numerical components from the hsl string and interpolate over those?</p>
  
  <p>Now (if it wasn't enough already) it gets really confusing. </p>
  
  <p>t is the 'increment' - so if the total interpolation time was say 5000ms and we had a discrete range of 5 steps then t = 1000ms? So in a continuous context it's just very small?</p>
  
  <p>i(t) will calculate the interpolated value at 'time' t, which is then converted to a true hsl value rather than just a string representation via d3.hsl().</p>
  
  <p>Why does this have to be in a function within the function? To access the t? </p>
  
  <p>Broadly speaking my understanding's patchy so a broader explanation of what's going on would be extremely helpful.</p>