xxxxxxxxxx<html lang="en"><meta charset="utf-8"><head> <title>AS4 Line Chart</title> <script src="https://d3js.org/d3.v4.min.js"></script> <style> .line { fill: none; stroke: rgb(70,130,180); stroke-width: 3; opacity: 0.8; } .title { font-family: sans-serif; font-size: 20px; } .axisLabels { font-family: sans-serif; font-size: 14px; } </style></head><body> <script type="text/javascript"> // declare dimensions var h = 500, w = 800, margin = 100, axisBuffer = 20; var xAxisYPos = h-margin, yAxisXPos = margin-axisBuffer; // create svg variable var svg = d3.select("body") .append("svg") .attr("height", h) .attr("width", w); // load in data d3.csv("calData.csv", function(dataset) { // make strings numeric dataset.forEach(function(d) { d.PriceIndustrialCoal = +d.PriceIndustrialCoal; d.Year = +d.Year; }); // define scales and axes var xScale = d3.scaleLinear() .domain([d3.min(dataset, function(d) { return d.Year;}), d3.max(dataset, function(d) { return d.Year})]) .range([margin, w-margin]), yScale = d3.scaleLinear() .domain([d3.min(dataset, function(d) { return d.PriceIndustrialCoal;}), Math.ceil((d3.max(dataset, function(d) { return d.PriceIndustrialCoal}))/0.5)*0.5]) .range([h-margin, margin]); var xAxis = d3.axisBottom() .scale(xScale) .tickValues(d3.range(d3.min(dataset, function(d) { return d.Year;}), d3.max(dataset, function(d) { return d.Year;}) + 1, 6)) // add 1 to include upper bound .tickFormat(d3.format("d")), yAxis = d3.axisLeft() .scale(yScale); var line = d3.line() .x(function(d) { return xScale(d.Year); }) .y(function(d) { return yScale(d.PriceIndustrialCoal); }) // draw x axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(0, " + xAxisYPos + ")") .call(xAxis); // draw y axis svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisXPos + ", 0)") .call(yAxis); // add chart title svg.append("text") .text("Price of Industrial Coal in California by Year") .attr("class", "title") .attr("x", w/2) .attr("y", margin/2) .attr("text-anchor", "middle"); // add axis labels svg.append("text") .attr("class", "axisLabels") .attr("x", w/2) .attr("text-anchor", "middle") .attr("y", h - margin/2) .text("Year"); svg.append("text") .attr("class", "axisLabels") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "middle") .attr("transform", "translate(25, " + h/2 + ")rotate(270)") // translate and rotate y axis label .text("Price ($ per Million BTU)"); // draw line svg.append("path") .datum(dataset) .attr("class", "line") .attr("d", line); }); </script></body> https://d3js.org/d3.v4.min.js