title: d3.js scale time on x axis not working
body: <p>I am new to javascript and d3. I am using data from <a href="https://data.lacity.org/A-Prosperous-City/Los-Angeles-International-Airport-Passenger-Traffi/g3qu-7q2u" rel="nofollow noreferrer">https://data.lacity.org/A-Prosperous-City/Los-Angeles-International-Airport-Passenger-Traffi/g3qu-7q2u</a> to create a line chart visualization. Based on tutorials online, I have already set up y axis and calculated the data points for the line. Because there are a lot of dates in this dataset, I tried to just show years on x axis by parsing time. But nothing is shown on y axis. I think the problem came from<code>var x = d3.scaleTime().rangeRound([0, width]);</code>or<code>x.domain(d3.extent(DomesticCount, function(d) {return d.name;}));</code>, but I have no idea how those work.</p>
  
  <p>Date format for ReportPeriod is 01/01/2006 12:00:00 AM. (dd/mm/yyyy)</p>
  
  <p>Here is a screenshot of first few rows of the csv file:
  <a href="https://i.stack.imgur.com/KbN3B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KbN3B.png" alt="enter image description here"></a>
  Any help will be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 80
  };
  
  var svg = d3.select('body').append('svg')
      .attr('width', window.innerWidth)
      .attr('height', window.innerHeight);
  
  var width = window.innerWidth - margin.left - margin.right;
  var height = window.innerHeight - margin.top - margin.bottom;
  
  
  var parseTime = d3.timeParse("%d/%m/%Y %H:%M:%S %p");
  
  var x = d3.scaleTime().rangeRound([0, width]);
  var y = d3.scaleLinear().rangeRound([height, 0]);
  
  
  var g = svg.append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
  
  var line = d3.line()
      .x(function(d) { return x(d.name); })
      .y(function(d) { return y(d.count); });
  
  // read in our CSV file
  d3.csv('Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal.csv', function(data) {
  
      var DomesticCountMap = {};
      var InternationalCountMap = {};
  
      data.forEach(function(datum) {
   datum.ReportPeriod = parseTime(datum.ReportPeriod);
    
          if (DomesticCountMap[datum.ReportPeriod] === undefined) {
              DomesticCountMap[datum.ReportPeriod] = 0;
          }
  
          if (datum.Domestic_International === "Domestic"){DomesticCountMap[datum.ReportPeriod] += parseInt(datum.Passenger_Count);}
          
          if (InternationalCountMap[datum.ReportPeriod] === undefined) {
              InternationalCountMap[datum.ReportPeriod] = 0;
          }
          // aggregate into our map, using the terminal name as the map key
          if (datum.Domestic_International === "International"){InternationalCountMap[datum.ReportPeriod] += parseInt(datum.Passenger_Count);}
      });
  
  
      var DomesticCount = [];
      Object.keys(DomesticCountMap).forEach(function(mapKey) {
          DomesticCount.push({
              name: mapKey,
              count: DomesticCountMap[mapKey]
          });
      });
      
      x.domain(d3.extent(DomesticCount, function(d) {return d.name;}));
      y.domain([0, d3.max(DomesticCount, function(d) {return d.count;})]);
  
      g.append('g')
          .attr('class', 'axis axis--x')
          .attr('transform', 'translate(0,' + height + ')')
          .call(d3.axisBottom(x));
  
      g.append('g')
          .attr('class', 'axis axis--y')
          .call(d3.axisLeft(y))
          .append('text')
          .attr("fill", "#000")
          .attr('transform', 'rotate(-90)')
          .attr('y', 6)
          .attr('dy', '0.71em')
          .attr('text-anchor', 'end')
          .text('Passenger_Count');
  
      g.append('path')
   .datum(DomesticCount)
   .attr('fill', 'none')
   .attr('stroke', 'blue')
   .attr('stroke-linejoin', 'round')
   .attr('stroke-linecap', 'round')
   .attr('stroke-width', 1.5)
   .attr('d', line);
  
  }); </code></pre>
  </div>
  </div>
  </p>