D3 Scatterplot-Trivariate

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

//scatterplot trivariate

//global data array
    delays = [];

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

//helper function used when 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 the data is read in correctly
    function testArr() {
      for(var g = 0 ; g < delays.length ; g++) {
          console.log(delays[g].year);
          console.log(delays[g].minutes_w);
          console.log(delays[g].minutes_s);
      }
    }

//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].minutes_w = delays[index].minutes_w + (+d.MinutesDelayedWeather);
            delays[index].minutes_s = delays[index].minutes_s + (+d.MinutesDelayedSecurity);
            delays[index].cancelled = delays[index].cancelled + (+d.Cancelled);
          } else {
            var delay = {minutes_w: +d.MinutesDelayedWeather, minutes_s: +d.MinutesDelayedSecurity, year: d.Year, 
              cancelled: +d.Cancelled};
            delays.push(delay);
          }
      });

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

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

//creating the scale that will return varying
      //circle sizes based on flights cancelled
      var radiusScale = d3.scaleLinear()
        .domain([0, d3.max(delays, function(d) {
          return d.cancelled;
        })])
        .range([3, 20]);

//laying out each data point as a circle
      svg.selectAll(".dot1")
        .data(delays)
        .enter().append("circle")
        .attr("class", "dot1")
        .attr("cx", function(d) { return xScale(d.minutes_w) })
        .attr("cy", function(d) { return yScale(d.minutes_s) })
        .attr("transform", "translate(45," + 0 + ")")
        .attr("fill", "orange")
        .attr("r", function(d) { return radiusScale(d.cancelled) });

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

//adding title for legend
      svg.append("text")             
        .attr("transform",
            "translate(790 , 230)")
        .style("text-anchor", "middle")
        .style("font-weight", "bold")
        .style("font-size", "14px")
        .text("Legend");

//adding extra text for the legend
      svg.append("text")             
        .attr("transform",
            "translate(" + 790 + " , 255)")
        .style("text-anchor", "middle")
        .style("font-size", "10px")
        .text("Flights Cancelled: ");

//creating the circles for the legend
      svg.selectAll(".dot2")
        .data([10000, 25000, 50000, 75000, 100000])
        .enter().append("circle")
        .attr("class", "dot2")
        .attr("cx", function(d) { return 700; })
        .attr("cy", function(d) { return d/600; })
        .attr("transform", "translate(55, 260)")
        .attr("fill", "orange")
        .attr("r", function(d) { return radiusScale(d) });

//adding text for each circle in the legend
      svg.selectAll("text2")
        .data([10000, 25000, 50000, 75000, 100000])
        .enter()
        .append("text")
        .text(function(d) {
          return d + " flights";
        })
        .attr("x", function(d) {
          return 700;
        })
        .attr("y", function(d) {
          return d/600;  
        })
        .attr("font_family", "sans-serif")
        .attr("transform", "translate(80, 263)")
        .attr("font-size", "11px") 
        .attr("fill", "black");

//drawing the box for the legend
      svg.append("line")
        .style("stroke", "black")
        .attr("x1", 715)
        .attr("y1", 240)
        .attr("x2", 875)
        .attr("y2", 240);

//drawing the box for the legend
      svg.append("line")
        .style("stroke", "black")
        .attr("x1", 715)
        .attr("y1", 475)
        .attr("x2", 875)
        .attr("y2", 475);

//drawing the box for the legend
      svg.append("line")
        .style("stroke", "black")
        .attr("x1", 715) 
        .attr("y1", 240) 
        .attr("x2", 715)     
        .attr("y2", 475);

//drawing the box for the legend
      svg.append("line")
        .style("stroke", "black")
        .attr("x1", 875)
        .attr("y1", 240)
        .attr("x2", 875)
        .attr("y2", 475);

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

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

//adding title
      svg.append("text")             
        .attr("transform",
            "translate(" + (width/2) + " , -30)")
        .style("text-anchor", "middle")
        .style("font-weight", "bold")
        .style("font-size", "24px")
        .text("Minutes Wasted from Flight Delays (Weather vs Security)");

//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 Minutes from 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 Minutes from Weather Delays");

});

</script>

</body>
</html>

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