xxxxxxxxxx<html lang = "en"><head><meta charset="utf-8"> <title> 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}, width = 1000 - margin.left - margin.right, height = 700 - margin.top - margin.bottom;var xScale = d3.scaleLinear() .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 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 SFO = {minX: d3.min(dataSFO, function(d) { return d.delays; }), maxX: d3.max(dataSFO, function(d) { return d.delays; }), minY: d3.min(dataSFO, function(d) { return d.cancellations; }), maxY: d3.max(dataSFO, function(d) { return d.cancellations; })}; var LAX = {minX: d3.min(dataLAX, function(d) { return d.delays; }), maxX: d3.max(dataLAX, function(d) { return d.delays; }), minY: d3.min(dataLAX, function(d) { return d.cancellations; }), maxY: d3.max(dataLAX, function(d) { return d.cancellations; })}; var EWR = {minX: d3.min(dataEWR, function(d) { return d.delays; }), maxX: d3.max(dataEWR, function(d) { return d.delays; }), minY: d3.min(dataEWR, function(d) { return d.cancellations; }), maxY: d3.max(dataEWR, function(d) { return d.cancellations; })}; 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]); svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); 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) .attr("fill", "steelblue"); 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("fill", "orange"); 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("fill", "pink"); // 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"); // 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"); 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, EWR, and LAX in a Month"); // add legend svg.append("rect") .attr("x", width) .attr("y", 0) .attr("height", 60) .attr("width", 49) .attr("fill", "none") .attr("stroke", "black"); svg.append("text") .attr("x", width+25) .attr("y", 10) .style("font-size", "10px") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .text("Legend"); // sfo circle svg.append("circle") .attr("cx", width+5) .attr("cy", 20) .attr("r", 2) .attr("fill", "steelblue"); svg.append("text") .attr("x", width+10) .attr("y", 22) .style("font-size", "10px") .attr("font-family", "sans-serif") .text("SFO"); // LAX circle svg.append("circle") .attr("cx", width+5) .attr("cy", 35) .attr("r", 2) .attr("fill", "orange"); svg.append("text") .attr("x", width+10) .attr("y", 37) .style("font-size", "10px") .attr("font-family", "sans-serif") .text("LAX"); // EWR circle svg.append("circle") .attr("cx", width+5) .attr("cy", 50) .attr("r", 2) .attr("fill", "pink"); svg.append("text") .attr("x", width+10) .attr("y", 52) .style("font-size", "10px") .attr("font-family", "sans-serif") .text("EWR"); });</script></body></html> https://d3js.org/d3.v4.min.js