Creating a categorical line chart in D3.js (V4)

Question

I'm relatively new to D3.js and I'm visualising the 'PassengersIn' & 'PassengersOut' values from my busdatasimple.json file. For reference, one of the JSON objects looks like this;

  {
    "BusNo": "1",
    "Date": "21 November 2016",
    "Time": "09:10:34 AM",
    "Destination": "Pier 50",
    "Longitude": "-122.383262",
    "Latitude": "37.773644",
    "PassengersIn": "8",
    "PassengersOut": "1"
  }

I'm now trying to graph the PassengersIn & 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;

My code is as follows. I've removed the irrelevant Google Maps and jQuery.

//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 & 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);
});

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.

Answer 1

You want a categorical scale, that's right, but you don't want an ordinal scale here.

There was a lot of changes from v3 to v4. In v3, you could set .rangeBands, .rangeRoundBands, .rangePoints and .rangeRoundPoints to your ordinal scale, which therefore could accept an continuous range. Not anymore: in D3 v4 you have the brand new scaleBand and scalePoint.

In v4, in a regular ordinal scale (which is scaleOrdinal):

If range is specified, sets the range of the ordinal scale to the specified array of values. The first element in the domain will be mapped to the first element in range, the second domain value to the second range value, and so on. If there are fewer elements in the range than in the domain, the scale will reuse values from the start of the range. (emphases mine)

So, in an scaleOrdinal, the range need to have the same length (number of elements) of the domain.

That being said, you want a point scale (scalePoint) here. Band scales and point scales...

...are like ordinal scales except the output range is continuous and numeric. (emphasis mine)

Check this snippet, look at the console and compare the two scales:

var destinations = ["foo", "bar", "baz", "foobar", "foobaz"];

var scale1 = d3.scaleOrdinal()
	.range([0, 100])
	.domain(destinations);
	
var scale2 = d3.scalePoint()
	.range([0, 100])
	.domain(destinations);
	
destinations.forEach(d=>{
console.log(d + " in an ordinal scale: " + scale1(d) + " / in a point scale: " + scale2(d))
})

<script src="https://d3js.org/d3.v4.min.js"></script>

Regarding your y-axis problem:

Set the domain of the y scale before calling the axis. So, instead of this:

svg.append("g")
    .attr("class", "y axis").call(yAxis);

y.domain([d3.min(data, function(d){
    return d.PassengersIn;
}), d3.max(data, function(d){
    return d.PassengersIn;
})]);

Change the order:

y.domain([d3.min(data, function(d){
    return d.PassengersIn;
}), d3.max(data, function(d){
    return d.PassengersIn;
})]);//set the domain first!

svg.append("g")
    .attr("class", "y axis").call(yAxis);