xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3: Creating a bivariate scatterplot</title> <style type="text/css"> </style> </head> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script type="text/javascript"> //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