{
const barChart = d3.select(html`<svg id="total-population-bar-chart"></svg>`);
barChart.attr("width", svgWidth);
barChart.attr("height", svgHeight);
barChart.append("g")
.attr('transform', `translate(${margin.left}, ${height + margin.top})`)
.call(d3.axisBottom(xScale));
barChart.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`)
.call(d3.axisLeft(yScale));
barChart.append("text")
.attr("x", svgWidth / 2)
.attr("y", 20)
.attr("text-anchor", "middle")
.text("Graph of total population");
barChart.append("text")
.attr("x", margin.left + width / 2)
.attr("y", svgHeight - 5)
.attr("text-anchor", "middle")
.attr("font-size", "14px")
.text("Year");
barChart.append("text")
.attr("x", -(margin.top + height / 2))
.attr("y", 15)
.attr("transform", "rotate(-90")
.attr("text-anchor", "middle")
.attr("font-size", "14px")
.text("Population");
return barChart.node();
}