title: simple multi line chart with D3
body: <p><a href="http://jsfiddle.net/ytvka/4/" rel="nofollow">http://jsfiddle.net/ytvka/4/</a></p>
  
  <p>I know this one has been asked before but I've not been able to use those examples to figure out what I'm doing wrong. </p>
  
  <p>I want to create a simple 6 point, 3 series chart with data that looks like: </p>
  
  <pre><code>data = [
    {"key":"D78","date":"2013-09-23T17:26:21.258Z","value":1.25}, 
    {"key":"D78","date":"2013-09-23T17:28:21.258Z","value":2.25},
    {"key":"R71","date":"2013-09-23T17:26:21.258Z","value":2.45},
    {"key":"R71","date":"2013-09-23T17:28:21.258Z","value":2.85},
    {"key":"X44","date":"2013-09-23T17:26:21.258Z","value":3.87},
    {"key":"X44","date":"2013-09-23T17:28:21.258Z","value":3.87}
  ] 
  </code></pre>
  
  <p>Nothing exciting there. What I'd ideally like to do is make a 3-series line chart out of this data. </p>
  
  <pre><code>svg = d3.select(selector).append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom).append("g")
  
  x = d3.time.scale().range([ 0, width ])
  y = d3.scale.linear().range([ height, 0 ])
  format = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ")
  
  valueLine = d3.svg.line().interpolate("basis")
    .x((d) -&gt;
      console.log format.parse(d.date)
      x(format.parse(d.date))
    )
    .y((d) -&gt;
      console.log d.value
      y d.value
    )
  
    svg.append("path").attr("class", "line")
      .attr "d", valueLine(u.where(data, key: "X44"))
  </code></pre>
  
  <p>Which generates SVG: <code>&lt;path class="line" d="M137998238125800,-287L137998250125800,-287"&gt;&lt;/path&gt;</code></p>
  
  <p>This code just pulls out one of the series using lodash. Problem is: nothing on the screen. It runs through and grabs the value but there's no lines. I'm finding that existing examples are either complex and not well explained (<a href="http://bl.ocks.org/mbostock/3884955" rel="nofollow">http://bl.ocks.org/mbostock/3884955</a>) or missing key parts (<a href="http://www.d3noob.org/2013/01/adding-more-than-one-line-to-graph-in.html" rel="nofollow">http://www.d3noob.org/2013/01/adding-more-than-one-line-to-graph-in.html</a>). </p>
  
  <ol>
  <li>What's wrong with my code? </li>
  <li>How can I add in the other series (R71, D78)? </li>
  <li>Is there a good tutorial of this out there that has complete code and walks through all the steps? </li>
  </ol>