31:T7a0,chart = function*() { const svg = d3.create("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") .attr("class", "grid x-grid") .call(xgridGenerator) .selectAll(".tick line") .attr("y1", (d, i, e) => x_tick_subtract(d, i, e)) const ygrid = g.append("g") .attr("transform", `translate(${chartwidth})`) .attr("class", "grid y-grid") .call(ygridGenerator); g.append("g") .attr("class", "axis x-axis") .attr("transform", `translate(0, ${chartheight})`) .call(xaxisGenerator); const yaxis = g.append("g") .attr("class", "axis y-axis") .call(yaxisGenerator); const yaxisTick = yaxis.selectAll(".tick"); yaxisTick.select("text") .attr("x", -margin.left); yield svg.node(); // Compute the y-axis grid lines const x2s = []; yaxisTick .each((_, i, e) => { const sel = d3.select(e[i]); const textWidth = sel.select("text").node().getBoundingClientRect().width; const x2 = -margin.left + textWidth + 4 x2s.push(x2); sel.select("line") .attr("x2", Math.min(0, x2)) }); ygrid.selectAll(".tick line") .attr("x2", (_, i, e) => { const sel = d3.select(e[i]); const x2Curr = +sel.attr("x2"); const x2 = x2s[i]; return x2Curr + (x2 > 0 ? x2 : 0); }); g.selectAll(".line") .data(byYearAndMonth) .join("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", d => d[0].year === 2023 ? "black" : c(d[0].year)) .attr("stroke-linejoin", "round") .style("stroke-width", d => `${d[0].year === 2023 ? show2023 ? 2 : 0 : 0.4}px`); return svg.node(); }32:[{"id":"b47d71f708541e03626d546b781e7e24339e2e7f1fa40e60b6dd6955c3a27def12c67b9933a3613d1de31b1e04adef4ef950438b074f6000f8985b12de15eb7d","href":"https://static.observableusercontent.com/files/b47d71f708541e03626d546b781e7e24339e2e7f1fa40e60b6dd6955c3a27def12c67b9933a3613d1de31b1e04adef4ef950438b074f6000f8985b12de15eb7d","name":"oisst2@1.1_world2_sst_day.json","type":"application/json","lastModified":1704204838429.19,"size":101958}] 2f:{"title":"Global sea surface temperature, monthly averages","cells":[{"id":0,"value":"# Global sea surface temperature, monthly averages\n\nA version of this chart appeared in the story “[Can you draw 2023’s record heat? Try this game.](https://www.washingtonpost.com/climate-environment/interactive/2024/global-heat-sea-surface-temperature-records/)”, published in The Washington Post on January 3, 2024.\n\nThe data in this chart is [compiled regularly by Climate Reanalyzer](https://climatereanalyzer.org/clim/sst_daily/) via the U.S. National Oceanographic and Atmospheric Administration’s [OISST version 2.1](https://www.ncei.noaa.gov/products/optimum-interpolation-sst).","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"viewof show2023 = Inputs.toggle({ label: \"Show 2023:\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"header()","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"chart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"toc({ selector: \"h2\", heading: \"Jump to code:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"md`## Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"header = () => {\n const div = d3.create(\"div\");\n div.append(\"div\")\n .style(\"font-family\", franklinLight)\n .style(\"font-weight\", \"bold\")\n .text(\"Global air temperature, monthly averages\");\n \n div.append(\"div\")\n .style(\"font-family\", franklinLight)\n .html(`Each line represents one year from 1982 to 2022${show2023 ? \" and 2023\" : \"\"}`);\n \n return div.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"css = `\n.grid .domain {\n display: none;\n }\n\n.grid .tick line {\n stroke: #e9e9e9;\n stroke-width: 0.5px;\n}\n\n.grid .tick text {\n display: none;\n }\n\n.axis .domain {\n stroke: #e9e9e9;\n stroke-width: 0.5px;\n}\n\n.axis .tick line {\n stroke: #e9e9e9;\n stroke-width: 0.5px;\n}\n\n.axis .tick text {\n fill: #808080;\n font-family: ${franklinLight};\n font-size: 14px;\n}\n\n.axis.y-axis .tick text {\n text-anchor: start;\n}\n\n.line {\n fill: none;\n pointer-events: none;\n stroke-width: 0.5px;\n}\n\n.line-drawn {\n fill: none;\n stroke: black;\n stroke-width: 3px;\n}\n\n.line-answer {\n fill: none;\n pointer-events: none;\n stroke: #1863a8;\n stroke-width: 3px;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"colors = [\"#acc5e8\", \"#c32755\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"interpolator = interpolatePalette(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"c = d3.scaleSequential()\n .domain([data[0].year, 2022])\n .interpolator(interpolator)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`## Generators`","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"line = d3.line()\n .x((d) => x(d.mm))\n .y(d => y(d[variable]))\n .defined(d => d[variable])","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"xaxisGenerator = d3.axisBottom(x)\n .tickSize(10)\n .tickSizeOuter(0)\n .tickValues(mms.filter(d => width <= 480 ? (d - 1) % 3 === 0 : width <= 640 ? (d - 1) % 2 === 0 : d))\n .tickFormat((d, i) => monthsAbbr[i])","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"xgridGenerator = d3.axisBottom(x)\n .tickSize(chartheight)\n .tickValues(mms)","pinned":true,"hidden":false,"mode":"ojs"},{"id":677,"value":"yaxisGenerator = d3.axisLeft(y)\n .tickFormat((d, i, e) => `${d}${i === e.length - 1 ? \"°F\" : \"\"}`)\n .tickSize(0)\n .tickValues(d3.range(y_domain[0], y_domain[1] + y_interval, y_interval));","pinned":true,"hidden":false,"mode":"ojs"},{"id":682,"value":"ygridGenerator = d3.axisLeft(y)\n .tickSize(chartwidth)\n .tickValues(yaxisGenerator.tickValues())","pinned":true,"hidden":false,"mode":"ojs"},{"id":711,"value":"mms = d3.range(1, 13).map(pad)","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"x = d3.scalePoint(mms, [0, chartwidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"y = d3.scaleLinear(y_domain, [chartheight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":692,"value":"x_tick_subtract = (d, i, e) => i < 1 ? 9 : 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"y_domain = [67, 70.5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"y_interval = 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"monthsAbbr = [\"Jan.\", \"Feb.\", \"March\", \"April\", \"May\", \"June\", \"July\", \"Aug.\", \"Sept.\", \"Oct.\", \"Nov.\", \"Dec.\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`## Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"margin = ({ left: 40, right: 14, top: 6, bottom: 26 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"chartwidth = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"chartheight = Math.max(280, Math.min(600, width * 9 / 16)) - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"md`## Data\n\nFormatted as an array of arrays, where each array represents a year. Within each year array, each day is represented as an object with the properties:\n~~~js\n{\n year: Number, // e.g. 1980\n ${variable}: Number, // Global average sea surface temperature in Fahrenheit, e.g. 12.341\n mm: String // e.g. \"01\"\n}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"variable = \"sst_f\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"rawdata = FileAttachment(\"oisst2@1.1_world2_sst_day.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"byYearAndMonth = rawdata\n .filter(({name}) => name.length === 4 && +name > 1981)\n .map(({name, data}) => {\n // Need to calculate a date from an index, 0-364/365 depending on leap years\n const year = +name;\n\n const entries = data\n .filter((sst) => !!sst)\n .map((sst, index) => {\n const date = getDate(year, index);\n const dd = pad(date.getUTCDate());\n const mm = pad(date.getUTCMonth() + 1);\n const yyyy = date.getUTCFullYear();\n return {\n sst,\n year,\n mm,\n datestring: `${yyyy}-${mm}-${dd}`\n }\n });\n\n return d3\n .groups(entries, d => d.mm)\n .map(([mm, D]) => {\n return {\n year,\n mm,\n sst_f: convertTemp(d3.mean(D, d => d.sst))\n }\n })\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"// Flat data used for scales\ndata = byYearAndMonth.flat()","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":"latest = {\n const last = rawdata[rawdata.length - 4];\n let index = 0;\n for (let i = 0, l = last.data.length; i < l; i++){\n const v = last.data[i];\n if (!v) {\n index = i - 1;\n break;\n }\n }\n const d = getDate(last.name, index);\n return d\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"pad = n => n < 10 ? `0${n}` : `${n}`;","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"function getDate(year, index){\n const isLeapYear = year % 4 === 0;\n const maxDayIndex = isLeapYear ? 365 : 364;\n const dayMs = 1000 * 60 * 60 * 24;\n const yearMsFn = days => dayMs * days;\n const yearMs = yearMsFn(isLeapYear ? 366 : 365);\n const yearStartMs = new Date(`${year}-01-01`).getTime();\n const scale = d3.scaleLinear()\n .domain([0, maxDayIndex])\n .range([yearStartMs, yearStartMs + yearMs - dayMs]);\n const date = new Date(Math.round(scale(index)));\n const yyyy = date.getUTCFullYear();\n const mm = pad(date.getUTCMonth() + 1);\n const dd = pad(date.getUTCDate());\n \n return new Date(`${yyyy}-${mm}-${dd}`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import { interpolatePalette } from \"@harrystevens/roll-your-own-color-palette-interpolator@325\";","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"import { franklinLight } from \"@climatelab/fonts@44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"import {toc} from \"@climatelab/toc@44\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":780,"value":"import { convertTemp } from \"@climatelab/temperature-converter@117\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}