path = {
const height = 500;
const margin = 80;
const xAccessor = (d) => d.year;
const yAccessor = (d) => d.population;
const xScale = d3
.scaleLinear()
.domain(d3.extent(japanPopulation, xAccessor))
.range([margin, width]);
const yScale = d3
.scaleLinear()
.domain(d3.extent(japanPopulation, yAccessor))
.range([height - margin, 0]);
const lineGenerator = d3
.line()
.x((d) => xScale(xAccessor(d)))
.y((d) => yScale(yAccessor(d)));
const svg = d3.create("svg").attr("width", width).attr("height", height);
const line = svg
.append("path")
.attr("d", lineGenerator(japanPopulation))
.attr("fill", "none")
.attr("stroke", "cornflowerblue")
.attr("stroke-width", "3");
const xAxisGenerator = d3.axisBottom().scale(xScale);
const xAxis = svg
.append("g")
.call(xAxisGenerator)
.style("transform", `translateY(${height - margin}px)`);
const yAxisGenerator = d3.axisLeft().scale(yScale);
const yAxis = svg
.append("g")
.call(yAxisGenerator)
.style("transform", `translateX(${margin}px)`);
return svg.node();
}