bar_chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg
.selectAll("rect")
.data(chart_data2)
.join(enter => enter.append("rect"))
.attr("x", d => x2_scale(d.x))
.attr("width", x2_scale.bandwidth())
.attr("fill", d => colors2(d.x))
.transition()
.duration(800)
.attr("y", d => y2_scale(d.y))
.attr("height", d => y2_scale(0) - y2_scale(d.y))
.attr("opacity", "0.90");
svg.append("g").call(x2_axis);
svg.append("g").call(y2_axis);
svg
.append("text")
.attr("x", width / 2)
.attr("y", height - 10)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.text(color_variable);
svg
.append("text")
.attr("class", "y label")
.attr("text-anchor", "middle")
.attr("y", 15)
.attr("x", -height / 2)
.attr("transform", "rotate(-90)")
.style("font-family", "Arial")
.text(extra_variable);
svg
.append("text")
.attr("x", width / 2)
.attr("y", 40)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.text("Overall Ranking of Each Major Cereal Brand");
return svg.node();
}