title: creating multi-line charts as a reusable component
body: <p>I think I'm almost there. I have a working version for a single line that updates dynamically, but am having trouble getting to the multi-line part. I believe it has something to do with the way the data is being filtered at _selection.each. Not sure the best way to proceed from here though. The example found here (<a href="https://stackoverflow.com/questions/8689498/drawing-multiple-lines-in-d3-js">Drawing Multiple Lines in D3.js</a>) seems to deal with this without much work.</p>
  
  <p>Here is the jsfiddle for this, but the code is represented below as well:
  <a href="http://jsfiddle.net/seoulbrother/NhK43/" rel="nofollow noreferrer">http://jsfiddle.net/seoulbrother/NhK43/</a></p>
  
  <p>Thanks in advance. Also, would love to hear best practices regarding this as well.</p>
  
  <p>So if I have a page with a matrix where each row represents a time-series:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="container"&gt;&lt;div id="viz"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;
  var matrix = [
   [23,12,44,22,12,33,14,76,45,55,66,55],
   [33,22,11,88,32,63,13,36,35,51,26,25]
  ];
  &lt;/script&gt;
  </code></pre>
  
  <p>I call this using:</p>
  
  <pre><code>mult_line = d3.graph.line(500, 250, "#viz");
  d3.select("#container").datum(matrix).call(mult_line);
  </code></pre>
  
  <p>where d3.graph.line is:</p>
  
  <pre><code>d3.graph.line = function module(w, h, id) {
      var svg;
      var margin = {top: 10, right: 20, bottom: 20, left: 40},
          width = w - margin.left - margin.right,
          height = h - margin.top - margin.bottom;
  
      function chart(_selection) {
         _selection.each(function(_data) {
              console.log(_data);
              var x = d3.scale.linear().domain([1, _data.length]).range([0, width]);
              var y = d3.scale.linear().domain([0, 100]).range([height, 0]);
  
              var xAxis = d3.svg.axis().scale(x).ticks(5).orient("bottom");       
              var yAxis = d3.svg.axis().scale(y).ticks(5).orient("left");
  
              var line = d3.svg.line()
                  .x(function(d,i) { return x(i+1); })
                  .y(function(d) { return y(d); });
  
              if (!svg){
                  svg = d3.select(id).append("svg")
                      .attr("width", width + margin.left + margin.right)
                      .attr("height", height + margin.top + margin.bottom)
                      .append("g")
                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
                  svg.append("path")
                      .attr("class","line")
                      .attr("d", line(_data));
  
                  svg.append("g")
                        .attr("class", "x-axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis);
  
                  svg.append("g")
                        .attr("class", "y-axis")
                        .call(yAxis);
              }
  
              var line_m = d3.selectAll("path.line")
                  .data(_data);
  
              line_m.transition()
                  .duration(1000)
                  .attr('d', line(_data));
  
              line_m.enter().append("path")
                  .attr("d",line(_data));
  
              update_axis();
              function update_axis() {
                  d3.select(".x-axis").call(xAxis);
              }
          });
      }
      return chart;
  }
  </code></pre>