title: d3 JSON multiple line chart
body: <p>I'm trying to make a plot with multiple lines on it from a JSON blob that looks like: </p>
  
  <pre><code>{"2007": [{"val":10, "mon":10}, {"val":20, "mon":11}, {"val":40, "mon":12}, ...],
   "2008": [{"val":20, "mon":8}, {"val":20, "mon":9}, {"val":40, "mon":10}, ...],
    ...
   "2012": [{"val":40, "mon":8}, {"val":50, "mon":9}, {"val":60, "mon":10}, ...]
  }
  </code></pre>
  
  <p>The data is basically monthly totals for each year, with some years not having data for some months. I can't figure out exactly how to parse the data in d3 though. I tried various ways such as</p>
  
  <pre><code>var line = d3.svg.line()
   .interpolate("basis")
  .x(function(d) { return x(d.mon); })
  .y(function(d) { return y(d.val); });
  
  svg.selectAll(".line")
   .data(series)
   .enter().append("path")
   .attr("class", "line")
   .attr("d", line);
  </code></pre>
  
  <p>But I can't seem to get the data into the SVG line. Any suggestions? Is there a better way to structure the JSON? </p>