2f:T184e,plot = { newSvg; return toggle ? Plot.plot({ marginLeft: margin.left, marginBottom: margin.bottom, marginTop: margin.top, height: 600, width: width, y: { label: `Difference in °C from mean ${range.value[0]} - ${range.value[1]}`, grid: true, ticks: 5, nice: true }, x: { ticks: 3, axis: "bottom", label: "Day of the year", labelOffset: 45, ticks: width < 480 ? [1, 92, 183, 275] : [1, 61, 122, 183, 245, 306], tickFormat: tickFormatX, domain: [xmin, xmax], labelAnchor: "right" }, color: { legend: true }, style: { fontSize: "20px" }, marks: [ Plot.line(changes, { x: "day", y: "diff", z: "year", stroke: (d) => d.year == "2023" ? "red" : d.year == "2024" ? "yellow" : d.year >= range.value[0] && d.year <= range.value[1] ? "orange" : "grey", strokeWidth: (d) => d.year == "2023" ? 2.5 : d.year == "2024" ? 2.5 : 1, opacity: 0.7 }), Plot.tip(changes.slice(-1), { x: "day", y: "diff", title: (d) => [ d.date.toLocaleDateString("en-us", { weekday: "long", year: "numeric", month: "short", day: "numeric" }), `${d.diff.toPrecision(3)}°C from mean ${range.value[0]} - ${ range.value[1] }` ].join("\n\n"), opacity: 0.7 //anchor: "left" }), Plot.tip( changes, Plot.pointer({ x: "day", y: "diff", z: "year", title: (d) => [ d.date.toLocaleDateString("en-us", { weekday: "long", year: "numeric", month: "short", day: "numeric" }), `${d.diff.toPrecision(3)}°C from mean ${range.value[0]} - ${ range.value[1] }` ].join("\n\n"), opacity: 0.7 }) ), Plot.ruleY([0]) ] }) : Plot.plot({ marginLeft: margin.left, marginBottom: margin.bottom, marginTop: margin.top, height: 600, width: width, color: { legend: true, scheme: "RdYlBu" }, y: { label: `Daily average temp in °C`, grid: true, ticks: 5, domain: [11, 18], nice: true }, x: { ticks: 3, axis: "bottom", label: "Day of the year", labelOffset: 45, ticks: width < 480 ? [1, 92, 183, 275] : [1, 61, 122, 183, 245, 306], tickFormat: tickFormatX, domain: [xmin, xmax], labelAnchor: "right" }, //color: { legend: true }, style: { fontSize: "20px" }, marks: [ Plot.differenceY(changes_2024, { x: "day", y1: "temp", y2: "max", //curve: "", positiveFill: () => "Max. of 1940-2022", negativeFill: () => "2024", tip: false }), Plot.differenceY(changes_2023, { x: "day", y1: "temp", y2: "max", //curve: "", positiveFill: () => "Max. of 1940-2022", negativeFill: () => "2023", tip: false }), Plot.line(changes, { x: "day", y: "temp", z: "year", stroke: (d) => d.year == "2023" ? "red" : d.year == "2024" ? "yellow" : d.year >= range.value[0] && d.year <= range.value[1] ? "orange" : "grey", strokeWidth: (d) => d.year == "2023" ? 2.5 : d.year == "2024" ? 2.5 : 1, opacity: 0.7 }), Plot.line(changes, { x: "day", y: "avg", z: "year" //stroke: (d) => //d.year == "2023" ? "red" : d.year == "2016" ? "blue" : "grey", //strokeWidth: (d) => //d.year == "2023" ? 2.5 : d.year == "2016" ? 2.5 : 1, //opaity: 0.5 }), Plot.line(changes, { x: "day", y: "max", z: "year", stroke: "steelblue" //stroke: (d) => //d.year == "2023" ? "red" : d.year == "2016" ? "blue" : "grey", //strokeWidth: (d) => //d.year == "2023" ? 2.5 : d.year == "2016" ? 2.5 : 1, //opaity: 0.5 }), Plot.tip(changes.slice(-1), { x: "day", y: "temp", title: (d) => [ d.date.toLocaleDateString("en-us", { weekday: "long", year: "numeric", month: "short", day: "numeric" }), `Average temperature ${d.temp.toPrecision(5)}°C` ].join("\n\n"), opacity: 0.7 //anchor: "bottom-left" }), Plot.tip( changes, Plot.pointer({ x: "day", y: "temp", z: "year", title: (d) => [ d.date.toLocaleDateString("en-us", { weekday: "long", year: "numeric", month: "short", day: "numeric" }), `Average temperature ${d.temp.toPrecision(5)}°C` ].join("\n\n"), opacity: 0.7 }) ) //Plot.ruleY([16.797], { stroke: "brown", strokeDasharray: [3, 2] }) ] }); }30:T5c6,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const brush = d3 .brushX() .extent([ [margin.left, margin.top], [width - margin.right, height - margin.bottom] ]) .on("start brush end", brushed); const circle = svg .append("g") .attr("fill-opacity", 0.2) .selectAll("circle") .data(pts) .join("circle") .attr("transform", (d) => `translate(${x(d)},${ry})`) .attr("r", 3.5); svg.append("g").call(xAxis); svg .append("g") .call(brush) .call(brush.move, [d3.min(pts) - 0.05, d3.max(pts) + 0.05].map(x)) .call((g) => g .select(".overlay") .datum({ type: "selection" }) .on("mousedown touchstart", beforebrushstarted) ); function beforebrushstarted(event) { const dx = x(365) - x(0); // Use a fixed width when recentering. const [[cx]] = d3.pointers(event); const [x0, x1] = [cx - dx / 2, cx + dx / 2]; const [X0, X1] = x.range(); d3.select(this.parentNode).call( brush.move, x1 > X1 ? [X1 - dx, X1] : x0 < X0 ? [X0, X0 + dx] : [x0, x1] ); } function brushed(event) { const selection = event.selection; if (selection === null) { circle.attr("stroke", null); } else { const [x0, x1] = selection.map(x.invert); mutable xmin = x0; mutable xmax = x1; circle.attr("stroke", (d) => (x0 <= d && d <= x1 ? "red" : null)); } } return svg.node(); }31:[] 2d:{"title":"Global 2m Temperature: 1940-2024","cells":[{"id":26,"value":"title = md`# Global 2m Temperature: 1940-2024`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"viewof list1 = list([viewof toggle, range, viewof newSvg], {\n columns: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":524,"value":"tickFormatX = (d) =>\n d3.utcFormat(\"%b %-d\")(d3.utcDay.offset(new Date(2024, 0, d)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"viewof newSvg = button({ value: \"Submit\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"viewof toggle = Inputs.toggle({\n label: html`View difference from mean?`,\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof range1 = toggle ? range : md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"range = interval([1940, 2023], {\n step: 1,\n value: [1991, 2022],\n color: \"orange\",\n label: \"Mean range\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"Legend(cscale, {\n title: \"Year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"mutable xmin = d3.min(pts)","pinned":true,"hidden":false,"mode":"ojs"},{"id":309,"value":"mutable xmax = d3.max(pts)","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"xAxis = (g) =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"x = d3.scaleLinear([0, 366], [margin.left * 0.95, width - margin.right * 0.7])","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"ry = height - margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"height = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"pts = changes.map((d) => d.day)","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"margin = ({ top: 50, right: 25, bottom: 50, left: 55 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":264,"value":"cscale = d3\n .scaleTime(\n d3.extent(changes, (d) => new Date(d.year)),\n [\"gray\", \"orange\"]\n )\n .interpolate(d3.interpolateRgb.gamma(2.2))","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"changes = data.map((d) => {\n d.diff = d.temp - means[d.day].avg;\n d.avg = means[d.day].avg;\n d.max = max[d.day].max;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"changes_2023 = changes.filter((d) => d.year === \"2023\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"changes_2024 = changes.filter((d) => d.year === \"2024\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"means = {\n newSvg;\n return group(\n data.filter((d) => d.year >= range.value[0] && d.year <= range.value[1])\n )\n .by((d) => d.day)\n .orderBy((d) => d.key)\n .run() // This returns array\n .map((grouped) => {\n const temps = grouped.values.map((d) => d.temp);\n const sum = temps.reduce((a, b) => a + b, 0);\n const avg = sum / grouped.values.length;\n const max = Math.max(...temps);\n const min = Math.min(...temps);\n return Object.assign({ min, max, sum, avg }, grouped);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"max = {\n //newSvg;\n return group(data.filter((d) => +d.year < 2023))\n .by((d) => d.day)\n .orderBy((d) => d.key)\n .run() // This returns array\n .map((grouped) => {\n const temps = grouped.values.map((d) => d.temp);\n //const sum = temps.reduce((a, b) => a + b, 0);\n //const avg = sum / grouped.values.length;\n const max = Math.max(...temps);\n const min = Math.min(...temps);\n return Object.assign({ min, max }, grouped);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = rawdata.map((d) => {\n return d.data.map((x, i) => {\n return {\n day: i, year: d.name, date: new Date(d.name, 0, i+1), temp: x\n }\n })\n})\n.flat()\n.filter(d => d.temp !== null && d.year > 1800 && d.day <= 364)","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"//rawdata = fetch(\"https://climatereanalyzer.org/clim/sst_daily/json/oisst2.1_natlan1_sst_day.json\").then((response) => response.json())\n\nrawdata = fetch(\n \"https://climatereanalyzer.org/clim/t2_daily/json/era5_world_t2_day.json\"\n).then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"import {group} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"import { interval } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"import { list } from \"@stwind/input-list\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"import { slider, button } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}