chart = () => {
const wrapper = d3.create("div").attr("class", "chart-wrapper");
wrapper.append("style").html(css);
const titles = wrapper.append("div").attr("class", "chart-titles");
titles.append("div")
.attr("class", "chart-title")
.text("U.S. billion-dollar disasters, 1980-2023");
const legend = titles.append("div")
.attr("class", "chart-legend");
const legendItem = legend.selectAll(".legend-item")
.data(Object.keys(colors))
.join("div")
.attr("class", "legend-item");
legendItem.append("div")
.attr("class", "legend-swatch")
.style("background", d => colors[d]);
legendItem.append("div")
.attr("class", "legend-label")
.text(d => categoryLookup[d]);
const chart = wrapper.append("div")
.attr("class", "chart");
const svg = chart.append("svg")
.attr("width", chartwidth + margin.left + margin.right)
.attr("height", chartheight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${[margin.left, margin.top]})`);
g.append("g")
.attr("class", "axis y-axis")
.attr("transform", `translate(${chartwidth})`)
.call(yAxisGenerator0);
g.append("g")
.attr("class", "axis y-axis")
.attr("transform", `translate(${chartwidth})`)
.call(yAxisGenerator1);
g.append("g")
.attr("class", "axis y-axis")
.attr("transform", `translate(${chartwidth})`)
.call(yAxisGenerator2);
g.append("g")
.attr("class", "axis x-axis")
.attr("transform", `translate(0, ${chartheight})`)
.call(xAxisGenerator)
.select(".domain").raise();
g.append("g")
.attr("class", "bars")
.selectAll(".bar")
.data(series)
.join("rect")
.attr("class", "bar")
.attr("fill", d => colors[d.category])
.attr("x", d => x(d.year))
.attr("y", d => y(d[1]))
.attr("width", d => x.bandwidth())
.attr("height", d => y(d[0]) - y(d[1]));
const at = width <= 600 ? [x(2023) -5 , y(28) + 54] : [x(2023) + x.bandwidth(), y(28)];
const anno = g.append("g")
.attr("class", "anno")
.attr("transform", `translate(${at})`);
anno.append("text")
.attr("class", "anno-title")
.attr("dx", 0)
.attr("y", -42)
.text("2023");
anno.append("text")
.attr("dx", 0)
.attr("y", -24)
.html(`<tspan>28 disasters</tspan><tspan x=0 dy=18>costing $94.8 billion</tspan>`);
wrapper.append("div")
.attr("class", "source")
.text("Source: National Oceanic and Atmospheric Administration");
return wrapper.node();
}