D3: Trellis Plot of Cancelled vs Delayed Flights

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
    <title> Trellis: Cancelled vs Delayed Flights from SFO, EWR, and LAX </title>
<style>

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

var margin = {top: 50, right: 50, bottom: 50, left: 50, inner: 50},
    width = 1000 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// divide into 3 scales, one for each trellis
var xScale = d3.scaleLinear()
              .range([0, (width/3)-margin.inner]);

var yScale = d3.scaleLinear()
    .range([height, 0]);

var xAxis = d3.axisBottom()
    .scale(xScale)
    .ticks(5);

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 dataSFO = [];
  var dataEWR = [];
  var dataLAX = [];

d3.csv("airlines.csv", function(data) {

// only want values from SFO
      data.forEach(function(d) {
        if (d.Code == "SFO"){
          dataSFO.push({delays:parseInt(d.Delayed), cancellations:parseInt(d.Cancelled)});
        }
        else if (d.Code == "EWR"){
          dataEWR.push({delays:parseInt(d.Delayed), cancellations:parseInt(d.Cancelled)});
        }
        else if (d.Code == "LAX"){
          dataLAX.push({delays:parseInt(d.Delayed), cancellations:parseInt(d.Cancelled)}); 
        }
      });

var minX = d3.min([SFO.minX, LAX.minX, EWR.minX]);
    var minY = d3.min([SFO.minY, LAX.minY, EWR.minY]);
    var maxX = d3.max([SFO.maxX, LAX.maxX, EWR.maxX]);
    var maxY = d3.max([SFO.maxY, LAX.maxY, EWR.maxY]);

xScale.domain([minX, maxX]);
    yScale.domain([minY, maxY]);

// first x axis
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// second
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+ (width/3)+ "," + height + ")")
        .call(xAxis);

// third
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+ 2*(width/3)+ "," + height + ")")
        .call(xAxis);

// add all 3 y axes, translated
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+ (width/3)+ "," + 0 + ")")
        .call(yAxis);

svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate("+ 2*(width/3)+ "," + 0 + ")")
        .call(yAxis);

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

svg.selectAll("SFOpoints")
         .data(dataSFO)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
            return xScale(d.delays);
         })
         .attr("cy", function(d) {
            return yScale(d.cancellations);
         })
         .attr("r", 2);

svg.selectAll("LAXpoints")
         .data(dataLAX)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
            return xScale(d.delays);
         })
         .attr("cy", function(d) {
            return yScale(d.cancellations);
         })
         .attr("r", 2)
         .attr("transform", "translate("+ (width/3)+ "," + 0 + ")");

svg.selectAll("EWRpoints")
         .data(dataEWR)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
            return xScale(d.delays);
         })
         .attr("cy", function(d) {
            return yScale(d.cancellations);
         })
         .attr("r", 2)
         .attr("transform", "translate("+ 2*(width/3)+ "," + 0 + ")");

// 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("Number of Delayed Flights");

//title
    svg.append("text")
        .attr("transform", "translate(" + width/2 + "," + -20 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .text("Cancelled vs Delayed Flights from SFO, LAX, and EWR in a Month");

// 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 Cancelled Flights");

// sfo label
    svg.append("text")
        .attr("transform", "translate(" + width/6 + "," + 0 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .style("font-size","11px")
        .text("SFO");

// lax label
    svg.append("text")
        .attr("transform", "translate(" + 3*(width/6) + "," + 0 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .style("font-size","11px")
        .text("LAX");

// ewr label
    svg.append("text")
        .attr("transform", "translate(" + 5*(width/6) + "," + 0 + ")")
        .style("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .style("font-size","11px")
        .text("EWR");  
});
</script>
</body>
</html>

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