31:T1253,chart = () => { const wrapper = d3.create("div"); wrapper.append("style").html(css); // Scaffold const chart = wrapper.selectAll(".chart") .data(data) .join("div") .attr("class", "chart"); const title = chart.append("div") .attr("class", "title") .html(d => titles[d.prop]); const svg = chart.append("svg"); const g = svg.append("g"); // Axes const xaxis = g.append("g") .attr("class", "axis x-axis"); const yaxis = g.append("g") .attr("class", "axis y-axis"); // Marks const bar = g.append("g") .attr("class", "bars") .selectAll(".bar") .data(d => d.data) .join("rect") .attr("class", "bar"); const trend = g.append("polyline") .attr("class", "trend"); // Labels const trendLabel = g.append("text") .attr("class", "trend-label") .attr("dy", -4) .text(d => d.prop === "normalized" ? "No trend" : "Increase"); const anno = g.append("g") .attr("class", "anno") .attr("text-anchor", d => annoData[d.prop].textAnchor); const annoLeader = anno.append("polyline") .attr("class", "anno-leader"); const annoYear = anno.append("text") .attr("class", "anno-year") .attr("y", 5) .text(d => annoData[d.prop].year) const annoText = anno.append("text") .attr("class", "anno-text") .attr("y", 23); return Object.assign(wrapper.node(), { resize(ww) { // Resize: Dimensions const cols = ww <= 560 ? 1 : 2; const rows = data.length / cols; const padInner = 24; const padTotal = padInner * (cols - 1); const pad = padTotal / cols; const r = ww <= 400 ? 3 : 4; const margin = { left: 51, right: 14, top: 7, bottom: 23 }; const chartMarginBottom = 24; const basewidth = ww / cols - pad; const width = basewidth - margin.left - margin.right; const height = Math.max(300, basewidth * 9 / 16) - margin.top - margin.bottom; // Resize: Scales x.range([0, width]); props.forEach(prop => { Y[prop].range([height, 0]); }); // Resize: Scaffold chart .style("margin-bottom", (_, i) => 1 + Math.floor(i / cols) === rows ? "0px" : `${chartMarginBottom}px`) .style("margin-left", (_, i) => i % cols === 0 ? "0px" : `${padInner / 2}px`) .style("margin-right", (_, i) => i % cols === (cols - 1) ? "0px" : `${padInner / 2}px`) .style("width", `calc(${100 / cols}% - ${pad}px)`) svg .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); g .attr("transform", `translate(${[margin.left, margin.top]})`); // Resize: Axes xaxis .attr("transform", `translate(0, ${height})`) .call(g => xAxisGenerator(g, height)); yaxis .attr("transform", `translate(${width})`) .each((d, i, e) => { d3.select(e[i]).call(g => yAxisGenerator(g, d.prop, width, Y)) }); // Resize: Marks bar .attr("height", d => height - Y[d.prop](d.value)) .attr("width", x.bandwidth()) .attr("x", d => x(d.year)) .attr("y", d => Y[d.prop](d.value)); trend .attr("points", d => { return regressionToLine(d); }); // Resize: Labels const i = { "inflation": 0.55, "normalized": 0.67 } trendLabel .attr("transform", d => { const l = regressionToLine(d); const a = lineAngle(l); const p = lineInterpolate(l)(i[d.prop]); return `translate(${p}) rotate(${a})` }); anno .attr("transform", d => { const { year } = annoData[d.prop] const { value } = d.data.find(f => f.year === year); return `translate(${x(year) + x.bandwidth() / 2}, ${Y[d.prop](value)})`; }); annoLeader .attr("points", d => { const offset = annoData[d.prop].offset(ww); if (offset < 0) { return [[-x.bandwidth() / 2 + offset, 0], [x.bandwidth() / 2, 0]] } else { return [[-x.bandwidth() / 2, 0], [x.bandwidth() / 2 + offset, 0]] } }) annoYear .attr("x", d => annoOffset(d)); annoText .attr("transform", d => `translate(${annoOffset(d)})`) .html(d => { return annoData[d.prop].html(ww) }) .selectAll("tspan") .attr("x", 0) .attr("dy", (d, i) => i === 0 ? 0 : 16) } }) }32:T68e,annoData = ({ "inflation": { year: 2005, offset: ww => -8, textAnchor: "end", html: ww => { if (ww <= 480) { return "Six storms, includingKatrina, Wilma and Rita,caused $147B in damage." } if (ww <= 540) { return "Six storms, includingKatrina, Wilma andRita, caused $147B in damage." } if (ww <= 560) { return "Six storms, includingKatrina, Wilma and Rita,caused $147B in damage." } else { return "Six storms, includingKatrina, Wilma and Rita,caused $147B in damage." } } }, "normalized": { year: 1926, offset: ww => 8, textAnchor: "start", html: ww => { if (ww <= 480) { return "The Great Miami Hurricanewould have cost more than$200B if it made landfallin 2018." } if (ww <= 540) { return "The Great MiamiHurricane wouldhave cost $236Bif it madelandfall in2018." } if (ww <= 580) { return "The Great MiamiHurricane would havecost $236B if it madelandfall in 2018." } else { return "The Great Miami Hurricanewould have cost more than$200B if it made landfallin 2018." } } } })33:[] 2f:{"title":"Inflation-adjusted and normalized U.S. hurricane losses, 1900-2017","cells":[{"id":0,"value":"# Inflation-adjusted and normalized U.S. hurricane losses, 1900-2017","pinned":false,"hidden":false,"mode":"md"},{"id":305,"value":"This notebook contains the data and code to produce a version of the chart of inflation-adjusted and normalized hurricane damage seen in [“The real reason billion-dollar disasters like Hurricane Helene are growing more common”](https://www.washingtonpost.com/climate-environment/interactive/2024/billion-dollar-disasters-climate-change-economy/), published in The Washington Post on Oct. 24, 2024.","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"Hurricanes have grown more destructive, but after adjusting damage to account for the growth in people and property, the trend disappears.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"display = chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"Source: Weinkle et. al. 2018. Losses are in 2018 dollars.","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"For the code containing the full data analysis, see [this notebook](https://observablehq.com/@climatelab/data-analysis-normalized-us-hurricane-losses).","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"display.resize(width)","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":70,"value":"css = `\n.chart {\n display: inline-block;\n}\n.chart .title {\n font-family: ${franklinLight};\n margin-bottom: 8px;\n}\n.axis .domain {\n display: none;\n}\n.axis .tick text {\n fill: #666666;\n font-family: ${franklinLight};\n font-size: 14px;\n}\n.axis.x-axis .tick line {\n stroke: #aaaaaa;\n}\n.axis.y-axis .tick line {\n stroke: #d5d5d5;\n}\n.anno, .trend-label {\n font-family: ${franklinLight};\n}\n.anno {\n text {\n fill: #2a2a2a;\n font-size: 14px;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-width: 8px;\n \n &.anno-year {\n font-weight: bold;\n }\n }\n\n polyline {\n stroke: #2a2a2a;\n }\n}\n\n.bar {\n fill: #E69D67;\n stroke: #E69D67;\n}\n\n.trend {\n stroke: black;\n}\n\n.trend-label {\n font-weight: bold;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-opacity: 0.5;\n stroke-width: 4px;\n text-anchor: middle;\n text-transform: uppercase;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"titles = ({\n \"inflation\": \"Adjusted for inflation\",\n \"normalized\": \"Adjusted for inflation, population and wealth\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"## Axes","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"xAxisGenerator = (g, height) => {\n const tickValuesAll = [...d3.range(1900, 2020, 20), 2017];\n const tickValuesSmall = [1900, 1950, 2017];\n const generator = d3.axisBottom(x)\n .tickSize(8)\n .tickValues(width <= 350 ? tickValuesSmall : width <= 480 ? tickValuesAll : width <= 640 ? tickValuesSmall : tickValuesAll)\n\n g\n .attr(\"transform\", `translate(0, ${height})`)\n .call(generator);\n\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"yAxisGenerator = (g, prop, width, Y) => {\n const tickValues = {\n \"inflation\": d3.range(0, 150e9, 30e9),\n \"normalized\": d3.range(0, 250e9, 50e9)\n };\n\n const generator = d3.axisLeft(Y[prop])\n .tickFormat(d => d > 0 ? `$${d / 1e9}B` : \"$0\")\n .tickSize(width + 8)\n .tickValues(tickValues[prop]);\n\n g\n .attr(\"transform\", `translate(${width})`)\n .call(generator);\n\n return g;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"x = d3.scaleBand()\n .domain(d3.range(start_year, end_year + 1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"Y = {\n const Y = {};\n props.forEach(prop => {\n Y[prop] = d3.scaleLinear().domain([0, d3.max(data.find(f => f.prop === prop).data, d => d.value)]);\n });\n return Y;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"The full data sources and analysis scripts are in [this notebook](https://observablehq.com/@climatelab/data-analysis-normalized-us-hurricane-losses).","pinned":false,"hidden":false,"mode":"md"},{"id":208,"value":"import { data_hurricanes } from \"@climatelab/data-analysis-normalized-us-hurricane-losses\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"start_year = d3.min(data_hurricanes, d => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"end_year = d3.max(data_hurricanes, d => d.year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"r = d3.regressionLinear().x(d => d.year).y(d => d.value);","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"props = [\"inflation\", \"normalized\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"data = props.map(prop => {\n const data = data_hurricanes.map(d => ({prop, year: d.year, value: d[prop]}))\n const { a, b, predict } = r(data);\n const sy = Math.max(start_year, Math.round(-b / a));\n return {\n prop,\n data,\n regression: [ [sy, predict(sy)], [end_year, predict(end_year)] ]\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"function annoOffset(d){\n const offset = annoData[d.prop].offset(width);\n if (offset < 0) {\n return (offset - 4) - x.bandwidth() / 2;\n }\n else {\n return (offset + 4) + x.bandwidth() / 2;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"function regressionToLine(d){\n return [\n [x(d.regression[0][0]), Y[d.prop](d.regression[0][1])],\n [x(d.regression[1][0]), Y[d.prop](d.regression[1][1])],\n ]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"lineAngle = geometric.lineAngle","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"lineInterpolate = geometric.lineInterpolate","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"d3 = require(\"d3@7\", \"d3-regression@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"geometric = require(\"geometric@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import { toc } from \"@climatelab/toc@45\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}