xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3: Creating a line chart</title> <style type="text/css"> </style> </head> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script type="text/javascript"> //line chart //setting up global arrays that will have data cancellations = []; years = []; //helper function used when reading in data function findYear(year) { for(var m = 0 ; m < cancellations.length ; m++) { if(cancellations[m].year == year) { return m; } } } //helper function used when reading in data function checkArr(year) { for(var g = 0 ; g < cancellations.length ; g++) { if(cancellations[g].year == year) { return 0; } } return -1; } //debug function to make sure I'm reading in the data correctly function testArr() { for(var g = 0 ; g < years.length ; g++) { console.log(years[g]); } } //setting up the margins var margin = {top: 50, right: 50, bottom: 50, left: 50}, width = 960 - margin.left - margin.right, height = 500 - 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 required data d3.csv("airlines.csv", function(data) { data.forEach(function(d) { if(checkArr(d.Year) == 0) { index = findYear(d.Year); cancellations[index].numCancel = cancellations[index].numCancel + (+d.Cancelled); } else { years.push(d.Year); var cancel = {numCancel: +d.Cancelled, year: d.Year}; cancellations.push(cancel); } }); //making things easier for myself with this simple data array var data = []; for(v = 0 ; v < cancellations.length ; v++) { data[v] = +cancellations[v].numCancel; } //setting up x-scales var xScale = d3.scaleBand() .domain(years) .range([0, width]); var xScale2 = d3.scaleLinear() .domain([0, years.length]) .range([0, width]); //setting up y-scales var yScale = d3.scaleLinear() .domain([0, d3.max(data)]) .range([height, 0]); //defining the line variable that will be used to draw paths var line = d3.line() .x(function(d, i) { return xScale2(i); }) .y(function(d) { return yScale(d)}); //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)); //using line variable to draw paths between each data point svg.append("path") .datum(data) .attr("class", "line") .attr("transform", "translate(75, 0)") .attr("d", line) .attr("stroke", "blue") .attr("stroke-width", 2) .attr("fill", "none"); //drawing a circle for each data point svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("cx", function(d, i) { return xScale2(i) }) .attr("cy", function(d) { return yScale(d) }) .attr("transform", "translate(75, 0)") .attr("fill", "red") .attr("r", 5); //adding title at the top of the bar chart svg.append("text") .attr("transform", "translate(" + (width/2) + " , -25)") .style("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "24px") .text("Number of Flights Cancelled Per Year in the 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", "20px") .text("Flights Cancelled"); //labeling the x-axis svg.append("text") .attr("transform", "translate(" + (width/1.8) + " ," + (height + 50) + ")") .style("text-anchor", "middle") .style("font-weight", "bold") .style("font-size", "20px") .text("Year"); }); </script> </body></html> https://d3js.org/d3.v4.min.js