title: D3.js: Data plotting only on single X-Axis coordinate
body: <p>I'm having trouble figuring out why my data is not plotting on the line chart I've created.  I am using a time scale passing in years and have managed to get the framework of the chart to render as anticipated (with X axis values appearing as years). However, the data is not plotting.  Here is my code (console.log output is shown below the script):</p>
  <pre><code>// define dimensions of graph
      var m = [40, 120, 40, 120]; // margins
      var w = 1000 - m[1] - m[3];  // width
      var h = 400 - m[0] - m[2]; // height
  
  
  d3.csv(&quot;national-debt-2013.csv&quot;, function(data) {
  
      var year = data.map(function(d){return d.year;}).reverse();
      var nomGDP = data.map(function(d){return +d.nominalGDPMillions;}).reverse();
      console.log(&quot;year&quot;, year);
      console.log(&quot;nomGDP&quot;, nomGDP);
  
  // create axes
      var parse = d3.time.format(&quot;%Y&quot;).parse;
  
      var x = d3.time.scale().domain([parse(year[0]),parse(year[year.length - 1])]).range([0, w]),
        xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
  
        y1 = d3.scale.linear().domain([0, d3.max(nomGDP)]).range([h, 0]),
        yAxisLeft = d3.svg.axis().scale(y1).ticks(4).orient(&quot;left&quot;),
  
        console.log(&quot;x domain&quot;, x.domain());
        console.log(&quot;x range&quot;, x.range());
        console.log(&quot;y1 domain&quot;, y1.domain());
        console.log(&quot;y range&quot;, y1.range());
  
  
  // create a line function that can convert data[] into x and y points
      var line1 = d3.svg.line()
        // assign the X function to plot our line as we wish
        .x(function(d,i) { 
          // verbose logging to show what's actually being done
           console.log('Plotting X1 value for data point: ' + d + ' using index: ' + year[i] + ' to be at ( x(i) ) : ' + x(i) + ' using our xScale.');
          // return the X coordinate where we want to plot this datapoint
          return year[i];
        })
        .y(function(d,i) { 
          // verbose logging to show what's actually being done
          console.log('Plotting Y1 value for data point: ' + d + ' to be at ( y1(d) ): ' + y1(d) + &quot; using our y1Scale.&quot;);
          // return the Y coordinate where we want to plot this datapoint
          return y1(d); 
        })
  
  
  // Add an SVG element with the desired dimensions and margin.
        var graph = d3.select(&quot;#graph&quot;).append(&quot;svg:svg&quot;)
              .attr(&quot;width&quot;, w + m[1] + m[3])
              .attr(&quot;height&quot;, h + m[0] + m[2])
            .append(&quot;svg:g&quot;)
              .attr(&quot;transform&quot;, &quot;translate(&quot; + m[3] + &quot;,&quot; + m[0] + &quot;)&quot;);
  
  
  // Add the x-axis.
        graph.append(&quot;svg:g&quot;)
              .attr(&quot;class&quot;, &quot;x axis&quot;)
              .attr(&quot;transform&quot;, &quot;translate(0,&quot; + h + &quot;)&quot;)
              .call(xAxis);
  
  
  // Add the y-axis to the left
        graph.append(&quot;svg:g&quot;)
              .attr(&quot;class&quot;, &quot;y axis axisLeft&quot;)
              .attr(&quot;transform&quot;, &quot;translate(-15,0)&quot;)
              .call(yAxisLeft);
  
  // add lines
        // do this AFTER the axes above so that the line is above the tick-lines
          graph.append(&quot;svg:path&quot;)
            .attr(&quot;d&quot;, function(d) { return line1(nomGDP); })
            .attr(&quot;class&quot;, &quot;data1&quot;);
  
  })
  </code></pre>
  <p>console.log output:</p>
  <pre><code>year 
  [&quot;1911&quot;, &quot;1912&quot;, &quot;1913&quot;, &quot;1914&quot;, &quot;1915&quot;, &quot;1916&quot;, &quot;1917&quot;, &quot;1918&quot;, &quot;1919&quot;, &quot;1920&quot;, &quot;1921&quot;, &quot;1922&quot;...]
  
  nomGDP 
  [34675, 37745, 39517, 36831, 39048, 50117, 60278, 76567, 79090, 89246, 74314, 74140, 86238...]
  
  x domain 
  [Sun Jan 01 1911 00:00:00 GMT-0500 (EST), Tue Jan 01 2013 00:00:00 GMT-0500 (EST)]
  
  x range [0, 760]
  
  y1 domain [0, 16244600] 
  
  y range [320, 0] 
  
  
  Plotting X1 value for data point: 34675 using index: 1911 to be at ( x(i) ) : 439.60279328609266 using our xScale. bloch-new.html:150
  Plotting Y1 value for data point: 34675 to be at ( y1(d) ): 319.3169422454231 using our y1Scale. bloch-new.html:157
  Plotting X1 value for data point: 37745 using index: 1912 to be at ( x(i) ) : 439.6027932863288 using our xScale. bloch-new.html:150
  Plotting Y1 value for data point: 37745 to be at ( y1(d) ): 319.25646676434013 using our y1Scale. bloch-new.html:157
  ...
  Plotting X1 value for data point: 15533800 using index: 2011 to be at ( x(i) ) : 439.60279330970303 using our xScale. bloch-new.html:150
  Plotting Y1 value for data point: 15533800 to be at ( y1(d) ): 14.001945261810022 using our y1Scale. bloch-new.html:157
  Plotting X1 value for data point: 16244600 using index: 2012 to be at ( x(i) ) : 439.60279330993916 using our xScale. bloch-new.html:150
  Plotting Y1 value for data point: 16244600 to be at ( y1(d) ): 0 using our y1Scale. 
  </code></pre>
  <p>As you can see from the console output above, the data is only plotting at the X-value of 439.  Any thoughts why?  The domain and range output seem correct.</p>
  <p><a href="https://i.stack.imgur.com/cBEIC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cBEIC.png" alt="IMG" /></a></p>