31:T741,Plot.plot({ width: width, marginRight: 38, marginLeft: 30, x: { label: null, grid: true, nice: false }, y: { label: "↑ Yearly Cumulative Precipitation (inches)", grid: true, nice: true }, marks: [ Plot.line(medianData, { x: (d) => d[0], y: (d) => d[1], stroke: "steelblue", strokeWidth: 3, strokeOpacity: 1 }), Plot.line(data, { x: "dateInYear", y: "cumulative", z: "year", stroke: (d) => (highlight(d) ? "darkblue" : "steelblue"), strokeWidth: (d) => (highlight(d) ? 3 : 1.5), strokeOpacity: (d) => (highlight(d) ? 1 : 0.25) }), Plot.line(data, { filter: (d) => d.year === maxDate.getFullYear(), x: "dateInYear", y: "cumulative", z: "year", stroke: "darkblue", strokeWidth: 3, strokeOpacity: 1 }), Plot.line(data, { filter: highlight, x: "dateInYear", y: "cumulative", z: "year", stroke: "green", strokeWidth: 3, strokeOpacity: 1 }), Plot.text(finalValues, { filter: highlight, x: "dateInYear", y: "cumulative", z: "year", text: (d) => `${d.year}`, textAnchor: "start", fill: "black", stroke: "white", strokeWidth: 2, dx: 3 }), Plot.text(finalValues, { filter: (d) => d.year === maxDate.getFullYear(), x: "dateInYear", y: "cumulative", z: "year", text: (d) => `${d.year}`, textAnchor: "start", fill: "black", stroke: "white", strokeWidth: 2, dx: 3 }), Plot.text([medianData[medianData.length - 1]], { x: (d) => d[0], y: (d) => d[1], text: (d) => "median", textAnchor: "start", fill: "black", stroke: "white", strokeWidth: 2, dx: 3 }) ] })32:T43c,Plot.plot({ marginLeft: 50, title: "Chicago Dry Streaks", subtitle: `Between ${yearRange[0]} and ${yearRange[1]}, there have been ${dryStreaks.nStreaks} streaks of ${dryThreshold} or more days in a row with no precipitation.`, caption: html`Source: NOAA National Centers for Environmental Information (link)`, width: width, height: width / 2, padding: 0, grid: true, x: { axis: "top", label: "Date", tickFormat: "%b", interval: "day" //domain: [new Date("2042-01-01"), new Date("2042-12-31")] }, y: { label: "Year", nice: true, interval: "year", reverse: true }, color: { type: "linear", scheme: "Reds", legend: false }, marks: [ Plot.rect(runs.streaks, { x: "dateInYear", y: "date", fill: "dryStreak", inset: 0, stroke: null }), Plot.rect(dryStreaks.spans, { x1: "start", x2: "end", y: "date", fill: "rgba(0,0,0,0)", stroke: "black", strokeWidth: width / 576, inset: 0, title: "label" }) ] })33:T432,Plot.plot({ title: "Chicago Wet Streaks", subtitle: `Between ${yearRange[0]} and ${yearRange[1]}, there have been ${wetStreaks.nStreaks} streaks of ${wetThreshold} or more days in a row with measurable precipitation.`, caption: html`Source: NOAA National Centers for Environmental Information (link)`, width: width, height: width / 2, padding: 0, grid: true, x: { axis: "top", label: "Date", tickFormat: "%b", interval: "day" //domain: [new Date("2042-01-01"), new Date("2042-12-31")] }, y: { label: "Year", nice: true, interval: "year", reverse: true }, color: { type: "linear", scheme: "Reds", legend: false }, marks: [ Plot.rect(runs.streaks, { x: "dateInYear", y: "date", fill: "wetStreak", inset: 0, stroke: null }), Plot.rect(wetStreaks.spans, { x1: "start", x2: "end", y: "date", fill: "rgba(0,0,0,0)", stroke: "black", strokeWidth: width / 576, inset: 0, title: "label" }) ] })34:T4a9,function filterStreaks(data, threshold) { const format = d3.utcFormat("%B %d, %Y"); const result = []; const filtered = data.filter((d) => d.streak >= threshold); filtered.forEach((d) => { const label = `${format(d.start)} to ${format(d.end)}`; if (streakSpansYears(d)) { let firstChunk = Object.assign({}, d); firstChunk.start = toDateInYear(d.start); firstChunk.end = toDateInYear(new Date("2042-12-31")); firstChunk.date = new Date(`${d.start.getFullYear()}-06-01`); firstChunk.label = label; result.push(firstChunk); let secondChunk = Object.assign({}, d); secondChunk.start = toDateInYear(new Date("2042-01-01-12")); secondChunk.end = toDateInYear(d.end); secondChunk.date = new Date(`${d.end.getFullYear()}-06-01`); secondChunk.label = label; result.push(secondChunk); } else { let clone = Object.assign({}, d); clone.start = toDateInYear(d.start); clone.end = toDateInYear(d.end); clone.date = new Date(`${d.end.getFullYear()}-01-01`); clone.label = label; result.push(clone); } }); return { nStreaks: filtered.length, spans: result }; }35:T514,/* Note as of 11/2024: This cell is out of date, just keeping it here in case using the API doesn't work out well in the long run. Note: to download updated date, search email for "noaa data", click "View Summary" for the last download, and then on that page choose "Resubmit". There's an option to change the date range: update to the latest date and then resubmit the request. Can also make the file much smaller by just including the DATE and PRCP columns, e.g. `qsv select DATE,PRCP < 3839948.csv > 3839948.small.csv` */ allDataOld = { const DUMMYYEAR = 2042; const timeParse = d3.timeParse("%Y-%m-%d"); const cumulative = new Map(); return d3.csvParse( //await FileAttachment("USW00094846-precipitation.csv").text(), // o'hare await FileAttachment("USC00111577-precipitation.csv").text(), // midway function (d) { d.date = timeParse(d.DATE); d.dateInYear = toDateInYear(d.date); d.year = d.date.getFullYear(); d.precipitation = +d.PRCP; d.cumulative = cumulative.has(d.year) ? cumulative.get(d.year) + d.precipitation : d.precipitation; cumulative.set(d.year, d.cumulative); return _.pick(d, [ "year", "date", "dateInYear", "precipitation", "cumulative" ]); } ); }36:[{"id":"2e0f142e747ee37b5a020dd7d8f9a8da68f7301ea43abdd505327bfc566cbc0ba152ce5f85aa93142fbc7aa69a02407ef53310a3ab1bea5fdaed4940e289f2e6","href":"https://static.observableusercontent.com/files/2e0f142e747ee37b5a020dd7d8f9a8da68f7301ea43abdd505327bfc566cbc0ba152ce5f85aa93142fbc7aa69a02407ef53310a3ab1bea5fdaed4940e289f2e6","name":"2159347.csv","type":"text/csv","lastModified":1590435131464.481,"size":8858792},{"id":"f075d1aaede2afa929a7a772399301d722532417be5c44a95d6e4d9b0564a84b5a207a0fb5ecfd67a2620dbfa35958ed82509d282be3b52d1eac56405cd72850","href":"https://static.observableusercontent.com/files/f075d1aaede2afa929a7a772399301d722532417be5c44a95d6e4d9b0564a84b5a207a0fb5ecfd67a2620dbfa35958ed82509d282be3b52d1eac56405cd72850","name":"3839948.small.csv","type":"text/csv","lastModified":1731346912488.923,"size":438590},{"id":"fdab80ba11c3b52a3e68811db5b96cad990187b6b54c2f7d764a8781a9780de8b4b3e2d0ecc548eebe5bdf32c56d1ff27ff77adf6a497e1550b5e5d1980f9dd9","href":"https://static.observableusercontent.com/files/fdab80ba11c3b52a3e68811db5b96cad990187b6b54c2f7d764a8781a9780de8b4b3e2d0ecc548eebe5bdf32c56d1ff27ff77adf6a497e1550b5e5d1980f9dd9","name":"USC00111577-precipitation.csv","type":"text/csv","lastModified":1731469883494.032,"size":723539},{"id":"2248dc4f56a803dc4d0c608f7ee86caa58f10b00b42355b49816806e00e440f13aaf920228ad1fd6c66eac444bf61dacb084895ad3b097e77ec36926365e9d15","href":"https://static.observableusercontent.com/files/2248dc4f56a803dc4d0c608f7ee86caa58f10b00b42355b49816806e00e440f13aaf920228ad1fd6c66eac444bf61dacb084895ad3b097e77ec36926365e9d15","name":"USW00094846-precipitation.csv","type":"text/csv","lastModified":1731470101017.466,"size":517115},{"id":"a753b1c2b60ad7674fc4fa14ed286a8a4413de6f87c731d640de2eaef68d17a7eb8d0509a7d76d3d6f45151cd69de78c2bf7ec5633b4f357e7b313610138d15f","href":"https://static.observableusercontent.com/files/a753b1c2b60ad7674fc4fa14ed286a8a4413de6f87c731d640de2eaef68d17a7eb8d0509a7d76d3d6f45151cd69de78c2bf7ec5633b4f357e7b313610138d15f","name":"2530943.csv","type":"text/csv","lastModified":1617577925272.069,"size":8963668},{"id":"2e076b4a8cb5972bb16e6d4ad0ff9d3bf3abdea7565103305fe9ddf633c491b99f57f4a90abb7f9052660cc9bb58929cd72f81472f9b7ed5f158de03d8bb5d55","href":"https://static.observableusercontent.com/files/2e076b4a8cb5972bb16e6d4ad0ff9d3bf3abdea7565103305fe9ddf633c491b99f57f4a90abb7f9052660cc9bb58929cd72f81472f9b7ed5f158de03d8bb5d55","name":"3112500.csv","type":"text/csv","lastModified":1666035443628.406,"size":2166653},{"id":"ce3614e5de98c53542786afabf19b672bba1d874a7876bc984a8a2d8512eab656e545bd7bcf6319fda1d823d6d801dcfdc5780be1fd663dee6753a746de0cb7a","href":"https://static.observableusercontent.com/files/ce3614e5de98c53542786afabf19b672bba1d874a7876bc984a8a2d8512eab656e545bd7bcf6319fda1d823d6d801dcfdc5780be1fd663dee6753a746de0cb7a","name":"3358753.csv.small.csv","type":"text/csv","lastModified":1686444229736.152,"size":458331}] 2f:{"title":"Precipitation in Chicago","cells":[{"id":0,"value":"# Precipitation in Chicago\n\nData was retreived from the [National Centers for Environmental Information](https://www.ncdc.noaa.gov/)","pinned":false,"hidden":false,"mode":"md"},{"id":1252,"value":"Daily precipitation values starting in ${minDate.getFullYear()} up until ${d3.timeFormat(\n \"%B %d, %Y\"\n)(maxDate)}. (Scroll to bottom for more details about the data)","pinned":false,"hidden":false,"mode":"md"},{"id":1003,"value":"Use this slider to adjust the years that are included:","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"viewof yearRange = interval([minDate.getFullYear(), maxDate.getFullYear()], {\n step: 1,\n value: [minDate.getFullYear(), maxDate.getFullYear()],\n label: \"Year Range to Include\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"Mouseover this chart to highlight particular years:","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"LineChart(data, {\n x: (d) => d.dateInYear,\n y: (d) => d.cumulative,\n z: (d) => d.year,\n yLabel: \"↑ Yearly Cumulative Precipitation (inches)\",\n width,\n height: 400,\n color: \"steelblue\",\n marginRight: 12,\n marginLeft: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"Mouseover the `Total Yearly Cumulative Precipitation` chart to choose a year to compare to the current year.","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"viewof highlightYear = LineChart(finalValues, {\n x: (d) => d.year,\n y: (d) => d.cumulative,\n z: (d) => null,\n xType: d3.scaleLinear,\n xFormat: \"i\",\n yLabel: \"↑ Total Yearly Cumulative Precipitation (inches)\",\n width: width,\n height: 150,\n color: \"green\",\n strokeWidth: 2.5,\n marginLeft: 30,\n marginRight: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"Here's a different way of looking at the yearly cumulative totals:","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"Plot.plot({\n width: width,\n x: {\n label: null,\n ticks: d3.ticks(...d3.extent(finalValues, (d) => d.year), 10),\n tickFormat: \"i\"\n },\n color: {\n type: \"sequential\",\n nice: true,\n scheme: \"YlGnBu\",\n legend: true,\n label: \"Total Yearly Cumulative Preciptation (Inches)\"\n },\n marks: [\n Plot.cell(finalValues, {\n x: \"year\",\n fill: \"cumulative\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1119,"value":"## Streaks","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"Use this to adjust the threshold where streaks are highlighted:","pinned":false,"hidden":false,"mode":"md"},{"id":631,"value":"viewof dryThreshold = Inputs.range([1, 26], {\n value: 21,\n step: 1,\n label: \"Highlight dry streaks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"Use this to adjust the threshold where streaks are highlighted:","pinned":false,"hidden":false,"mode":"md"},{"id":924,"value":"viewof wetThreshold = Inputs.range([1, 10], {\n value: 7,\n step: 1,\n label: \"Highlight wet streaks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1095,"value":"
\n\n---\n\n
","pinned":false,"hidden":false,"mode":"md"},{"id":549,"value":"runs = {\n const streaks = [];\n const drySpans = [];\n const wetSpans = [];\n let wetDays = [];\n let dryDays = [];\n let dryStreak = 0;\n let wetStreak = 0;\n data.forEach((d) => {\n if (d.precipitation <= 0) {\n dryDays.push(d.date);\n dryStreak += 1;\n\n wetStreak = 0;\n if (wetDays.length > 0) {\n wetSpans.push({\n streak: wetDays.length,\n start: d3.min(wetDays),\n end: d3.max(wetDays)\n });\n }\n wetDays = [];\n } else {\n wetDays.push(d.date);\n wetStreak += 1;\n\n dryStreak = 0;\n if (dryDays.length > 0) {\n drySpans.push({\n streak: dryDays.length,\n start: d3.min(dryDays),\n end: d3.max(dryDays)\n });\n }\n dryDays = [];\n }\n streaks.push({\n date: d.date,\n dryStreak: dryStreak,\n wetStreak: wetStreak,\n dateInYear: d.dateInYear,\n year: d.year,\n precipitation: d.precipitation\n });\n });\n return {\n streaks,\n drySpans,\n wetSpans\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"dryStreaks = filterStreaks(runs.drySpans, dryThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":914,"value":"wetStreaks = filterStreaks(runs.wetSpans, wetThreshold)","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"function toDateInYear(date, dummy = 2042) {\n let newDate = new Date(date.valueOf());\n newDate.setFullYear(dummy);\n return newDate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"function streakSpansYears(d) {\n const startYear = d.start.getFullYear();\n const endYear = d.end.getFullYear();\n return startYear !== endYear;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"function highlight(d) {\n let year = highlightYear ? highlightYear.year : null;\n return d.year === year;\n\n // return d.year === maxDate.getFullYear() || d.year === year;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"finalValues = {\n const grouped = d3.rollup(\n data,\n (d) => d3.greatest(d, (d) => d.date),\n (d) => d.year\n );\n return Array.from(grouped.values());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"data = allData.filter((d) => yearRange[0] <= d.year && d.year <= yearRange[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1266,"value":"medianData = [\n ...d3\n .rollup(\n data,\n (fullArray) => d3.median(fullArray, (d) => d.cumulative),\n (d) => d.dateInYear\n )\n .entries()\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"maxDate = d3.max(allData.map((d) => d.date))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"minDate = d3.min(\n allData.filter((d) => d.date.getMonth() === 0 && d.date.getDate() === 1),\n (d) => d.date\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"import { interval } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import { LineChart } from \"@stringertheory/line-chart-multiple-series\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"allData = fetch(\n \"https://notions.stringer.io/precipitation?stationid=GHCND:USW00094846\"\n)\n .then((response) => {\n if (!response.ok) {\n return response.text().then((text) => {\n throw new Error(text);\n });\n }\n return response.json();\n })\n .then((data) => {\n const timeParse = d3.timeParse(\"%Y-%m-%d\");\n const cumulative = new Map();\n const result = [];\n data.forEach(([d, p]) => {\n let date = timeParse(d);\n let year = date.getFullYear();\n let inches = p / 254;\n let item = {\n date,\n precipitation: inches,\n year,\n cumulative: cumulative.has(year)\n ? cumulative.get(year) + inches\n : inches,\n dateInYear: toDateInYear(date)\n };\n cumulative.set(item.year, item.cumulative);\n result.push(item);\n });\n return result;\n })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}