30:Tea2,legend = { const wrapper = d3.create("div") .attr("class", "globe-legend"); wrapper.append("div") .attr("class", "globe-legend-title") .text("Change in deaths linked to temperature"); wrapper.append("div") .attr("class", "globe-legend-subtitle") .text("Projected average for 2080-2099"); const colors = color.range(); const values = color.domain(); const width = 400; const arrowWidth = 24; const arrowPadding = 0.2; const height = 15; const marginLeft = 0; const marginRight = 0; const tickValues = [-400, -200, -100, 100, 200, 400]; const tickSize = 4; const margin = { left: 0, right: 0, top: 24, bottom: tickSize + 35 }; const w = width - margin.left - margin.right; const x = d3.scaleLinear(d3.extent(values), [0, w - arrowWidth * 2]); const svg = wrapper.append("svg") .attr("width", w + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("overflow", "visible"); svg.append("style").html(css); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); // ticks const tick = g.selectAll(".tick") .data(colors.slice(1)) .join("g") .attr("class", "tick") .attr("transform", (d, i) => `translate(${arrowWidth + x(values[i])})`); // rects tick.append("rect") .filter((_, i, e) => i < e.length - (scenario === "rcp45" ? 2 : 1)) .attr("fill", d => d) .attr("height", height) .attr("width", (_, i) => { const v0 = values[i]; const v1 = values[i + 1]; return x(v1) - x(v0) }); // lines tick.append("line") .filter((_, i, e) => scenario === "rcp45" ? i < e.length - 1 : true) .attr("y2", (_, i) => (tickValues || values).includes(values[i]) ? height + tickSize : 0); // values tick.append("text") .filter((_, i, e) => scenario === "rcp45" ? i < e.length - 1 : true) .attr("opacity", (d, i) => (tickValues || values).includes(values[i]) ? 1 : 0) .attr("text-anchor", (_, i, e) => i === e.length - 1 ? "start" : "middle") .attr("x", (_, i, e) => i === e.length - 1 ? -16 : 0) .attr("y", height + 13 + tickSize) .html((_, i, e) => { const v = values[i]; const f = `${v > 0 ? "+" : ""}${v}` return scenario === "rcp45" ? `${f}${i === e.length - 1 ? " annual deathsper 100,000 people" : ""}` : f }); // midline const midline = g.append("g") .attr("class", "midline") .attr("transform", `translate(${width / 2})`); midline.append("line") .attr("y1", -18) .attr("y2", height + 18); midline.selectAll("text") .data(["Decrease", "Increase"]) .join("text") .attr("text-anchor", (_, i) => i ? "start" : "end") .attr("x", (_, i) => 12 * (i ? 1 : -1)) .attr("y", -10) .text(d => d); const arrows = g.selectAll(".arrow") .data(scenario === "rcp45" ? [colors[0]] : [colors[0], colors[colors.length - 1]]) .join("polygon") .attr("fill", d => d) .attr("points", (_, i) => geometric.polygonReflectX([ [0, 0], [arrowWidth * (1 - arrowPadding), 0], [arrowWidth, height / 2], [arrowWidth * (1 - arrowPadding), height], [0, height] ], 1 - i)) .attr("transform", (_, i) => `translate(${i * (arrowWidth + x.range()[1])})`); if (scenario === "rcp85") { midline.append("text") .attr("text-anchor", "middle") .attr("y", height + 32 + tickSize) .style("font-weight", "normal") .style("font-size", "14px") .text("Annual deaths per 100,000 people"); } return wrapper.node(); }31:[{"id":"f1e847d846a1d8afc170e518bfc5b9c800c97bf9642d570aefb145d0d1225de09b677af6199e9239a31752bb4b81018a0d1718f1c4a8e5a023b15d6479faf6bb","href":"https://static.observableusercontent.com/files/f1e847d846a1d8afc170e518bfc5b9c800c97bf9642d570aefb145d0d1225de09b677af6199e9239a31752bb4b81018a0d1718f1c4a8e5a023b15d6479faf6bb","name":"lo-res-regions-simplified.topo.json","type":"application/json","lastModified":1675871896728.426,"size":6327595},{"id":"a8ed1053b1c2bbadda4cf9feb37bcb3c83a4b9d47103d4335cf5cd2054bd4773be23ddcd8ba623a29d0b1bd76939320e77eb88d948727764dc90afa3493e1ac8","href":"https://static.observableusercontent.com/files/a8ed1053b1c2bbadda4cf9feb37bcb3c83a4b9d47103d4335cf5cd2054bd4773be23ddcd8ba623a29d0b1bd76939320e77eb88d948727764dc90afa3493e1ac8","name":"ne_110m_coastline@1.json","type":"application/json","lastModified":1675871896728.426,"size":60659},{"id":"beaec989a8cfaf8512cbbd1a9d09767213b0b91f8e74f6924cef13d7ae05bcee9f10912670d6a914b4d5df62ddc3c6c6e09f16b91032bee1c4dfced3a9b0d252","href":"https://static.observableusercontent.com/files/beaec989a8cfaf8512cbbd1a9d09767213b0b91f8e74f6924cef13d7ae05bcee9f10912670d6a914b4d5df62ddc3c6c6e09f16b91032bee1c4dfced3a9b0d252","name":"ne_110m_ocean.json","type":"application/json","lastModified":1675871896728.426,"size":48486},{"id":"c5763151e938c0a27dd02e7bb1a99de0b73932e2a6e126ef8b3d241330fbb2b9d1e76fa2ffe2d4828bfec62eb1fcd601886546eaeb6ab27d4a6e067f98b4a6dc","href":"https://static.observableusercontent.com/files/c5763151e938c0a27dd02e7bb1a99de0b73932e2a6e126ef8b3d241330fbb2b9d1e76fa2ffe2d4828bfec62eb1fcd601886546eaeb6ab27d4a6e067f98b4a6dc","name":"unit_change_in_deathrate_geography_impact_regions_years_averaged_rcp45_SSP3_quantiles_mean@1.csv","type":"text/csv","lastModified":1675872667708.823,"size":1648655},{"id":"25a7bda5c7065822e434808be422e86fa4c66c3e6ae8b6106ccc9050a677580f2881c93bdd18dcb47f242f38f02f289a06d6b905d7a176bfaa246eb3ad4c7a79","href":"https://static.observableusercontent.com/files/25a7bda5c7065822e434808be422e86fa4c66c3e6ae8b6106ccc9050a677580f2881c93bdd18dcb47f242f38f02f289a06d6b905d7a176bfaa246eb3ad4c7a79","name":"unit_change_in_deathrate_geography_impact_regions_years_averaged_rcp85_SSP3_quantiles_mean@1.csv","type":"text/csv","lastModified":1675872745968.295,"size":1644855}] 2e:{"title":"Map of projected change in deaths linked to temperature by the end of the century","cells":[{"id":0,"value":"# Map of projected change in deaths linked to temperature by the end of the century\n\nAn interactive version of this map appeared in the story “[Will global warming make temperature less deadly?](https://www.washingtonpost.com/climate-environment/interactive/2023/hot-cold-extreme-temperature-deaths/)”, published in The Washington Post on Feb. 16, 2023. For more information on the data sources, see [this notebook](https://observablehq.com/d/1b32ffa7d9b5e968).\n\nA groundbreaking [peer-reviewed study](https://academic.oup.com/qje/article-abstract/137/4/2037/6571943?redirectedFrom=fulltext&itid=lk_inline_enhanced-template&login=false), published in Harvard’s Quarterly Journal of Economics, projects how mortality from temperature will change in the future. You can see enormous geographic variation: colder, wealthier countries tend do well, while hotter, poorer countries suffer.","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"viewof scenario = Inputs.radio([\"rcp45\", \"rcp85\"], { value: \"rcp45\", format: d => d.replace(\"rcp\", \"RCP \").replace(\"5\", \".5\"), label: \"Scenario:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"{\n const context = DOM.context2d(w, h);\n const path = d3.geoPath(projection, context);\n\n // This clips the data to the ocean outline,\n // which makes the map look nicer,\n // but it takes much longer to render.\n if (clip) {\n context.save();\n context.beginPath();\n path(oceanGeo);\n context.clip(); \n }\n \n regionsGeo.features\n .forEach(feature => {\n context.beginPath();\n path(feature);\n const { properties } = feature;\n const c = properties.hierid === \"ATA\" ? \"#fff\" : color(properties[scenario].years_2080_2099);\n context.fillStyle = c; context.fill();\n context.strokeStyle = c; context.stroke();\n });\n\n if (clip) {\n context.restore();\n }\n context.beginPath();\n path(coastlineGeo);\n context.strokeStyle = \"#222\";\n context.lineJoin = \"round\";\n context.lineWidth = 0.25;\n context.stroke();\n \n return d3.select(context.canvas).node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1000,"value":"viewof clip = Inputs.toggle({label: \"Clip\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"toc({ selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"The following two cells contain the data produced by the study, which I downloaded from [this Dropbox](https://www.dropbox.com/s/1i5wiv9b6jhxz6t/IMPACTS%20regions.zip?dl=0).

\nThe unit is change in deaths per 100,000 linked to temperature under the RCP4.5 scenario and RCP8.5 scenario, compared to a future without climate change.","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"deathRateRcp45 = FileAttachment(\"unit_change_in_deathrate_geography_impact_regions_years_averaged_rcp45_SSP3_quantiles_mean@1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"deathRateRcp85 = FileAttachment(\"unit_change_in_deathrate_geography_impact_regions_years_averaged_rcp85_SSP3_quantiles_mean@1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":758,"value":"The following cell contains a TopoJSON file of the boundaries of the 24,378 impact regions used in the analysis. This file was sent to me by the researchers.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"regionsTopo = FileAttachment(\"lo-res-regions-simplified.topo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":766,"value":"The following cell converts the TopoJSON to GeoJSON and joins it with the data from the study.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"regionsGeo = {\n const geo = topojson.feature(regionsTopo, regionsTopo.objects.name);\n\n const i45 = d3.index(deathRateRcp45, d => d.Region_ID);\n const i85 = d3.index(deathRateRcp85, d => d.Region_ID);\n \n geo.features.forEach((feature, index) => {\n const { properties } = feature;\n\n properties.rcp45 = i45.get(properties.hierid);\n properties.rcp85 = i85.get(properties.hierid);\n\n return feature;\n });\n \n return rewind(geo, 1);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":768,"value":"I used the following shapefiles to style the map. I downloaded these files from [Natural Earth](https://www.naturalearthdata.com/downloads/110m-physical-vectors/).","pinned":false,"hidden":false,"mode":"md"},{"id":654,"value":"oceanGeo = topojson.feature(oceanTopo, oceanTopo.objects.ne_110m_ocean)","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"oceanTopo = FileAttachment(\"ne_110m_ocean.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"coastlineGeo = topojson.feature(coastlineTopo, coastlineTopo.objects.ne_110m_coastline)","pinned":true,"hidden":false,"mode":"ojs"},{"id":580,"value":"coastlineTopo = FileAttachment(\"ne_110m_coastline@1.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"css = `\n.globe-legend { \n font-family: sans-serif;\n text-align: center;\n}\n\n.globe-legend-title {\n font-weight: bold;\n margin-bottom: -2px;\n}\n\n.globe-legend-subtitle {\n margin-bottom: 16px;\n}\n\n.tick line {\n stroke: black;\n shape-rendering: crispEdges;\n}\n\n.tick text {\n font-family: sans-serif;\n font-size: 14px;\n}\n\n\n.midline line {\n stroke: black;\n shape-rendering: crispEdges;\n}\n\n.midline text {\n font-family: sans-serif;\n font-weight: bold;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"color = d3.scaleThreshold(\n [-400, -200, -150, -100, -50, -10, 0, 10, 50, 100, 150, 200, 400],\n [\n \"#007a00\", \"#1c8d25\", \"#34a241\", \"#4db55c\", \"#69c978\", \"#88dc96\", \"#aaeeb4\",\n \"#dcd0ff\", \"#c8b2ff\", \"#b294ff\", \"#9a76ff\", \"#7e58ff\", \"#5936ff\", \"#0000ff\"\n ]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"w = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"h = w * aspect","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"aspect = 0.49","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## Geo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"projection = d3.geoEqualEarth()\n .rotate([-10,0])\n .fitSize([ w, h ], { type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"import { toc } from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"rewind = require('https://bundle.run/@mapbox/geojson-rewind@0.5.1')","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"geometric = require(\"geometric@2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"md`## Acknowledgments\n\nThanks to [Philippe Rivière](https://observablehq.com/@fil) for code optimizations.`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}