31:Ta63,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"); return Object.assign(wrapper.node(), { resize(ww) { // Resize: Dimensions const cols = ww <= 480 ? 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: 38, right: 14, top: 7, bottom: 23 } const chartMarginBottom = 24; const basewidth = ww / cols - pad; const width = basewidth - margin.left - margin.right; const maxHeight = ww <= 480 ? 100 : 250; const height = Math.min(basewidth * 9 / 16, maxHeight) - 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)); } }) }32:[] 2f:{"title":"Factors influencing U.S. hurricane losses, 1900-2017","cells":[{"id":0,"value":"# Factors influencing 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 the factors influencing 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":"Most of the increase in hurricane damage is a result of changes in population and wealth rather than change in the behavior of hurricanes.","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, U.S. Census Bureau, Andrew J. Van Leuven and NOAA. Major hurricanes are defined as Category 3 or higher. Wealth is 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.chart svg {\n overflow: visible;\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\n.bar {\n fill: #6E86AA;\n stroke: #6E86AA;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"titles = ({\n \"count\": `Hurricanes making landfall`,\n \"count_major\": `Major hurricanes making landfall`,\n \"population\": `Population in coastal counties`,\n \"wealth\": `Wealth in coastal counties`\n})","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 \"count\": [0, 3, 6],\n \"count_major\": [0, 2, 4],\n \"population\": [0, 30e6, 60e6],\n \"wealth\": [0, 5e12, 10e12]\n };\n\n const tickFormat = {\n \"count\": d => d,\n \"count_major\": d => d,\n \"population\": d => d > 0 ? `${d / 1e6}M` : \"0\",\n \"wealth\": d => d > 0 ? `$${d / 1e12}T` : \"$0\"\n }\n\n const ts = {\n \"count\": 27,\n \"count_major\": 26,\n \"population\": 8,\n \"wealth\": 6\n }\n const generator = d3.axisLeft(Y[prop])\n .tickFormat(tickFormat[prop])\n .tickSize(width + ts[prop])\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 domains = {\n \"count\": [0, 6],\n \"count_major\": [0, 4],\n \"population\": [0, 60e6],\n \"wealth\": [0, 10e12]\n }\n const Y = {};\n props.forEach(prop => {\n Y[prop] = d3.scaleLinear().domain(domains[prop]);\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 = [\"count\", \"count_major\", \"population\", \"wealth\"]","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 return {\n prop,\n data\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"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":"$W32","stdlib":"1","titling":"auto"}