chartBarTotal = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, totalWidth, height]);
svg.append("g")
.selectAll("rect")
.data([["Historical observations", totalHistorical]])
.join("rect")
.attr("x", d => xTotal(d[0]))
.attr("y", d => yYearly(d[1]))
.attr("height", d => yYearly(0) - yYearly(d[1]))
.attr("width", xTotal.bandwidth())
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("fill", colorLightWhiteAlpha)
.append("title")
.text(d => `The historical observed annual precipitations are on average: ${formatTotal(d[1])} mm.`);
svg.append("g")
.selectAll("rect")
.data([["Projected Mean", totalProjected]])
.join("rect")
.attr("x", d => xTotal(d[0]))
.attr("y", d => yYearly(d[1]))
.attr("height", d => yYearly(0) - yYearly(d[1]))
.attr("width", xTotal.bandwidth())
.attr("stroke", colorLightBlueAlpha)
.attr("stroke-width", 2)
.attr("fill", colorLightBlueAlpha)
.append("title")
.text(d => `The projected annual precipitations are: ${formatTotal(d[1])} mm.`);
svg.append("g")
.selectAll("rect")
.data([["Projected Mean", totalHistorical]])
.join("rect")
.attr("x", d => xTotal(d[0]))
.attr("y", d => yYearly(d[1]))
.attr("height", d => yYearly(0) - yYearly(d[1]))
.attr("width", xTotal.bandwidth())
.attr("stroke", "black")
.attr("stroke-width", 3)
.attr("fill", colorLightWhiteAlpha)
.append("title")
.text(d => `The projected annual precipitations are: ${formatTotal(totalProjected)} mm.`);
svg.append("g")
.call(xTotalAxis);
svg.append("g")
.call(yYearlyAxis);
svg.append("g")
.append("text")
.attr("class", "indivAxis")
.attr("transform", "rotate(-90)")
.attr("y", margin.left * 0.25)
.attr("x",-height/2+margin.top)
.attr("dy", "1em")
.style("text-anchor", "middle")
.style("font-family", fontFamily)
.style("fill", fontFill)
.style("font-size", fontSize)
.text("Annual precipitations (mm)");
return svg.node();
}