2b:null 2c:["$","title",null,{"children":"Monthly Global Average Temperatures | Shad Frigui | Observable"}] 31:T14cf,viz = { const axisCommon = { tickSize: 0, fontSize: 14, fill: "#333" }; const annotCommon = { fontSize: 16, fill: "#000", stroke: bgColor, strokeWidth: 9, lineHeight: 1.1 }; const dodgeCommon = { anchor: "middle", x: "meanTemp", padding: -2 }; const formatShort = (d) => `${Plot.formatMonth()(d)}${d === 4 ? "" : "."}`; const formatLong = Plot.formatMonth("en-US", "long"); const isShowAll = selectedDecade === "Show all"; const plot = Plot.plot({ // Dimensions width: svgWidth, height: 550, marginTop: 0, marginRight: 30, marginBottom: 30, marginLeft: 10, // Scales x: { insetLeft: 30 }, fy: { domain: [5, 6, 7, 8, 9, 10, 11, 0, 1, 2, 3, 4] }, color: { scheme: "YlOrRd", range: [0.2, 1] }, // Other top-level options facet: { data: monthlyMeanTemps, y: "month" }, axis: null, label: null, style: { background: bgColor, fontFamily: franklinLight, overflow: "visible" }, // Marks marks: [ // X-axis Plot.axisX({ ...axisCommon, ticks: d3.range(12, 18), tickFormat: (x, i, ticks) => (i === ticks.length - 1 ? `${x}°C` : x) }), Plot.gridX({ ticks: d3.range(12, 18), stroke: "#e8e8e8", strokeOpacity: 0.7, shapeRendering: "crispEdges", inset: -2.5 }), // Facet fy-axis Plot.axisFy({ ...axisCommon, anchor: "left", tickFormat: (y) => formatShort(y), textAnchor: "start" }), // Dot marks Plot.dot( monthlyMeanTemps, Plot.dodgeY({ ...dodgeCommon, r: dotR, fill: "decade", fillOpacity: (d) => isShowAll || selectedDecade === d.decade ? 0.8 : 0.1, stroke: (d) => isShowAll ? bgColor : selectedDecade === d.decade ? "#000" : "none", strokeWidth: 0.5 }) ), // Highlight dot marks for the most recent 12 months Plot.dot( monthlyMeanTemps, Plot.dodgeY( Plot.selectLast({ ...dodgeCommon, r: dotR * 2, stroke: "#000", strokeWidth: 1, strokeOpacity: 1, strokeDasharray: "1.5,1.3" }) ) ), // Annotations // Visible only if "Show all" is selected isShowAll ? Plot.text( [ "Each dot is one year's monthly average; the most recent 12 months are highlighted." ], { ...annotCommon, facetAnchor: "top", frameAnchor: "left", textAnchor: "start", lineAnchor: "top", lineWidth: annotLineWidth, dx: annotXNudge, dy: -10 } ) : null, isShowAll ? Plot.link(monthlyMeanTemps, { fy: [5], x1: 14.6, x2: 15.1, y1: 0, y2: 0, dy: -2, stroke: (d) => (svgWidth >= 620 ? "#000" : "none"), strokeWidth: 1, shapeRendering: "crispEdges" }) : null, // Month annotations (June, December, January, and May) isShowAll ? Plot.text( monthlyMeanTemps, Plot.dodgeY( Plot.selectLast({ ...dodgeCommon, ...annotCommon, filter: (d) => [5, 11, 0, 4].includes(d.month), text: (d) => ` ${formatLong(d.month)} ${ d.month === 5 ? `\n${d.year}` : d.year }`, textAnchor: "start", dx: 10 }) ) ) : null, // Apply hover effect when hovering over dots Plot.dot( monthlyMeanTemps, Plot.pointer( Plot.dodgeY({ ...dodgeCommon, r: dotR, fill: bgColor, stroke: "#000" }) ) ), // Hide month annotations when hovering over or near their respective dots // because a tooltip will be shown on hover isShowAll ? Plot.text( monthlyMeanTemps, Plot.pointer( Plot.dodgeY( Plot.selectLast({ ...dodgeCommon, ...annotCommon, filter: (d) => [5, 11, 0, 4].includes(d.month), text: (d) => ` ${formatLong(d.month)} ${ d.month === 5 ? `\n${d.year}` : d.year }`, fill: bgColor, textAnchor: "start", dx: 10, maxRadius: 75 }) ) ) ) : null, // Text mark as tooltip Plot.text( monthlyMeanTemps, Plot.pointer( Plot.dodgeY({ ...dodgeCommon, ...annotCommon, text: (d) => `${formatShort(d.month)} ${d.year}\n ${d.meanTemp.toFixed(2)}°C`, fontSize: 15, strokeWidth: 5, dy: -25 }) ) ) ] }); return plot; }32:T439,33:[{"id":"09c209b46671bdd581a5f21584253657bb3785664cc46e04b40d75f46845caa5a439b21a82e2bd24ef9e9b6ae60f49046644515b772d12d6d6bbb67165a25cba","href":"https://static.observableusercontent.com/files/09c209b46671bdd581a5f21584253657bb3785664cc46e04b40d75f46845caa5a439b21a82e2bd24ef9e9b6ae60f49046644515b772d12d6d6bbb67165a25cba","name":"era5_daily_series_2t_global@4.csv","type":"text/csv","lastModified":1718123833150.278,"size":1073615},{"id":"714ef4a0314260c62a429583f76ed297ff14b25853f59cd0afbcadc878d127f2872637011d7ab5a347733738b3fc0fcdee56979aaeb308f6b33926d6d2010277","href":"https://static.observableusercontent.com/files/714ef4a0314260c62a429583f76ed297ff14b25853f59cd0afbcadc878d127f2872637011d7ab5a347733738b3fc0fcdee56979aaeb308f6b33926d6d2010277","name":"monthly-global-avg-temps@1.png","type":"image/png","lastModified":1718212898522.311,"size":381164}] 2f:{"id":"d26745725df83e0f","slug":"monthly-global-average-temperatures","title":"Monthly Global Average Temperatures","thumbnail":"9356796936f45f0751e119528dc4831cbcc30046c3158c6ce45fcb42a60e7280","access_level":"public","create_time":"$D2024-06-11T16:37:13.150Z","update_time":"$D2024-06-12T19:48:39.725Z","view_time":null,"first_public_time":"$D2024-06-12T19:50:45.009Z","fork":true,"stars":28,"starred":false,"owner":{"type":"team","id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/635800f7fe5494a1bc548666985c01c02a373cb79c71182e874bdc85efcd6913","tier":"starter_2024"},"version":8708,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afc1efddfa830eb6","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/ff30c5d300e0b2c956a89730e2aa88e5629872a07345a7bd4bb437c3c8bf55c6","tier":null}],"members":[{"type":"individual","id":"afc1efddfa830eb6","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/ff30c5d300e0b2c956a89730e2aa88e5629872a07345a7bd4bb437c3c8bf55c6","tier":null,"role":"editor"},{"type":"team","id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/635800f7fe5494a1bc548666985c01c02a373cb79c71182e874bdc85efcd6913","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"0b8b86046f742573","slug":"public","title":"Shad's Graphics","owner":{"id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui"}},"type":"notebook","body":{"title":"Monthly Global Average Temperatures","cells":[{"id":1457,"value":"# Monthly Global Average Temperatures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4701,"value":"Global temperatures have been smashing records for 12 months in a row. Every month from June 2023 to May 2024 has been the hottest on record.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6996,"value":"

Monthly global average temperatures by year, 1940–2024

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":8109,"value":"Plot.legend({\n color: {\n domain: clrScaleDn,\n scheme: \"YlOrRd\",\n range: [0.2, 1]\n },\n tickFormat: (d, i) => (i % 2 === 0 ? d : \"\"),\n swatchSize: 10,\n opacity: 0.8,\n className: \"viz-legend\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7870,"value":"// This wouldn't be necessary if Plot had built-in support for interactive legends\nviewof selectedDecade = Inputs.select([\"Show all\", ...clrScaleDn], {\n label: \"Select decade to highlight\",\n value: \"Show all\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4257,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6957,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":8603,"value":"This visualization would be improved with a more compact layout (see [here](https://github.com/observablehq/plot/issues/1543)) and built-in support for interactive legends (vote [here](https://github.com/observablehq/plot/issues/1184)).\n\nInspired by Jana Tauschinski's [graphic](https://twitter.com/janatausch/status/1798620656525000763).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7157,"value":"---\n## Static visualization for social media publishing\nThis was fully created in a single notebook's cell leveraging Plot's `title`, `subtitle`, and `caption` properties. I tried to match the New York Times' style.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7159,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3651,"value":"---\n## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6968,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":6971,"value":"svgWidth = Math.min(width, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6981,"value":"bgColor = \"#fff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8494,"value":"dotR = svgWidth < 480 ? 2.4 : svgWidth < 530 ? 2.7 : 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8530,"value":"annotXNudge = svgWidth / (svgWidth < 480 ? 6 : svgWidth < 530 ? 5.5 : 4.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8444,"value":"annotLineWidth = svgWidth < 340 ? 7 : svgWidth < 440 ? 12 : 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"---\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5336,"value":"data = aq.fromCSV(\n await FileAttachment(\"era5_daily_series_2t_global@4.csv\").text(),\n // Skip comment lines\n {\n comment: \"#\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4680,"value":"monthlyMeanTemps = data\n .filter((d) => d.status === \"FINAL\")\n .select(\"date\", { \"2t\": \"temp\" })\n .derive({\n year: (d) => op.utcyear(d.date),\n month: (d) => op.utcmonth(d.date)\n })\n .groupby(\"month\", \"year\")\n .rollup({ meanTemp: (d) => op.mean(d.temp) })\n .derive({\n decade: (d) => op.floor(d.year / 10) * 10 + \"s\"\n })\n .orderby(\"year\", \"month\")\n// .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5342,"value":"monthlyMeanTemps","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5062,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8243,"value":"#### `color` scale domain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7298,"value":"clrScaleDn = monthlyMeanTemps.select(\"decade\").dedupe().array(\"decade\")\n// or\n// Array.from(new Set(monthlyMeanTemps.column(\"decade\")))\n// Array.from(new Set(monthlyMeanTemps.objects().map((d) => d.decade)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4862,"value":"#### Data source link for use in the caption","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4864,"value":"href = \"https://sites.ecmwf.int/data/climatepulse/data/series/era5_daily_series_2t_global.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7152,"value":"#### Static visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7150,"value":"vizStatic = FileAttachment(\"monthly-global-avg-temps@1.png\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7025,"value":"#### Fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7023,"value":"franklinLight = \"FranklinITCProLight, Arial, Helvetica, sans-serif\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4708,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4640,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"