31:T7e7,legend = () => { const wrapper = d3.create("div"); wrapper.append("div") .style("font-family", franklinLight) .style("line-height", "22px") .style("margin-bottom", "4px") .style("text-align", "center") .html("Winter temperature change
per decade, 1980-2024"); const margin = { top: 0, bottom: 18 }; const width = 250; const height = 16; const scale = d3.scaleBand() .domain(legendValues) .range([0, width]) const svg = wrapper.append("svg") .attr("width", width) .attr("height", height + margin.top + margin.bottom) .attr("font-family", franklinLight) .style("margin", "0 auto") .style("display", "table") .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(0, ${margin.top})`) const tickValues = [...d3.range(-1, 0.5, 0.5), coldValues[0], ...d3.range(0, 2, 0.5)] const tick = g.selectAll(".tick") .data(legendValues) .join("g") .attr("class", "tick") .attr("transform", d => `translate(${scale(d)})`); const epsilon = 1e-6; tick.append("rect") .attr("fill", d => d > 0 ? colorScale(d - epsilon) : colorScale(d + epsilon)) .attr("height", height) .attr("x", -0.5) .attr("width", (_, i, e) => scale.bandwidth() + (i < e.length - 1 ? 1 : 0)); // add some overlap tick.append("line") .filter(d => tickValues.includes(d)) .attr("stroke", "black") .attr("transform", d => `translate(${d >= coldValues[0] ? scale.bandwidth() : 0})`) .attr("y1", height) .attr("y2", height + 4); tick.append("text") .filter(d => tickValues.includes(d)) .attr("font-size", 14) .attr("text-anchor", "middle") .attr("transform", d => `translate(${d >= coldValues[0] ? scale.bandwidth() : 0})`) .attr("y", height + 17) .text((d, i, e) => d === coldValues[0] ? "0" : `${d < 0 ? "-" : d > 0 ? "+" : ""}${Math.abs(d)}${i === e.length - 1 ? "°F" : ""}`); return wrapper.node(); }32:T7a6,map = () => { const wrapper = d3.create("div") .style("width", `${mapwidth}px`) .style("height", `${mapheight}px`) .style("position", "relative"); wrapper.append("style").html(css); const canvas = wrapper.append("canvas") .style("position", "absolute"); canvas.node().width = mapwidth; canvas.node().height = mapheight; const context = canvas.node().getContext("2d"); const path = d3.geoPath(projection, context); if (clip) { context.beginPath(); path(statesOuter); context.clip(); } data.forEach(d => { context.beginPath(); path(square(d)); const c = colorScale(d[variable]); context.fillStyle = c; context.fill(); context.strokeStyle = c; context.stroke(); }); path.context(null); const svg = wrapper.append("svg") .style("position", "absolute") .attr("width", mapwidth) .attr("height", mapheight); svg.append("path") .datum(statesOuter) .attr("d", path) .attr("fill", "none") .attr("stroke", "#222") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.5); svg.append("path") .datum(statesInner) .attr("d", path) .attr("fill", "none") .attr("stroke", "#888") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.5); const citiesG = svg.selectAll(".city") .data(cities) .join("g") .attr("class", d => `city ${d.pos} ${toSlugCase(d.name)}`) .attr("transform", d => `translate(${projection([d.lon, d.lat])})`); citiesG.append("circle") .attr("class", "circle-bg") .attr("r", 3); citiesG.append("circle") .attr("r", 3); citiesG.append("text") .attr("class", "bg bg-0") .text(d => d.name); citiesG.append("text") .attr("class", "bg bg-1") .text(d => d.name); citiesG.append("text") .attr("class", "fg") .text(d => d.name); return wrapper.node(); }33:T6a0,css = ` .city circle { fill: none; stroke: black; } .city.ne text { transform: translate(4px, -4px); } .city.se text { transform: translate(4px, 13px); } .city.e text { transform: translate(6px, 4.5px); } .city.boston { display: ${mapwidth <= 480 ? "none" : "block"}; } .city.boston text { text-anchor: ${mapwidth <= 900 ? "end" : "start"}; transform: translate(${mapwidth <= 900 ? "-4px" : "4px"}, -4px); } .city.chicago text { text-anchor: ${mapwidth <= 620 ? "end" : "start"}; transform: translate(${mapwidth <= 620 ? "-4px" : "4px"}, -4px); } .city.minneapolis { display: ${mapwidth <= 480 ? "none" : "block"}; } .city.new-york text { text-anchor: ${mapwidth <= 660 ? "end" : "start"}; transform: translate(${mapwidth <= 600 ? "-4px" : "4px"}, -4px); } .city.philadelphia { display: ${mapwidth <= 480 ? "none" : "block"}; } .city.philadelphia text { text-anchor: ${mapwidth <= 768 ? "end" : "start"}; transform: translate(${mapwidth <= 768 ? "-6px" : "6px"}, 4.5px); } .city.seattle text { transform: translate(4px, ${mapwidth <= 400 ? "13px" : "-4px"}); } .city.st-louis { display: ${mapwidth <= 480 ? "none" : "block"}; } .city.washington-dc text { text-anchor: ${mapwidth <= 400 ? "end" : mapwidth <= 768 ? "middle" : "start"}; transform: ${mapwidth <= 400 ? "translate(-4px, 13px)" : mapwidth <= 768 ? "translate(0px, 16px)" : "translate(4px, 13px)"}; } .city text { font-size: ${mapwidth <= 480 ? "13px" : "14px"}; font-family: ${franklinLight}; } .city text.bg { fill: white; stroke: white; } .city text.bg-0 { stroke-width: 4px; stroke-opacity: 0.2; } .city text.bg-1 { stroke-width: 2px; stroke-opacity: 0.5; } `34:[{"id":"395ffe66bea8367b87514875fa11163460e3035f6fad88770e915e3312561c99ed044ba9ce9a456f8d20adc7f41ee273dc65c0c733bf24e94978a7cc1ebc1556","href":"https://static.observableusercontent.com/files/395ffe66bea8367b87514875fa11163460e3035f6fad88770e915e3312561c99ed044ba9ce9a456f8d20adc7f41ee273dc65c0c733bf24e94978a7cc1ebc1556","name":"coordinates.csv","type":"text/csv","lastModified":1708018555897.266,"size":35503760},{"id":"3f34d47829851e750ca1eae26089ee99591652d26b2d4705c1eef7be396c4c71ef7dd25a0483c0ffe6a2dd7f8b6446f1658e8fac0f55e5ff41a9bbddfd064e53","href":"https://static.observableusercontent.com/files/3f34d47829851e750ca1eae26089ee99591652d26b2d4705c1eef7be396c4c71ef7dd25a0483c0ffe6a2dd7f8b6446f1658e8fac0f55e5ff41a9bbddfd064e53","name":"statesTopo.json","type":"application/json","lastModified":1708018964117.537,"size":60898},{"id":"6ccd4f8232dcdab3104d858e2009e021a53aa0eea5d3f506aaf19851bc2d6f8575bacde09f1eefe2ea312a83fdfbacda7f9323c90e930dae9f44b227951ea44f","href":"https://static.observableusercontent.com/files/6ccd4f8232dcdab3104d858e2009e021a53aa0eea5d3f506aaf19851bc2d6f8575bacde09f1eefe2ea312a83fdfbacda7f9323c90e930dae9f44b227951ea44f","name":"cities.json","type":"application/json","lastModified":1708119904150.101,"size":971},{"id":"2e2807a69f58a1161c135f20d80486abae048aeb5684a1fa1e03c8e68d7f18365a8999e5d751a3673ee75e612411f830ddd7949afc7df1156f3d4211369ef3c2","href":"https://static.observableusercontent.com/files/2e2807a69f58a1161c135f20d80486abae048aeb5684a1fa1e03c8e68d7f18365a8999e5d751a3673ee75e612411f830ddd7949afc7df1156f3d4211369ef3c2","name":"regression_1980-2024@7.csv","type":"text/csv","lastModified":1709255929505.108,"size":39914396}] 2f:{"title":"Map: Winter temperature trend since 1980","cells":[{"id":0,"value":"# Map: Winter temperature trend since 1980\n\nThis notebook shows how to create a version of the map that appeared in [“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.","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"viewof clip = Inputs.toggle({ label: \"Clip (might kill your browser):\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"To produce the data shown here:\n1. I downloaded daily minimum and maximum temperature data from [GridMET](https://www.climatologylab.org/gridmet.html).\n2. To get the approximate daily mean temperature, I divided the sum of the daily minimum and maximum temperatures by two.\n3. Then I calculated the average daily temperature for each winter, beginning from Dec. 1 of the previous year and ending Feb. 28 of the current year. For example, winter 1980 begins Dec. 1, 1979, and ends Feb. 28, 1980.\n4. Finally, I calculated the linear regression relating time to temperature in each grid cell.","pinned":false,"hidden":false,"mode":"md"},{"id":584,"value":"{\n const L = data.length;\n const F = data.filter(d => d[variable] > 0).length;\n const f = d3.format(\",\");\n return html`Of ${f(L)} grid cells, ${f(F)} (${(F / L * 100).toFixed(1)}%) show a warming trend.`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"toc({ heading: \"Jump to:\", selector: \"h2\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"## Graphics","pinned":false,"hidden":false,"mode":"md"},{"id":454,"value":"legendValues = [...coldValues.slice().reverse(), ...heatValues]","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"## Styles","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"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":265,"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":282,"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":318,"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":330,"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":206,"value":"extent = d3.extent(data, d => d[variable])","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"## Geo","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"projection = d3.geoAlbersUsa().fitSize([mapwidth, mapheight], statesOuter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"statesTopo = FileAttachment(\"statesTopo.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"statesOuter = topojson.mesh(statesTopo, statesTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a === b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"statesInner = topojson.mesh(statesTopo, statesTopo.objects.ne_50m_admin_1_states_provinces_lakes, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"cities = FileAttachment(\"cities.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"square = geoSquare()\n .center(d => [d.longitude, d.latitude])\n .area(cellsize ** 2);","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"cellsize = 4; // 4km","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"mapwidth = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"mapheight = mapwidth * 0.631","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"variable = \"decadal_rate\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"coordinates = FileAttachment(\"coordinates.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"regression_19802024 = FileAttachment(\"regression_1980-2024@7.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"data = regression_19802024.map(d => {\n \n Object.assign(d, coordinates[d.index]);\n\n d[variable] = d.slope * 10;\n \n return d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"## Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"function toSlugCase(x) {\n return x.toString().toLowerCase()\n .replace(/\\s+/g, \"-\") // Replace spaces with -\n .replace(/[^\\w\\-]+/g, \"\") // Remove all non-word chars\n .replace(/\\-\\-+/g, \"-\") // Replace multiple - with single -\n .replace(/^-+/, \"\") // Trim - from start of text\n .replace(/-+$/, \"\"); // Trim - from end of text\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"import { geoSquare } from \"@climatelab/geosquare@267\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"import { franklinLight } from \"@climatelab/fonts@46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"import {toc} from \"@climatelab/toc@44\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}