31:Td78,chartGenerator = (chart, data, index) => { const margin = ({left: 10, right: 10, top: 5 + (index ? 0 : marginTopExtraFirstChart), bottom: 24}) const regionsOrdered = data[1]; const cities = regionsOrdered.map(d => d.entries).flat(); const chartheight = (24 + maxR) * regionsOrdered.length; const y = d3.scaleBand(regionsOrdered.map(d => d.subregion), [0, chartheight]); const svg = chart.append("svg") .attr("width", chartwidth + margin.left + margin.right) .attr("height", chartheight + margin.top + margin.bottom) svg.append("style").html(css); const g = svg.append("g") .attr("transform", `translate(${[margin.left, margin.top]})`); g.append("g") .call((g) => axisGenerator(g, chartheight, y, index)); g.selectAll(".subregion-label") .data(regionsOrdered) .join("text") .attr("class", "subregion-label") .attr("y", d => y(d.subregion) + y.bandwidth() / 2) .text(d => d.subregion); const statesProp = chartwidth <= 520 ? "states_abbr" : "states"; const statesY = chartwidth <= 350 ? 16 : chartwidth <= 520 ? 18 : 20; const statesDy = chartwidth <= 350 ? 13 : chartwidth <= 520 ? 14 : 16; g.selectAll(".states-label") .data(regionsOrdered) .join("text") .attr("class", "states-label") .attr("y", d => y(d.subregion) + y.bandwidth() / 2 + statesY) .html(d => { if (d.states.length < 5) { return d[statesProp].join(", "); } else { const grouper = Math.ceil(d.states.length / 2); const groups = d3.groups(d[statesProp], (_, i) => i < grouper); return groups.map((group, i) => `${group[1].join(", ")}`) } }) g.selectAll(".baseline") .data(regionsOrdered) .join("line") .attr("stroke", "#ccc") .attr("shape-rendering", "crispEdges") .attr("transform", d => `translate(0, ${y(d.subregion) + y.bandwidth()})`) .attr("x2", chartwidth); g.append("g") .attr("class", "warts") .selectAll(".wart") .data(cities) .join("path") .attr("class", "wart") .attr("d", d => semicircle(x(d.decadal_change), y(d.subregion), r(d.population))) .attr("fill", d => colorScale(d.decadal_change)) .attr("fill-opacity", 0.8) .attr("stroke", d => d3.color(colorScale(d.decadal_change)).darker(0.2)) .attr("transform", `translate(0, ${y.bandwidth()})`); const cityLabel = g.selectAll(".city-label") .data(dataCityLabels.filter(d => data[0] === d.region)) .join("g") .attr("class", "city-label") .attr("transform", d => { const cx = x(d.decadal_change); const cy = y(d.subregion) + y.bandwidth(); const radius = r(d.population); return `translate(${geometric.pointTranslate([cx, cy], d.angle(chartwidth), radius)})`; }) cityLabel.append("polyline") .attr("points", d => { return [[0, 0], geometric.pointTranslate([0, 0], d.angle(chartwidth), 5)] }) .attr("stroke", d => d3.color(colorScale(d.decadal_change)).darker(0.2)) .style("display", d => d.display ? d.display(chartwidth) : "block") cityLabel.append("text") .attr("text-anchor", d => d.textAnchor(chartwidth)) .attr("transform", d => { return `translate(${geometric.pointTranslate([0, 0], d.angle(chartwidth), 7)})` }) .text(d => d.city); return chart; }32:T5cf,axisGenerator = (g, chartheight, y, i) => { const tickValues = d3.range(-0.5, 1.5, 0.5); const top = d3.axisTop(x) .tickFormat(d => "") .tickSize(chartheight - y.bandwidth()) .tickValues([0]); const bottom = d3.axisBottom(x) .tickFormat(d => `${d > 0 ? "+" : ""}${d}°F`) .tickSize(10) .tickValues(tickValues); if (i === 0){ const axisTitle = g.append("text") .attr("class", "axis-title") .attr("transform", `translate(${x(0)}, -${marginTopExtraFirstChart - 12})`) .html("Winter temperature changeper decade, 1980-2024") const axisLabel = g.selectAll(".axis-label") .data(["Colder", "Warmer"]) .join("text") .attr("class", "axis-label") .attr("fill", (_, i) => i === 0 ? "#6ea4c1" : "#d76935") .attr("text-anchor", (_, i) => i ? "start" : "end") .attr("transform", `translate(${x(0)}, -6)`) .attr("x", (_, i) => (i * 2 - 1) * 10) .attr("y", 12) .text(d => d); } const axisTop = g.append("g") .attr("class", "axis axis-top") .attr("transform", `translate(0, ${chartheight})`) .call(top) .selectAll(".tick line") .attr("y2", d => -top.tickSize() - (i === 0 ? 4 : 0) - (d ? 0 : y.bandwidth())) const axisBottom = g.append("g") .attr("class", "axis axis-bottom") .attr("transform", `translate(0, ${chartheight})`) .call(bottom); return g; }33:T633,dataCityLabels = [ {"city":"Atlanta","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Boston","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Chicago","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Cleveland","angle": ww => -90,"textAnchor": ww => "middle","display": ww => ww <= 600 ? "none" : "block"}, {"city":"Dallas","state_post":"Tex.","angle": ww => -115,"textAnchor": ww => "end"}, {"city":"Detroit","angle": ww => -90,"textAnchor": ww => "middle","display": ww => ww <= 600 ? "none" : "block"}, {"city":"Houston","angle": ww => -65,"textAnchor": ww => "start"}, {"city":"Las Vegas","angle": ww => -90,"textAnchor": ww => "middle","display": ww => ww <= 480 ? "none" : "block"}, {"city":"Los Angeles","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Miami","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Minneapolis","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Nashville","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"New York","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"Philadelphia","angle": ww => -135,"textAnchor": ww => "end","display": ww => ww <= 600 ? "none" : "block"}, {"city":"Phoenix","angle": ww => -90,"textAnchor": ww => "middle"}, {"city":"San Diego","angle": ww => -90,"textAnchor": ww => "middle","display": ww => ww <= 680 ? "none" : "block"}, {"city":"St. Louis","angle": ww => -90,"textAnchor": ww => "middle","display": ww => ww <= 480 ? "none" : "block"}, ].map(d => Object.assign(d, dataFlat.find(f => f.city === d.city)))34:T556,// Same as here: https://www.washingtonpost.com/climate-environment/interactive/2022/extreme-heat-risk-map-us/ // But I put Del., Md., D.C. in Northeast - Middle Atlantic regions = [ {"name":"West - Mountain","states":["Ariz.","Colo.","Idaho","Mont.","Nev.","N.M.","Utah","Wyo."],"states_abbr":["AZ","CO","ID","MT","NV","NM","UT","WY"]}, {"name":"West - Pacific","states":["Calif.","Ore.","Wash."],"states_abbr":["CA","OR","WA"]}, {"name":"South - West South Central","states":["Ark.","La.","Okla.","Tex."],"states_abbr":["AK","LA","OK","TX"]}, {"name":"South - South Atlantic","states":["Fla.","Ga.","N.C.","S.C.","Va.","W.Va."],"states_abbr":["FL","GA","NC","SC","VA","WV"]}, {"name":"South - East South Central","states":["Ala.","Ky.","Miss.","Tenn."],"states_abbr":["AL","KY","MS","TN"]}, {"name":"Midwest - West North Central","states":["Iowa","Kan.","Minn.","Mo.","N.D.","Neb.","S.D."],"states_abbr":["IA","KS","MN","MO","ND","NE","SD"]}, {"name":"Midwest - East North Central","states":["Ill.","Ind.","Mich.","Ohio","Wis."],"states_abbr":["IL","IN","MI","OH","WI"]}, {"name":"Northeast - Middle Atlantic","states":["D.C.","Del.","Md.","N.J.","N.Y.","Pa."],"states_abbr":["DC","DE","MD","NJ","NY","PA"]}, {"name":"Northeast - New England","states":["Conn.","Mass.","Maine","N.H.","R.I.","Vt."],"states_abbr":["CT","MA","ME","NH","RI","VT"]} ]35:[{"id":"fb28b17bf432bdd06eb3cb9f1d75cdf7dda3f113e42cb8c0aba478f3d76fa037ca19ce25d62040b4e3e3cc185d5ab9f999767181360e89b31784de3e1e8a95e4","href":"https://static.observableusercontent.com/files/fb28b17bf432bdd06eb3cb9f1d75cdf7dda3f113e42cb8c0aba478f3d76fa037ca19ce25d62040b4e3e3cc185d5ab9f999767181360e89b31784de3e1e8a95e4","name":"cities-output@3.csv","type":"text/csv","lastModified":1709256088668.065,"size":1758774}] 2f:{"title":"Wartplot: Winter temperature trend in U.S. cities","cells":[{"id":0,"value":"# Wartplot: Winter temperature trend in U.S. cities\n\nThis notebook contains the code to make a version of the chart from [“Winter is warming almost everywhere. See how it’s changed in your town.”](https://www.washingtonpost.com/climate-environment/interactive/2024/winter-temperature-warming-city-data-climate-change/), which appeared in The Washington Post on March 1, 2024. I call this a “wartplot” because the data marks look like warts to me.","pinned":false,"hidden":false,"mode":"md"},{"id":480,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":464,"value":"graphic()","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"The temperature data used to produce this chart come from [GridMET](https://www.climatologylab.org/gridmet.html). Each of GridMET’s grid cells is 1/24 degrees, or a little more than 8 square miles. To join the grid to a list of cities, I downloaded the locations and populations of cities from [Simplemaps](https://simplemaps.com/data/us-cities). Then, I found the grid cell containing each city’s coordinates, filtering out a handful of cities in the Florida Keys that did not fall within the bounds of any grid cell.","pinned":false,"hidden":false,"mode":"md"},{"id":149,"value":"toc({ heading: \"Jump to:\", selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"graphic = () => {\n const wrapper = d3.create(\"div\");\n\n const chart = wrapper.selectAll(\".chart\")\n .data(dataMultiples)\n .join(\"div\")\n .attr(\"class\", \"chart\");\n\n chart.append(\"div\")\n .attr(\"class\", \"region-label\")\n .style(\"margin-bottom\", (_, i) => `-${20 + (i ? 0 : marginTopExtraFirstChart)}px`)\n .text(d => d[0]);\n\n chart.each((data, i, e) => {\n d3.select(e[i]).call(sel => chartGenerator(sel, data, i))\n })\n\n return wrapper.node();\n}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":340,"value":"marginTopExtraFirstChart = 45","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"## Color","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"heatValues = [0.083, 0.167, 0.25, 0.333, 0.417, 0.5, 0.583, 0.667, 0.75, 0.833, 0.917, 1, 1.083, 1.167, 1.25, 1.333, 1.417, 1.5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"heatColors = [\n \"#f8f4e2\", \"#f9e9ce\", \"#fadfbb\", \"#fad5a7\", \"#f9ca94\", \"#f7c081\", // 0.5\n \"#fd9c63\", \"#f69259\", \"#ee8850\", \"#e77d47\", \"#df733e\", \"#d76935\", // 1\n \"#cc0000\", \"#bf0018\", \"#b20124\", \"#a5042b\", \"#980730\", \"#8b0a34\", // 1.5\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"coldValues = [-0.083, -0.167, -0.25, -0.333, -0.417, -0.5, -0.583, -0.667, -0.75, -0.833, -0.917, -1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"coldColors = [\n \"#eff4e9\", \"#e0ede6\", \"#d2e5e1\", \"#c4deda\", \"#b6d7d2\", \"#a9d0ca\", // -0.5\n \"#9fc4d7\", \"#95bed3\", \"#8cb7ce\", \"#82b1ca\", \"#78aac6\", \"#6ea4c1\", // -1\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"colorScale = value => {\n if (value < 0) {\n let index = -1;\n\n for (let i = 0, l = coldValues.length; i < l; i++) {\n const v = coldValues[i];\n if (value > v) {\n index = i;\n break;\n }\n }\n \n return coldColors[index];\n }\n else {\n let index = -1;\n \n for (let i = 0, l = heatValues.length; i < l; i++){\n const v = heatValues[i];\n if (value < v) {\n index = i;\n break;\n }\n }\n return heatColors[index] \n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"css = `\n.chart {\n margin-bottom: 20px;\n}\n.axis .domain {\n display: none;\n}\n.axis .tick line {\n stroke: #ccc;\n}\n.axis .tick text {\n font-family: ${franklinLight};\n font-size: 14px;\n}\n.axis-title {\n font-family: ${franklinLight};\n font-size: 16px;\n text-anchor: middle;\n}\n.axis-label {\n font-family: ${franklinLight};\n font-size: 16px;\n font-weight: bold;\n}\n\n.region-label {\n font-family: ${franklinLight};\n font-size: ${chartwidth <= 520 ? \"16px\" : \"18px\"};\n font-weight: bold;\n}\n.subregion-label {\n font-family: ${franklinLight};\n font-size: ${chartwidth <= 520 ? \"14px\" : \"16px\"};\n}\n.states-label {\n font-family: ${franklinLight};\n font-size: ${chartwidth <= 350 ? \"11px\" : chartwidth <= 520 ? \"12px\" : \"14px\"};\n}\n.city-label text {\n font-family: ${franklinLight};\n font-size: 14px;\n paint-order: stroke fill;\n stroke: white;\n stroke-linejoin: round;\n stroke-opacity: 0.8;\n stroke-width: 8px;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"x = d3.scaleLinear(d3.extent(dataFlat, d => d.decadal_change), [ 0, chartwidth ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"r = d3.scaleSqrt([0, d3.max(dataFlat, d => d.population)], [0, maxR])","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"maxR = 60","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"margin = ({\n left: r(dataFlat[d3.minIndex(dataFlat, d => d.decadal_change)].population),\n right: r(dataFlat[d3.maxIndex(dataFlat, d => d.decadal_change)].population)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"chartwidth = Math.min(640, width) - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":396,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"dataFlat = dataMultiples.map(d => d[1]).flat().map(d => d.entries).flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"dataMultiples = d3.groups(ordered, d => d.region)","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"ordered = d3\n .groups(citiesOutput, d => d.region, d => d.subregion)\n .map(([region, subregions]) => {\n const regionEntries = subregions.map(d => d[1]).flat();\n return {\n region,\n subregions,\n median: d3.median(regionEntries, d => d.decadal_change)\n }\n })\n .sort((a, b) => d3.descending(a.median, b.median))\n .map(({region, subregions}) => {\n return subregions\n .map(([subregion, entries]) => {\n const { states, states_abbr } = regions.find(f => f.name === `${region} - ${subregion}`);\n return {\n region,\n subregion,\n entries,\n states,\n states_abbr,\n median: d3.median(entries, d => d.decadal_change)\n }\n })\n .sort((a, b) => d3.descending(a.median, b.median))\n })\n .flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"citiesOutput = (await FileAttachment(\"cities-output@3.csv\").csv())\n .map(d => {\n d.population = +d.population;\n d.decadal_change = +d.slope * 10;\n const [region, subregion] = regions.find(f => f.states.includes(d.state_post)).name.split(\" - \");\n d.region = region;\n d.subregion = subregion;\n return d;\n })\n .filter(d => d.population >= 25e3)\n .sort((a, b) => d3.descending(a.population, b.population))","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"function semicircle(cx, cy, r){\n return \"M\" + (cx + r) + \",\" + cy + \" a\" + r + \",\" + r + \" 1 1,0 -\" + (r * 2) + \",0\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"import { toc } from \"@climatelab/toc@44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"geometric = require(\"geometric@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}