D3 Line Chart

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3: Creating a line chart</title>
    <style type="text/css">
    </style>
  </head>
  <body>

//line chart

//setting up global arrays that will have data
    cancellations = [];
    years = [];

//helper function used when reading in data
    function findYear(year) {
      for(var m = 0 ; m < cancellations.length ; m++) {
        if(cancellations[m].year == year) {
          return m;
        }
      }
    }

//helper function used when reading in data
    function checkArr(year) {
      for(var g = 0 ; g < cancellations.length ; g++) {
        if(cancellations[g].year == year) {
          return 0;
        }
      }
      return -1;
    }

//debug function to make sure I'm reading in the data correctly
    function testArr() {
      for(var g = 0 ; g < years.length ; g++) {
          console.log(years[g]);
      }
    }

//setting up the margins
    var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

//adding svg to page
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseYear = d3.timeParse("%Y");

//reading in the required data
    d3.csv("airlines.csv", function(data) {
      data.forEach(function(d) {
          if(checkArr(d.Year) == 0) {
            index = findYear(d.Year);
            cancellations[index].numCancel = cancellations[index].numCancel + (+d.Cancelled);
          } else {
            years.push(d.Year);
            var cancel = {numCancel: +d.Cancelled, year: d.Year};
            cancellations.push(cancel);
          }
      });

//making things easier for myself with this simple data array
    var data = [];
    for(v = 0 ; v < cancellations.length ; v++) {
      data[v] = +cancellations[v].numCancel;
    }

//setting up x-scales
    var xScale = d3.scaleBand()
      .domain(years)
      .range([0, width]);

var xScale2 = d3.scaleLinear()
      .domain([0, years.length])
      .range([0, width]);

//setting up y-scales
    var yScale = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([height, 0]);

//defining the line variable that will be used to draw paths
    var line = d3.line()
      .x(function(d, i) { return xScale2(i); })
      .y(function(d) { return yScale(d)});

//adding the x-axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(45," + height + ")")
      .call(d3.axisBottom(xScale));

//adding the y-axis
    svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(45, 0)")
      .call(d3.axisLeft(yScale));

//using line variable to draw paths between each data point
    svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("transform", "translate(75, 0)")
      .attr("d", line)
      .attr("stroke", "blue")
      .attr("stroke-width", 2)
      .attr("fill", "none");

//drawing a circle for each data point
    svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", function(d, i) { return xScale2(i) })
      .attr("cy", function(d) { return yScale(d) })
      .attr("transform", "translate(75, 0)")
      .attr("fill", "red")
      .attr("r", 5);

//adding title at the top of the bar chart
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " , -25)")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "24px")
      .text("Number of Flights Cancelled Per Year in the United States");

//labeling the y-axis
    svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left + 10)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "20px")
      .text("Flights Cancelled");

//labeling the x-axis
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/1.8) + " ," + 
                           (height + 50) + ")")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "20px")
      .text("Year");

});

</script>

</body>
</html>

https://d3js.org/d3.v4.min.js