31:T4b7,### Process Recreating a "Haywood Plot" I saw on the [NOAA](https://www.ncdc.noaa.gov/cag/statewide/haywood/4/pcp/12) website. I wasn't successful in discovering why it's called a Haywood plot, but it does a very effective job of representing cumulative precipitation values for different years. If the months are resorted from Oct-Sep to represent a water year (instead of a calendar year), 2022 started off well with lot of rain in the winter months, but the spring has been extremely dry. It's useful to look at this data in different ways, will add the option to sort by months in a future update. I used a really neat d3 function called [groupSort](https://observablehq.com/@d3/d3-groupsort) to calculate the wettest and driest years through this [Small Multiples](https://3iap.com/observable-plot-parking-plague-javascript-data-visualization-ukcPx9d7TqGaDLZUM2pkjQ/) example. Notebooks used for reference: - [Line Mark](https://observablehq.com/@observablehq/plot-line) - [Text Mark](https://observablehq.com/@observablehq/plot-text) - [Visualizing 'Small Multiples' Charts with Observable Plot ](https://3iap.com/observable-plot-parking-plague-javascript-data-visualization-ukcPx9d7TqGaDLZUM2pkjQ/)32:T5bf,Plot.plot({ x: { label: null, type: "point", // the month values in the data are from 1-12 // to create a new Date object in JavaScript month argument should start from 0 // the year 2000 used to create a new Date object is random tickFormat: (d) => d3.timeFormat("%b")(new Date(2000, d-1, 1)), }, y: { grid: true, label: "↑ Precipitation (inches)" }, marks: [ Plot.ruleY([0]), // all years Plot.line(data, { ...xyz, stroke: "LightGray", }), // current year Plot.line(data.filter(({ Year }) => Year === 2022), { ...xyz, stroke: "black", strokeWidth: 2, }), Plot.text(data.filter(({ Year }) => Year === 2022), Plot.selectLast({ ...xyz, ...label, fill: "black", fontWeight: 600, })), // median Plot.line(stats, { x: "Month", y: "Median", stroke: "#9e6b90", }), Plot.text(stats, Plot.selectLast({ x: "Month", y: "Median", ...label, text: (d) => "Median", fill: "#9e6b90", })), // wettest years Plot.line(wettest, { ...xyz, stroke: "#714dbf", }), Plot.text(wettest, Plot.selectLast({ ...xyz, ...label, fill: "#714dbf", })), // driest years Plot.line(driest, { ...xyz, stroke: "#cf9270", }), Plot.text(driest, Plot.selectLast({ ...xyz, ...label, fill: "#cf9270", })), ] })33:[{"id":"f3cfef82b085fc29d367253e5e251c7f80aae9e0ed23126104f102858eb33a8ca27e70f3fa6459b1f8fcce88e7c3345587b5353b21bc8d5a724f42ca5eacd5d7","href":"https://static.observableusercontent.com/files/f3cfef82b085fc29d367253e5e251c7f80aae9e0ed23126104f102858eb33a8ca27e70f3fa6459b1f8fcce88e7c3345587b5353b21bc8d5a724f42ca5eacd5d7","name":"ca-pcp-monthly.csv","type":"text/csv","lastModified":1649477198949.308,"size":19674},{"id":"a8a8e736b0849532100624fd1f3063dce248b61928862259c5536ab0a08157c1a3b1cb6c0dff2a111ecdff47152f60a0e82ad546d2e0b7c502816ffa8a4e795f","href":"https://static.observableusercontent.com/files/a8a8e736b0849532100624fd1f3063dce248b61928862259c5536ab0a08157c1a3b1cb6c0dff2a111ecdff47152f60a0e82ad546d2e0b7c502816ffa8a4e795f","name":"ca-pcp-monthly@2.csv","type":"text/csv","lastModified":1649530055944.11,"size":21135}] 2f:{"title":"Day 9: Distribution - Statistics","cells":[{"id":4,"value":"# Day 9: Distribution - Statistics\n## Created for #30DayChartChallenge April 2022.","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"
","pinned":false,"hidden":false,"mode":"html"},{"id":117,"value":"

California experiences the driest Jan-Feb-Mar in over 100 years of record keeping!!!

Each line in the chart represents a year's progression in total precipitation for California from 1895-2022. The 5 wettest years, the 5 driest years, the current year, and median are highlighted.

\n\n

Source: NOAA National Centers for Environmental information, Climate at a Glance: Statewide Time Series, published April 2022, retrieved on April 9, 2022 from https://www.ncdc.noaa.gov/cag/

","pinned":false,"hidden":false,"mode":"html"},{"id":758,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"label = ({\n text: (d) => `${d.Year}`,\n textAnchor: \"start\",\n dx: 3,\n fontSize: 10,\n lineHeight: 1.3,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"xyz = ({\n x: \"Month\",\n y: \"Value\",\n z: \"Year\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"stats = {\n const dataByMonth = d3.groups(data, d => d.Month);\n return dataByMonth.map(([key, values]) => {\n // calculate the median for each month\n return {\n Month: key,\n Median: d3.median(values, d => d.Value),\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"wettest = {\n const totalsByYear = data.filter((d) => d.Month === 12);\n // Get the 5 years with the largest values for total precipitation\n let wettestYears = d3\n .groupSort(\n totalsByYear,\n (records) => -d3.max(records, (d) => d.Value),\n (record) => record.Year\n )\n .slice(0, 5);\n\n // Filter data for the selected years\n return data.filter((d) => {\n return wettestYears.includes(d.Year);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":936,"value":"driest = {\n const totalsByYear = data.filter((d) => d.Month === 12);\n // Get the 5 years with the largest values for total precipitation\n let driestYears = d3\n .groupSort(\n totalsByYear,\n (records) => d3.min(records, (d) => d.Value),\n (record) => record.Year\n )\n .slice(0, 5);\n\n // Filter data for the selected years\n return data.filter((d) => {\n return driestYears.includes(d.Year);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"data = FileAttachment(\"ca-pcp-monthly@2.csv\").csv({ typed: true})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}