I’m doing this program for my assignment. Here is my code
function init() {
const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
// Parse the date/time
const parseDate = d3.timeParse("%Y");
// Set the ranges
const x = d3.scaleTime().range([0, width]);
const y = d3.scaleLinear().range([height, 0]);
// Define the line
const valueline = d3.line()
.x(d => x(d.Date))
.y(d => y(d['High income']));
// Create the SVG element
const svg = d3.select("#lineChart")
.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 + ")");
// Get the data
d3.csv("../data/CPI.csv").then(data => {
// Format the data
data.forEach(d => {
d.Date = parseDate(d.Date);
d['High income'] = +d['High income'];
});
// Scale the range of the data
x.domain(d3.extent(data, d => d.Date));
y.domain([0, d3.max(data, d => d['High income'])]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueline);
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
}).catch(error => console.log(error));
}
window.onload = init;
And here is the output
Output image
The output is not what I’m looking for. The shape of it is weird. Can anyone please give me solution for the line to be shown properly? Thank you