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":"4343aa60fb6ef5eb12ab296d7632e432349324e7fb74b524473201c1fc963c6a229ae8beff140b8dbe5e9972cfa00661d70dd988ef95a94adeab4b86a792b0f1","href":"https://static.observableusercontent.com/files/4343aa60fb6ef5eb12ab296d7632e432349324e7fb74b524473201c1fc963c6a229ae8beff140b8dbe5e9972cfa00661d70dd988ef95a94adeab4b86a792b0f1","name":"Sea_Ice_Index_Monthly_Data_by_Year_G02135_v3@2.0.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1704214443247.013,"size":25046}] 2f:{"title":"Arctic sea ice extent, monthly averages","cells":[{"id":0,"value":"# Arctic sea ice extent, 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 from [the National Snow and Ice Data Center and NOAA](https://noaadata.apps.nsidc.org/NOAA/G02135/seaice_analysis/).","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(\"Sea ice extent in the northern hemisphere, 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 = [\"#881b79\", \"#9fcbd3\"]","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 ? \" million square miles\" : \"\"}`)\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 < 2 ? 9 : 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":673,"value":"y_domain = [0, 8]","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"y_interval = 1","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, // Arctic sea ice in square miles, e.g. 12.341\n mm: String // e.g. \"01\"\n}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"variable = \"seaice_n_mi\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"// Load the monthly sea ice data\nxlsx = FileAttachment(\"Sea_Ice_Index_Monthly_Data_by_Year_G02135_v3@2.0.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"sheet = xlsx.sheet(\"NH-Extent\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"monthsHeader = {\n const row = sheet[0];\n return Object.keys(row)\n .map(col => ({\n col,\n month: row[col]\n }))\n .filter(({month}) => month !== \"Annual\")\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"// Group the data by year and month\nbyYearAndMonth = {\n const data = sheet\n .filter((d, i) => i > 0) // ignore months header\n .map(d => {\n const year = d.A;\n return monthsHeader\n .map(({col}, index) => {\n const o = {\n year,\n mm: pad(index + 1)\n };\n o[variable] = d[col] * 0.386102; // convert square kilometers to square miles\n return o;\n });\n })\n .filter(d => d[0].year >= 1982)\n\n return data;\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":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":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"}],"files":"$W32","stdlib":"1","titling":"auto"}