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