title: Color transition in d3 using time elapsed
body: <p>I've been having a hard time wrapping my head around some D3 concepts (it does not help that I am relatively new to javascript).  What I am trying to do is have a status indicator that begins green, slowly turning yellow, and then slowly turning red. If some event occurs (button press, message received, whatever), I want the indicator to return to green, restarting the transition. </p>
  
  <p>Here's a simple example (in jQuery) showing the basic visual effect (without the ability to reset) <a href="http://jsfiddle.net/N4APE/" rel="noreferrer">http://jsfiddle.net/N4APE/</a></p>
  
  <p>In D3, my idea was to map the background color to the number of milliseconds passed.  I tried to create a scale like this:</p>
  
  <pre><code>//10 sec is yellow, 30 sec is red
  d3.scale.linear().domain([0, 10000, 30000]).range(["#00ff00", "#ffff00", "#ff0000"]);
  </code></pre>
  
  <p>But now I'm a bit lost.  I have been playing with combinations of transitions, tweens, and interpolators, but I don't seem to be getting anywhere.  Here's some pathetic attempts to get it working <a href="http://jsfiddle.net/Ebuwa/" rel="noreferrer">http://jsfiddle.net/Ebuwa/</a></p>
  
  <p>My issues:</p>
  
  <ul>
  <li>I don't know how to associate the elapsed millis of a transition to my scale, and then set the background color</li>
  <li>My transition seems to run when I create it, instead of when I call it, and it operates on
  the wrong element.</li>
  <li>I'm not positive how to reset the transition to keep it green once I've conquered my other problems.</li>
  </ul>
  
  <p>One other note, I could be happy using an svg circle or something like that instead, but I have had just as poor luck manipulating an svg fill attribute as I have an html background attribute.</p>
  
  <p>Thank you</p>