2b:null 2c:["$","title",null,{"children":"Record Daily Global Average Temperatures | Shad Frigui | Observable"}] 31:T100e,viz = { const recTempsColor = "#e04926"; const allDatesColor = "#e8e8e8"; const weekDays = { Sunday: [0, 1, 2, 3, 4, 5, 6], Monday: [1, 2, 3, 4, 5, 6, 0] }; const weekNum = (d) => weekStart === "Sunday" ? d3.utcWeek.count(d3.utcYear(d), d) : d3.utcMonday.count(d3.utcYear(d), d); const plot = Plot.plot({ // Dimensions width: svgWidth, height: svgHeight, marginTop: 36, marginRight: 5, marginBottom: 0, marginLeft: 25, // Scales fx: { domain: fxDomain }, x: { // Use -1 to create space for month labels domain: [-1, ...weekDays[weekStart]] }, y: { domain: d3.range(54) }, // Other top-level options axis: null, style: { background: bgColor, fontFamily: franklinLight, overflow: "visible" }, // Marks marks: [ // Cell marks for all dates Plot.cell( allDates, calendarV({ fill: allDatesColor, inset: 0 }) ), // Cell marks for record temperatures Plot.cell( recordTemps, calendarV({ date: "date", fill: recTempsColor, inset: 0, // Highlight latest date stroke: (d) => (+d.date === +end ? "#000" : "none"), title: (d) => `${d3.utcFormat("%B %-d")(d.date)}\n${d.temp}°C`, tip: { fillOpacity: 0.85, stroke: "none", textAnchor: "middle", fontSize: 14, lineHeight: 1.2, textPadding: 5 } }) ), // Line mark to delineate adjacent months new MonthLineV( d3.utcMonths(start, end), calendarV({ stroke: bgColor, strokeWidth: 2.5 }) ), // X-axis Plot.axisX({ anchor: "top", ticks: weekDays[weekStart], tickSize: 0, tickFormat: (d) => weekDays[weekStart].filter((_, i) => i % 2 === 0).includes(d) ? Plot.formatWeekday("en-US", "narrow")(d) : "", fontSize: 13, fill: "#333", tickPadding: -1 }), // Year labels Plot.axisFx({ axis: "top", tickFormat: "d", fontSize: 17, fill: "#000", dx: 3, dy: -10 }), // Another way to add year labels // Plot.text( // d3.utcYears(start, end), // calendarV({ // text: d3.utcFormat("%Y"), // y: 0, // x: 4, // fontSize: 17, // fill: "#000", // dy: -35 // }) // ), // Month labels Plot.text( weekStart === "Sunday" ? d3.utcMonths(start, end).map(d3.utcSunday.ceil) : d3.utcMonths(start, end).map(d3.utcMonday.ceil), calendarV({ filter: (d) => d.getUTCFullYear() === 2015, text: d3.utcFormat("%b"), frameAnchor: "top", textAnchor: "start", fontSize: 14, fill: "#333", x: -1, dx: -29, dy: 2 }) ), // Annotation Plot.link( [end], calendarV({ facetAnchor: "right", x1: (d) => d.getUTCDay(), x2: (d) => d.getUTCDay(), y1: weekNum, y2: (d) => weekNum(d) + 2, dy: 2.5 }) ), Plot.text( [end], calendarV({ facetAnchor: "right", text: d3.utcFormat("%B %-d"), frameAnchor: "top", // Unfortunately, textAnchor, dx, and dy are not channels. // We'll need to manually tweak the text position when we update the data. textAnchor: "middle", fontSize: 16, fill: "#000", dx: -5, dy: 25 }) ) // Highlight 2024 // Plot.frame({ // fx: [2024], // stroke: recTempsColor, // strokeWidth: 0.3, // insetTop: -35, // insetRight: -2, // insetBottom: 7, // insetLeft: 5 // }) ] }); return plot; }32:T4e0,// Made minor adjustments to tweak the X position and remove the stroke on the top of January. // These changes are useful when using a frame fill-color to highlight the year 2024, for example. class MonthLineV extends Plot.Mark { static defaults = { stroke: "currentColor", strokeWidth: 1, strokeOpacity: 1 }; constructor(data, options = {}) { const { x, y } = options; super( data, { x: { value: x, scale: "x" }, y: { value: y, scale: "y" } }, options, MonthLineV.defaults ); } render(index, { x, y }, { x: X, y: Y }, dimensions) { const { marginLeft, marginRight, width } = dimensions; const dx = x.bandwidth(), dy = y.bandwidth(); return htl.svg` this.data[i].getUTCMonth() === 0 ? `` // don't draw stroke on the top of January : `${ X[i] > marginLeft + dx * 1.65 // is the first day a Sunday? ? `M${marginLeft + dx * 1.65},${Y[i] + dy}H${X[i]}v${-dy}` : `M${marginLeft + dx * 1.65},${Y[i]}` }H${width - 1.8 * marginRight}` ).join("")}>`; } }33:[{"id":"69b04b1f24249c6fc834297b1de7049063da14f51d5a4672ffce9f81a50350c12d9edf0c3936de73f565e1916719d4071932b55db1e0adf153c4b3efae9d3f32","href":"https://static.observableusercontent.com/files/69b04b1f24249c6fc834297b1de7049063da14f51d5a4672ffce9f81a50350c12d9edf0c3936de73f565e1916719d4071932b55db1e0adf153c4b3efae9d3f32","name":"record-daily-global-avg-temps.png","type":"image/png","lastModified":1717689986904.391,"size":226277}] 2f:{"id":"614108f15acb4d5d","slug":"record-global-surface-air-temperatures","title":"Record Daily Global Average Temperatures","thumbnail":"f2c54a9e7256715ccc8a04801a49398904813a20e514aa4f3ca4f6cfc57839b2","access_level":"public","create_time":"$D2024-05-29T19:16:37.250Z","update_time":"$D2024-06-06T16:06:25.972Z","view_time":null,"first_public_time":"$D2024-06-04T20:22:28.746Z","fork":true,"stars":12,"starred":false,"owner":{"type":"team","id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui","avatar_url":"https://avatars-next.observableusercontent.com/635800f7fe5494a1bc548666985c01c02a373cb79c71182e874bdc85efcd6913","tier":"starter_2024"},"version":7998,"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":5,"collection":{"id":"0b8b86046f742573","slug":"public","title":"Shad's Graphics","owner":{"id":"b1a1ffcc37499480","login":"shadfriguii","name":"Shad Frigui"}},"type":"notebook","body":{"title":"Record Daily Global Average Temperatures","cells":[{"id":1457,"value":"# Record Daily Global Average Temperatures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3636,"value":"2024 is on track to surpass 2023 as the hottest year ever, with over 100 daily global average temperature records set as of ${lastestDate}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7411,"value":"Plot.legend({\n color: {\n // Trick to use a legend item as a label with a swatch\n domain: [\"Hottest days of the year on record\"],\n range: [\"#e04926\"]\n },\n swatchWidth: 12,\n swatchHeight: 12,\n className: \"viz-header\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6115,"value":"viewof weekStart = Inputs.radio([\"Sunday\", \"Monday\"], {\n label: \"Week starts on:\",\n value: \"Monday\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6282,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7218,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7652,"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":7654,"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":7243,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":7250,"value":"svgWidth = Math.min(width * 1.8, 640)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7458,"value":"svgHeight = width < 550 ? svgWidth / 1.1 : svgWidth / 1.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2448,"value":"bgColor = \"#fff\"","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":6774,"value":"#### Record temperatures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6843,"value":"For details on how the *temps* data was prepared, refer to this [notebook](https://observablehq.com/@shadfriguii/global-surface-air-temperatures).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5820,"value":"recordTemps = temps\n .groupby(\"dayOfYear\")\n .filter((d) => d.temp === op.max(d.temp))\n .orderby(\"dayOfYear\")\n// .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7676,"value":"recordTemps","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5416,"value":"We should have 366 data points, covering each day of the year, including February 29. However, *recordTemps* contains ${recordTemps.numRows()} rows. This suggests that certain days of the year have recorded the same highest temperature in more than one year. Let's investigate this further.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5387,"value":"Number of record temperatures by year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5215,"value":"recordTempsByYear = recordTemps\n .groupby(\"year\")\n .rollup({ count: (d) => op.count() })\n .orderby(aq.desc(\"count\"))\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4882,"value":"recordTemps2024 = recordTemps\n .groupby(\"year\")\n .rollup({ count: (d) => op.count() })\n .filter((d) => d.year === 2024)\n .array(\"count\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5392,"value":"Days of the year that recorded the same highest temperature in more than one year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5200,"value":"recordTempsOnSameDayOfYear = recordTemps\n .derive({\n monthDay: aq.escape((d) => d3.utcFormat(\"%b %-d\")(d.date))\n })\n .groupby(\"dayOfYear\")\n .rollup({\n monthDay: (d) => op.array_agg_distinct(d.monthDay)[0],\n temp: (d) => op.array_agg_distinct(d.temp)[0],\n count: (d) => op.count(),\n years: (d) => op.array_agg_distinct(d.year)\n })\n .filter((d) => d.count > 1)\n .orderby(\"dayOfYear\")\n .view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6846,"value":"We'll show all occurrences on the chart, and we'll add a note in the chart's caption.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7736,"value":"note = \"Four days of the year have recorded the same highest temperature in two different years, and these are charted for both occurrences.\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5444,"value":"#### All dates\nData to draw cells from Jan 1 of the earliest year to the latest date in *recordTemps* (cells with the light gray color on the chart).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4638,"value":"start = d3.utcYear(d3.min(recordTemps, (d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6837,"value":"end = d3.utcDay(d3.max(temps, (d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4646,"value":"allDates = d3.utcDay.range(start, d3.utcDay.offset(end, 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6969,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5430,"value":"#### `fx` scale domain","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4760,"value":"fxDomain = recordTemps.select(\"year\").dedupe().orderby(\"year\").array(\"year\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5463,"value":"#### Custom transforms and marks ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6787,"value":"`calendarV` and `monthlineV` were adapted from from Observable's [Calendar Plot](https://observablehq.com/@observablehq/plot-calendar) and modified to facet on `x` rather than `y`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6191,"value":"// Configured calendarV to support both Sunday and Monday as the first day of the week\nfunction calendarV({ date = Plot.identity, inset = 0.5, ...options } = {}) {\n let D;\n return {\n fx: {\n transform: (data) =>\n (D = Plot.valueof(data, date, Array)).map((d) => d.getUTCFullYear())\n },\n y: {\n transform: () =>\n D.map((d) =>\n weekStart == \"Sunday\"\n ? d3.utcWeek.count(d3.utcYear(d), d)\n : d3.timeMonday.count(d3.utcYear(d), d)\n )\n },\n x: { transform: () => D.map((d) => d.getUTCDay()) },\n inset,\n ...options\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6193,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5461,"value":"#### Latest date for use in the subtitle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5007,"value":"lastestDate = d3.utcFormat(\"%B %-d\")(end)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6924,"value":"#### Data source URL for use in the caption","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6926,"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":7647,"value":"#### Static visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7649,"value":"vizStatic = FileAttachment(\"record-daily-global-avg-temps.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7980,"value":"#### Fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7982,"value":"franklinLight = \"FranklinITCProLight, Arial, Helvetica, sans-serif\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5469,"value":"---\n## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6833,"value":"import { temps } from \"@shadfriguii/global-surface-air-temperatures\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4758,"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"