title: Creating a categorical line chart in D3.js (V4)
body: <p>I'm <em>relatively</em> new to D3.js and I'm visualising the 'PassengersIn' &amp; 'PassengersOut' values from my <strong>busdatasimple.json</strong> file. For reference, one of the JSON objects looks like this;</p>
  
  <pre><code>  {
      "BusNo": "1",
      "Date": "21 November 2016",
      "Time": "09:10:34 AM",
      "Destination": "Pier 50",
      "Longitude": "-122.383262",
      "Latitude": "37.773644",
      "PassengersIn": "8",
      "PassengersOut": "1"
    }
  </code></pre>
  
  <p>I'm now trying to graph the PassengersIn &amp; PassengersOut against the Destination using two lines on a line graph. I'm struggling with the axes as the x has only 2 ticks and the y is not scaling to my data. As seen below;<a href="https://i.stack.imgur.com/WPVDo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WPVDo.png" alt="Line Graph with ordinal scale"></a></p>
  
  <p>My code is as follows. I've removed the irrelevant Google Maps and jQuery.</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>//Setting The Dimensions Of The Canvas
  var margin = {top: 20, right: 20, bottom: 70, left: 40},
      width = 650 - margin.left - margin.right,
      height = 350 - margin.top - margin.bottom;
  
  //Setting X &amp; Y Ranges
  var x = d3.scaleOrdinal().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);
  
  //Define The Axes
  var xAxis = d3.axisBottom().scale(x);
  var yAxis = d3.axisLeft().scale(y).ticks(10);
  
  //Add The SVG Element
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right + 50)
      .attr("height", height + margin.top + margin.bottom + 200)
      .attr("class", "svg")
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  //Load Data From JSON
  d3.json("busdatasimple.json", function(error, data) {
    //Functions for Y-Axis Grid Lines
    function yGridLines() {
      return d3.axisLeft().scale(y).ticks(5);
    }
  
    //Adding the Y-Axis Grid Lines
    svg.append("g")
        .attr("class", "grid-lines")
        .call(yGridLines().tickSize(-width, 0, 0).tickFormat(""));
  
    //Adding Y-Axis
    svg.append("g")
        .attr("class", "y axis").call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 5)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Passengers In");
    
     //Adding X-Axis (Added to the end of the code so the label show over bottom bars)
     svg.append("g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + height + ")")
       .call(xAxis)
     .selectAll("text")
       .style("text-anchor", "middle")
       //.attr("dx", "-.8em")
       .attr("dy", "-.55em")
       .attr("transform", "translate(-5, 15)")
       .attr("font-family", "Arial")
       .attr("font-weight", "bold")
       .attr("font-size", "1.1em");
  
      x.domain(data.map(function(d){return d.Destination;}));
      y.domain([d3.min(data, function(d){return d.PassengersIn;}), d3.max(data, function(d)     {return d.PassengersIn;})]);
  
      var line = d3.line()
        .x(function(d){return x(d.Destination);})
        .y(function(d){return y(d.PassengersIn);});
  
      svg.append("path").datum(data)
        .attr("class", "line")
        .attr("d", function(d){return d.PassengersIn;})
        .attr("stroke", "green")
        .attr("stroke-width", 2);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've managed to find a few examples that use a categorical ordinal scale, however, they are all using v3 of d3.js and after reading through the v4 API countless times I still can't figure it out.</p>