D3 Examples - D3: Line Chart - Cancelled Flights from SFO

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
    <title> Cancelled Flights from SFO </title>
<style>
.line {
        fill: none;
        stroke: steelblue;
        stroke-width: 0.5;
      }
</style></head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
var xScale = d3.scaleTime()
              .range([0, width]);
​
var yScale = d3.scaleLinear()
    .range([height, 0]);
​
var xAxis = d3.axisBottom()
    .scale(xScale);
​
var yAxis = d3.axisLeft()
    .scale(yScale);
​
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 dataset = [];
  var parseDate = d3.timeParse("%Y");
​
  var line = d3.line()
              .x(function(d) { return xScale(parseDate(d.year)); })
              .y(function(d) { return yScale(d.cancellations); });
​
  d3.csv("airlines.csv", function(data) {
​
      // only want values from SFO
      data.forEach(function(d) {
        var isFound = false, foundAtI = -1;
        if (d.Code == "SFO"){
          for (var i = 0; i < dataset.length; i++){
            // exists in array already, add up
            if (dataset[i].year === d.Year){
              isFound = true;
              foundAtI = i;
              break;
            }
          }
          if (isFound){
            dataset[foundAtI].cancellations = dataset[foundAtI].cancellations + parseInt(d.Cancelled);
          }
          else{
            dataset.push({year:(d.Year), cancellations:parseInt(d.Cancelled)});
          }
        }
      });
​
    xScale.domain([d3.min(dataset, function(d) { return parseDate(d.year); }), d3.max(dataset, function(d) { return parseDate(d.year); })]);
    yScale.domain([d3.min(dataset, function(d) { return d.cancellations; }), d3.max(dataset, function(d) { return d.cancellations; })]);
​
    svg.append("path")
          .datum(dataset)
          .attr("class", "line")
          .attr("d", line);
​
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
​
    svg.append("g")
        .attr("class", "axis")
        .call(yAxis);
​
    // text label for the y axis
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x",0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .style("font-size","11px")
        .text("Number of Flights Cancelled");
​
    // text label for the x axis
    svg.append("text")             
        .attr("transform",
              "translate(" + (width/2) + " ," + 
                             (height + 40) + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .style("font-size","11px")
        .text("Year");
​
      svg.append("text")
        .attr("transform", "translate(" + width/2 + "," + -20 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .text("Number of Flights Cancelled from SFO");
         
});
</script>
<p><a href = "https://github.com/alignedleft/d3-book/blob/master/chapter_11/01_line_chart.html"> reference (book example) used for creating line </a></p>
</body>
</html>
    