title: d3.js time series infinite scroll
body: <p>I am working on a time series line chart that lets the user scroll back from the present. I can find tutorials on real-time d3.js charts, I can find tutorials on zooming and panning, and I can find tutorials on using external data sources. I'm having trouble putting all this knowledge together.</p>
  
  <p>Here is the behavior that I am looking for:</p>
  
  <blockquote>
    <ul>
    <li>The chart can pan backward in time (meaning that the lines, data points, and axes move with dragging of the mouse or finger)</li>
    <li>Panning should only effect the x-axis, and no zooming should occur.</li>
    <li>As the user pans the chart, more data loads in, giving an experience of infinite scrolling</li>
    <li>I plan on buffering in at least one extra "page" worth of data for the user to scroll into (already got this part figured out)</li>
    <li>I don't think I need transitions, because the panning of the chart will already smoothly translate it</li>
    </ul>
  </blockquote>
  
  <p>This is what I have working so far:</p>
  
  <pre><code>  // set up a zoom handler only for panning
    // by limiting the scaleExtent    
    var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 1])
    .on("zoom", pan);
  
    var loadedPage = 1; // begin with one page of data loaded
    var nextPage = 2; // next page will be page 2
    var panX = 0;
  
    function pan() 
    {
       if (d3.event) 
       {
          panX = d3.event ? d3.event.translate[0] : 0;
  
          // is there a better way to determine when
          // to load the next page?
          nextPage = panX / (width + margin.left + margin.right) + 2;
          nextPage = Math.floor(nextPage);
  
          // if we haven't loaded in the next page's data
          // load it in so that the user can scroll into it
          if (nextPage &gt; loadedPage) {
  
            console.log("Load a new page");
            loadedPage += 1;
  
            // load more data
            Chart.query( /*params will be here*/ ).then(
              function(response) {
  
                // append the new data onto the front of the array
                data = data.concat(response);
                console.log(data.length);
  
                // I need to add the new data into the line chart
                // but how do I make that work with the pan
                // logic from zoom?
  
           }
         );
       }
          // is this where I update the axes and scroll the chart?
          // What's the best way to do that?
  
        }
      }
  </code></pre>
  
  <p>In this code, I can know when to pull more data from the server, but I'm not sure how to insert the data into the chart in a way that works with the pan offset. Do I use transform translate, or can I update the d value of the path of my line?</p>
  
  <p>Any suggestions would be welcome... also, if anyone knows of any demos which already show panning infinitely through time series data, that would be much appreciated.</p>