2b:null 2c:["$","title",null,{"children":"Daily Global Average Temperatures | Shad Frigui | Observable"}] 31:T1bdf,{ // Since we normalized all years to have 366 days, we'll use a leap year // such as 2024 to format days of the year on the x-axis. const tickFormatX = (d) => d3.utcFormat("%b %-d")(d3.utcDay.offset(new Date(2024, 0, d))); // Common properties on the axes and annotations const axisCommon = { tickSize: 10, fontSize: 14, fill: "#333" }; const gridY = { // We'll also use these properties for the ticks' vector lines on the y-axis stroke: "#c0c0c0", strokeOpacity: 0.7, strokeDasharray: "2,2" }; const annotCommon = { fontSize: 16, fontWeight: 700, pointerEvents: "none" }; const hideAnnotCommon = { ...annotCommon, px: "dayOfYear", py: "temp", fill: bgColor, stroke: bgColor, strokeWidth: 5, maxRadius: 5 }; // Highlight line marks on hover const pointerInactive = renderFilter(true); const pointerContext = renderFilter(false); const pointerFocus = renderFilter(false); // I prefer to create a standalone color scale to access the range's values // (e.g., color.range[0]) and avoid the hassle of repeatedly copying hex codes const color = Plot.scale({ color: { type: "categorical", domain: [2023, 2024], range: ["#ffa500", "#e04926"], unknown: "#808080" } }); const plot = Plot.plot({ // Dimensions width: svgWidth, marginTop: 0, marginRight: 10, marginBottom: 30, marginLeft: 30, // Scales y: { domain: [11, 17.5] }, color: color, // Other top-level options axis: null, label: null, style: { background: bgColor, fontFamily: franklinLight, overflow: "visible" }, // Marks marks: [ // X-axis // The textAnchor option is not a channel so we'll use two axisX marks Plot.axisX({ ...axisCommon, // Days of year that correspond to // ['Jan 1', 'Apr 1', 'Jul 1', 'Oct 1'] // and ['Jan 1', 'Mar 1', 'May 1', 'Jul 1', 'Sep 1', 'Nov 1'] ticks: svgWidth < 480 ? [1, 92, 183, 275] : [1, 61, 122, 183, 245, 306], tickFormat: tickFormatX, stroke: "#333" }), // Use different textAnchor for the last tick Plot.axisX({ ...axisCommon, // Day of year that correspond to 'Dec 31' ticks: [366], tickFormat: tickFormatX, stroke: "#333", textAnchor: "end" }), // Y-axis // Y-axis gridlines Plot.gridY({ ...gridY, ticks: d3.range(12, 18) }), // Again, two axisY marks because neither textAnchor nor dx are channels Plot.axisY({ ...axisCommon, ...gridY, ticks: d3.range(12, 17), tickFormat: "d", strokeDashoffset: 2, textAnchor: "end" }), // Use different textAnchor for the last tick Plot.axisY({ ...axisCommon, ...gridY, ticks: [17], tickFormat: (d) => `${d}°C`, textAnchor: "start", textStroke: bgColor, textStrokeWidth: 10, dx: -14 }), // Line marks Plot.line( temps, pointerInactive({ x: "dayOfYear", y: "temp", stroke: "year", strokeWidth: (d) => (d.year === 2024 ? 3.5 : d.year === 2023 ? 2 : 1), strokeOpacity: (d) => ([2023, 2024].includes(d.year) ? 0.7 : 0.08) }) ), Plot.line( temps, pointerContext({ x: "dayOfYear", y: "temp", z: "year", stroke: color.unknown, strokeWidth: 1, strokeOpacity: 0.1 }) ), Plot.line( temps, pointerFocus({ x: "dayOfYear", y: "temp", stroke: "year", strokeWidth: 2 }) ), // Annotations Plot.text(["2024"], { ...annotCommon, x: () => (svgWidth < 380 ? 115 : 135), y: 16.6, fill: color.range[1] }), // Trick to hide the "2024" annotation on hover Plot.text( temps, Plot.pointer({ ...hideAnnotCommon, text: (d) => "2024", x: () => (svgWidth < 380 ? 115 : 135), y: 16.6 }) ), Plot.text(["2023"], { ...annotCommon, x: () => (svgWidth < 380 ? 300 : svgWidth < 480 ? 290 : 285), y: 16.4, fill: color.range[0] }), // Hide the "2023" annotation on hover Plot.text( temps, Plot.pointer({ ...hideAnnotCommon, text: (d) => "2023", x: () => (svgWidth < 380 ? 300 : svgWidth < 480 ? 290 : 285), y: 16.4 }) ), Plot.text(["Years 1940 to 2022"], { ...annotCommon, x: () => (svgWidth < 380 ? 210 : 270), y: 12.4, // Different font weight than other annotations fontWeight: 400 }), // Hide the "Years 1940 to 2022" annotation on hover Plot.text( temps, Plot.pointer({ ...hideAnnotCommon, text: (d) => "Years 1940 to 2022", x: () => (svgWidth < 380 ? 210 : 270), y: 12.4 }) ), // On hover marks // Trick to hide x-axis when hovering Plot.ruleY( temps, Plot.pointer({ px: "dayOfYear", py: "temp", x1: 0, x2: 366, y: 10.8, stroke: bgColor, strokeWidth: 25, inset: -25, maxRadius: 5 }) ), // Rule mark Plot.ruleX( temps, Plot.pointer({ x: "dayOfYear", py: "temp", stroke: "#333", insetTop: 15, insetBottom: -10, maxRadius: 5 }) ), // Dot mark Plot.dot( temps, Plot.pointer({ x: "dayOfYear", y: "temp", fill: "year", stroke: bgColor, r: 4, maxRadius: 5 }) ), // Text on datapoint (tooltip) Plot.text( temps, Plot.pointer({ x: "dayOfYear", y: "temp", fill: "currentColor", text: (d) => `${d.year}\n${d3.format(".1f")(d.temp)}`, fontSize: 16, lineHeight: 1.1, stroke: bgColor, strokeWidth: 5, dy: -30, maxRadius: 5 }) ), // Hovered day on x-axis Plot.text( temps, Plot.pointer({ ...axisCommon, x: "dayOfYear", py: "temp", text: (d) => d3.utcFormat("%b %-d")(d.date), frameAnchor: "bottom", dy: 22, maxRadius: 5 }) ) ] }); plot.addEventListener("input", () => { if (plot.value === null) { pointerInactive.update(true); pointerContext.update(false); pointerFocus.update(false); } else { const year = plot.value.year; pointerInactive.update(false); pointerContext.update((d) => d.year !== year); pointerFocus.update((d) => d.year === year); } }); return plot; }32:T544,// Adapted from https://observablehq.com/@observablehq/filtering-several-charts-1871 function renderFilter(initialTest = true) { const updates = new Array(); // 🌶🌶 support sharing across charts; needs invalidation // see https://observablehq.com/@observablehq/plot-brush-crossfilter-1653#analyzer for a technique return Object.assign( function apply(options) { return { ...options, render(index, scales, values, dimensions, context, next) { const data = tempsObj; //const { data } = values; const filter = (test) => typeof test === "function" ? index.filter((i) => test(data[i], i, data)) : test ? index : []; let g = next( filter(initialTest), scales, values, dimensions, context ); updates.push((test) => { const transform = g.getAttribute("transform"); g.replaceWith( (g = next(filter(test), scales, values, dimensions, context)) ); g.setAttribute("transform", transform); // facet translate }); return g; } }; }, { update(test) { return updates.map((update) => update?.(test)); } } ); }33:[{"id":"afde03dbbc131fad1049c8420c5ec665512d3dfed47eb879169dd7908ff5f626ba204cca71f8bdbf55a5eb1d6335d6e2d5032fa3b87c0bc83fd3c3766ddd608e","href":"https://static.observableusercontent.com/files/afde03dbbc131fad1049c8420c5ec665512d3dfed47eb879169dd7908ff5f626ba204cca71f8bdbf55a5eb1d6335d6e2d5032fa3b87c0bc83fd3c3766ddd608e","name":"daily-global-avg-temps.png","type":"image/png","lastModified":1717689880796.662,"size":419762},{"id":"09c209b46671bdd581a5f21584253657bb3785664cc46e04b40d75f46845caa5a439b21a82e2bd24ef9e9b6ae60f49046644515b772d12d6d6bbb67165a25cba","href":"https://static.observableusercontent.com/files/09c209b46671bdd581a5f21584253657bb3785664cc46e04b40d75f46845caa5a439b21a82e2bd24ef9e9b6ae60f49046644515b772d12d6d6bbb67165a25cba","name":"era5_daily_series_2t_global@1.csv","type":"text/csv","lastModified":1717441800647.893,"size":1073615}] 2f:{"id":"6c9fe09a8fe9fd7d","slug":"global-surface-air-temperatures","title":"Daily Global Average Temperatures","thumbnail":"462e30278738081c45e0a17a1e2b2b1da3b9202c4541af40df2b2242689ed90f","access_level":"public","create_time":"$D2024-05-25T00:58:34.055Z","update_time":"$D2024-06-06T16:04:38.980Z","view_time":null,"first_public_time":"$D2024-06-04T20:14:30.864Z","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":6162,"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":"Daily Global Average Temperatures","cells":[{"id":1457,"value":"# Daily Global Average Temperatures","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5362,"value":"2024 is on track to surpass 2023 as the hottest year on record, with over 100 daily global average temperature records set as of ${lastestDate}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5331,"value":"

Daily global average temperatures

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":5610,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5393,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5554,"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":5533,"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":1093,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":5192,"value":"svgWidth = Math.min(width, 640)","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":5897,"value":"data = aq.fromCSV(\n await FileAttachment(\"era5_daily_series_2t_global@1.csv\").text(),\n // Skip comment lines\n {\n comment: \"#\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4668,"value":"Rows to add for February 29 (day of year 60) in non-leap years to ensure all years have the same number of days — 366.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4670,"value":"rows29NonLeap = aq\n .table({\n year: d3.range(1940, 2025),\n date: [],\n dayOfYear: Array(d3.range(1940, 2025).length).fill(60),\n temp: []\n })\n .filter(aq.escape((d) => !leapYear(d.year)))\n// .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4672,"value":"Function to check if a given year is a leap year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4674,"value":"leapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4680,"value":"temps = data\n .filter((d) => d.status === \"FINAL\")\n .derive({\n year: (d) => op.utcyear(d.date),\n // Offset day of year 60 and above in non-leap years\n dayOfYear: aq.escape((d) => {\n let isLeapYear = leapYear(op.utcyear(d.date));\n let doy = op.utcdayofyear(d.date);\n return !isLeapYear && doy > 59 ? doy + 1 : doy;\n })\n })\n // Add rows for day 60 in non-leap years\n .concat(aq.from(rows29NonLeap))\n .select(\"date\", \"year\", \"dayOfYear\", { \"2t\": \"temp\" })\n .orderby(\"year\", \"dayOfYear\")\n// .view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5921,"value":"temps","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4682,"value":"Check if 2024 has the correct number of days, and all other years have 366 days each.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4689,"value":"daysByYear = temps.groupby(\"year\").rollup({ count: op.count() }).view()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4684,"value":"end = d3.utcDay(d3.max(temps, (d) => d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4686,"value":"md`Correct number of days in 2024: ${d3.utcDay.count(\n d3.utcYear(end),\n d3.utcDay.offset(end)\n)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5062,"value":"---\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5699,"value":"#### `renderFilter` transform to highlight lines on hover","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5612,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6024,"value":"// Convert Arquero table temps to an array of objects for use in `renderFilter`\ntempsObj = temps.objects()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4712,"value":"#### Latest date for use in the subtitle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4715,"value":"lastestDate = d3.utcFormat(\"%B %-d\")(end)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6139,"value":"#### N° record temperatures in 2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6135,"value":"recordTemps2024[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4862,"value":"#### Data source URL 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":5701,"value":"#### Static visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6036,"value":"vizStatic = FileAttachment(\"daily-global-avg-temps.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6147,"value":"#### Fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6149,"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"},{"id":6132,"value":"import { recordTemps2024 } from \"@shadfriguii/record-global-surface-air-temperatures\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"