D3 Scatter-plot Bivariate

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

//scatterplot bivariate

//global data array
    delays = [];

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

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

//debugging function to ensure data is read in correctly
    function testArr() {
      for(var g = 0 ; g < delays.length ; g++) {
          console.log(delays[g].year);
          console.log(delays[g].weather);
          console.log(delays[g].security);
      }
    }

//setting up the margins
    var margin = {top: 50, right: 50, bottom: 50, left: 50},
    width = 960 - margin.left - margin.right,
    height = 600 - 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 data and handling it accordingly
    d3.csv("airlines.csv", function(data) {
      data.forEach(function(d) {
          if(checkArr(d.Year) == 0) {
            index = findYear(d.Year);
            delays[index].weather = delays[index].weather + (+d.NumofDelaysWeather);
            delays[index].security = delays[index].security + (+d.NumofDelaysSecurity);
          } else {
            var delay = {weather: +d.NumofDelaysWeather, security: +d.NumofDelaysSecurity, year: d.Year};
            delays.push(delay);
          }
      });

//once I got to this chart, I realized that only one x-scale and y-scale is necessary :)

//setting up the x-scale
    var xScale = d3.scaleLinear()
      .domain([0, d3.max(delays, function(d) {
        return d.weather;
      })])
      .range([0, width/1.2]);

//setting up the y-scale
    var yScale = d3.scaleLinear()
      .domain([0, d3.max(delays, function(d) {
         return d.security;
      })])
      .range([height, 0]);

//drawing each data point as a circle
    svg.selectAll(".dot")
      .data(delays)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("cx", function(d) { return xScale(d.weather) })
      .attr("cy", function(d) { return yScale(d.security) })
      .attr("transform", "translate(45," + 0 + ")")
      .attr("fill", "blue")
      .attr("r", 5);

//adding the "year" to each data point
    svg.selectAll("text")
      .data(delays)
      .enter()
      .append("text")
      .text(function(d) {
        return d.year;
      })
      .attr("x", function(d) {
        return xScale(d.weather);
      })
      .attr("y", function(d) {
        return yScale(d.security);
      })
      .attr("font_family", "sans-serif")
      .attr("transform", "translate(25, -10)")
      .attr("font-size", "11px")
      .attr("fill", "black");

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

//adding title at the top of the bar chart
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " , -30)")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "24px")
      .text("Flight Delays (bad weather) versus Flight Delays (security) by year in 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", "18px")
      .text("Number of Security Delays");

//labeling the x-axis
    svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + 45) + ")")
      .style("text-anchor", "middle")
      .style("font-weight", "bold")
      .style("font-size", "18px")
      .text("Number of Weather Delays");

});

</script>

</body>
</html>

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