45:["$","title",null,{"children":"Assignment 4: Interaction | Harrison Law | Observable"}] 4d:T40a,const stationMap = display(Plot.plot({ title: "Rainfall stations in the main Hawaiian Islands", subtitle: "Color shows months of records (NumMos); blue rings mark stations 704 and 705", width: 900, height: 560, projection: { type: "mercator", domain: {type: "MultiPoint", coordinates: [[-160.4, 18.8], [-154.7, 22.4]]} }, color: { type: "sqrt", scheme: "YlOrRd", legend: true, label: "Months of records (NumMos)" }, marks: [ Plot.geo(hawaii, {fill: "#eef1f4", stroke: "#9aa5b1", strokeWidth: 0.6}), Plot.dot(header, { x: "Lon_DD", y: "Lat_DD", fill: "NumMos", r: 3.2, fillOpacity: 0.8, stroke: "black", strokeWidth: 0.3, channels: {Name: "Name", SKN: "SKN", Elevation_ft: "ElevFT", Years: d => `${d.MinYear}–${d.MaxYear}`}, tip: {format: {x: false, y: false, fill: true}} }), Plot.dot(header.filter(d => d.SKN === 704 || d.SKN === 705), { x: "Lon_DD", y: "Lat_DD", r: 8, stroke: "royalblue", strokeWidth: 2.5, fill: "none" }) ] }));4e:T417,const oahuMap = display(Plot.plot({ title: "Stations 704 and 705 on Oʻahu", subtitle: "Zoomed inset; color shows months of records", width: 700, height: 420, projection: { type: "mercator", domain: {type: "MultiPoint", coordinates: [[-158.35, 21.2], [-157.6, 21.75]]} }, color: {type: "sqrt", scheme: "YlOrRd", legend: true, label: "Months of records"}, marks: [ Plot.geo(hawaii, {fill: "#eef1f4", stroke: "#9aa5b1"}), Plot.dot(header, {x: "Lon_DD", y: "Lat_DD", fill: "NumMos", r: 4, stroke: "black", strokeWidth: 0.3, channels: {Name: "Name", SKN: "SKN"}, tip: true}), Plot.dot(header.filter(d => d.SKN === 704 || d.SKN === 705), { x: "Lon_DD", y: "Lat_DD", r: 9, stroke: "royalblue", strokeWidth: 2.5, fill: "none"}), Plot.text(header.filter(d => d.SKN === 704 || d.SKN === 705), { x: "Lon_DD", y: "Lat_DD", text: d => `${d.SKN} ${d.Name}`, dy: d => d.SKN === 704 ? -16 : 18, fontWeight: "bold", fill: "royalblue", stroke: "white", strokeWidth: 3, paintOrder: "stroke"}) ] }));4f:T9ca,## 3. Style choices Map - Framing: The map is bounded to the main Hawaiian islands (lon −160.4 to −154.7, lat 18.8 to 22.4) instead of the whole world or Pacific, because all stations lie within this box. This lets the stations spread out and use the space. A Mercator projection is fine at this latitude and small extent, where distortion is negligible, and it keeps north up and the islands recognizable. - Basemap: County outlines for Hawaiʻi are drawn in a pale grey so the coastline gives geographic context but doesn't compete with the data. - Encoding: Each station is a dot. Fill color shows NumMos (how many monthly records exist) on a sequential yellow→red scale, using a square-root scale because the counts are heavily skewed (1 to ~1450). This shows at a glance which stations are data-rich and which are nearly empty. Black thin outlines and partial opacity keep dots readable where they overlap. Tooltips reveal name, SKN, elevation and year span on hover. - Highlight: Stations 704 and 705 get a blue ring, plus a zoomed Oʻahu inset showing they are neighbours. Heatmaps - Layout: x = month, y = year, so each row is one year and each column is a calendar month. Columns reveal seasonality (the wet winter vs. dry summer pattern), rows reveal year-to-year variability, and the whole picture shows long-term trends and data gaps. - Color: A sequential scale (light yellow → dark blue, `YlGnBu`), because rainfall is a magnitude from zero upward with no meaningful midpoint, and blue is intuitively "water". I used a square-root scale since monthly rainfall is highly right-skewed (median ≈ 30 mm, max ≈ 490 mm). A linear scale would make nearly the entire chart pale and let only a few storms dominate. The scale is clamped at 400 mm so the rare outliers don't stretch the range. - Shared scale and axes: Both charts use the same color domain and the same year range (1904–2007), so equal colors mean equal rainfall and the same rows line up horizontally. - Missing vs. invalid data: Missing months are light grey, which reads as "no data" and is not confused with "low rainfall" (pale yellow). Negative values are physically impossible, so they are set to magenta, visibly distinct from both, instead of being silently dropped or turned into zeros. Treating them as missing for analysis was a deliberate decision. - Axes: Month labels are on top and year labels are only shown for decades, to avoid clutter. Cells are padding-free so patterns appear as continuous texture.50:T607,### Do the stations agree? Yes, strongly. Over 1945–1979, there are ${stats.n} of ${stats.total} months where both stations have valid data. For those months: - Pearson correlation is r = ${stats.r.toFixed(2)}. - Mean monthly rainfall is ${stats.mx.toFixed(1)} mm (704) vs. ${stats.my.toFixed(1)} mm (705). - The median absolute difference is about ${stats.medAbs.toFixed(1)} mm. How we can tell visually: 1. In the side-by-side heatmaps, the same rows are dark in the same columns: wet winters (Nov–Mar) and dry summers (May–Sept) appear in both, and individual wet months/years (strong blue streaks) occur at the same time at both stations. 2. The gaps are the main difference. 705 has a big missing block in 1946–1948 and 704 has a few missing months, so some mismatch comes from coverage and not from the climate itself. 3. In the difference heatmap, most cells are pale (near 0). The few strongly red/blue cells are mostly in the very wet months, where a small timing or location difference in a storm produces a large absolute difference. 4. In the scatterplot, the points cluster tightly around the 1:1 diagonal, with more scatter at high rainfall. Station 705 is slightly wetter on average, which is plausible given they are ~1 km apart but at different elevations (20 ft vs. 50 ft) and operated by different observers (BWS vs. NWS). Caveat: agreement is strongest in the *pattern*, not necessarily the exact value, so the stations can be merged or used to infill each other's gaps, but they should be bias-corrected first.51:T618,### 5. What could we learn from two heatmaps of distant stations? - Spatial climate differences: Leeward vs. windward sides, or dry coastal vs. wet mountain stations, would show clearly different *magnitudes* (e.g., a windward Hilo-side station would be far darker than a leeward Kona-side or Kauaʻi-coast one) and different seasonal shapes. Some places keep rain through the summer (trade-wind showers), others are mostly winter-only (Kona-type). - Shared (regional) signals: If dark/light bands appear in the *same years* at both stations, that points to large-scale drivers, such as El Niño / La Niña or Pacific Decadal Oscillation shifts, which affect the whole state. If they don't, that suggests local orographic effects or storms. - Elevation and exposure: Higher stations or ones facing the trade winds tend to be wetter. - Long-term trend / drying: A visible shift in color toward lighter over decades at both sites would hint at a climate trend. Differences in trend would suggest regional patterns. - Extreme events: The same storm hitting both islands, or just one, becomes visible as a dark cell lining up (or not) in time. - Data-quality issues: Abrupt color changes at the same time in one station but not the other might be an instrument change, a relocation, or an observer change (the *Changepoint* field) and not weather. - Limits: With only two stations we can't generalize, because spatial patterns need many stations, and different record lengths limit how much can be compared. That's the motivation for the interactive system below.52:T543,### Layout rationale | Region | Contents | Why here | |---|---|---| | Top bar | Title, station search, export | Always visible; search is a fast entry point (task 1) and export finishes the workflow (task 6). | | A (left) | Filter panel with range sliders and checkboxes (island, years, elevation, record length, status, Atlas use); a list of currently selected stations | Left-side controls follow the common convention (Western reading order: set constraints first, then look right to results). | | B (top-center) | Map of the filtered stations (dot colour = number of records) | The map is the *overview*: location is the natural key for this data. It sits next to the heatmaps so the eyes can move between them. | | C (top-right) | Heatmaps, one per selected station (small multiples) with a shared year axis and color scale | The main *detail view*. It is the largest region on the right, next to the map it is linked with. | | D (bottom) | Coverage timeline (one horizontal bar per station showing years covered and gaps), plus the scatter comparison and monthly climatology line chart | Helps judge data availability and compare stations. Placed at the bottom as supporting context to the main views above it. | Only 3 to 4 charts are visible at one time to avoid overwhelming the user; filters narrow ~2,250 stations to a manageable set.53:T8f1,### 2. Interaction techniques 1. Filtering / dynamic queries (A): Range sliders and checkboxes immediately filter all views (map, timeline, list). This reduces ~2,250 stations to a relevant subset (e.g., "Oʻahu, current, ≥ 400 months, 1950–2000"). 2. Direct selection: brushing & lasso (B, D): The analyst drags a box or lasso over the map to select a cluster of stations, or clicks a dot or timeline row to select a single station. Shift-click adds to the selection (multi-select). 3. Linked views (B ↔ C ↔ D ↔ A): Selecting in one view highlights the same stations in all other views (the dot on the map, the bar in the timeline, the heatmap in the detail area, and the entry in the list). *Brushing and linking* means that hovering over a heatmap cell also highlights the matching years in the timeline. 4. Details on demand / tooltips: Hovering over a map dot shows name, SKN, elevation, observer, and span; hovering over a heatmap cell shows exact mm, month, year, and its flag status (valid/missing/invalid). 5. Overview + detail / zoom & pan: The map and the heatmaps zoom (scroll) and pan (drag). The year-range brush in C′ zooms the heatmaps and the timeline to a selected period (e.g., only the overlap period of two stations). 6. Coordinated, synchronized axes: Heatmaps share the year axis and color scale so comparison is fair. Scrolling one scrolls all of them. 7. Reordering / sorting: The timeline rows can be sorted by start year, length, elevation, latitude, or missing percentage. 8. Re-encoding controls: The analyst can switch between a sqrt or linear color scale, aggregate months into seasons or years, and show or hide missing or invalid data. A "difference mode" subtracts one station's heatmap from another (compare view). 9. Annotation and data editing: The analyst can click a suspicious cell (e.g., a negative value) and flag it, exclude it, or add a note (e.g., "gauge moved 1962"). Annotated cells show a marker, and notes are in the bottom panel. Annotations and filter states are saved to an undo/redo history and can be exported with the cleaned data. 10. Bookmarking / view state: The URL stores the current filters and selection, which allows sharing a view with a colleague. (See red numbered arrows 1-4 on the sketch for four of these.)54:T685,### 3. Example workflow: "Can I trust stations 704 and 705 to be merged into one long Honolulu record?" 1. Start with the map (B). The analyst filters to *Oʻahu*, status *any*, and ≥ 500 months of data using the sliders in A. The map shrinks to a few dozen dots. 2. Narrow down by coverage (D). In the timeline, rows are sorted by start year. The analyst notices that a pair of stations in downtown Honolulu (704 and 705) have complementary spans: one ends in 1979, the other begins in 1945, which makes them a good candidate for merging. 3. Select both by lasso on the map. They appear in the selection list, and two heatmaps open in C with a shared year axis and color scale. 4. Inspect the heatmaps in region C. They hover over cells for details (tooltip) and spot grey gap blocks and a few magenta (invalid) cells in 705. 5. Zoom to the overlap (brush 1945–1979 in C′). Linked views update the timeline and scatter. The scatter shows the stations tightly aligned (r ≈ 0.92), and the difference mode shows a pale, near-zero difference heatmap, which supports the merge. 6. Annotate/clean. A few months show large discrepancies. The analyst clicks them, marks them *"suspect – exclude"*, and adds a note. These then show up in the notes panel. 7. Compare to a distant station. They then shift-click a windward station on the map to show a third heatmap and a monthly climatology line chart, and confirm that the *seasonal pattern* is similar but the *magnitude* is different, so the merge shouldn't be extended to that station. 8. Export the merged series, the flags, and a screenshot of the linked views, and share the URL containing the current filters.55:[{"id":"1f622850bbeb06d9c2a747fe048702e9a7dc6e4d9c85ddd2a5428645c5eff902769de01cd24df822c5a7d005d42010eeb406a2c40ea428020a74865c3d06fbc4","href":"https://static.observableusercontent.com/files/1f622850bbeb06d9c2a747fe048702e9a7dc6e4d9c85ddd2a5428645c5eff902769de01cd24df822c5a7d005d42010eeb406a2c40ea428020a74865c3d06fbc4","name":"image.png","type":"image/png","lastModified":1793507220309,"size":71922},{"id":"1f622850bbeb06d9c2a747fe048702e9a7dc6e4d9c85ddd2a5428645c5eff902769de01cd24df822c5a7d005d42010eeb406a2c40ea428020a74865c3d06fbc4","href":"https://static.observableusercontent.com/files/1f622850bbeb06d9c2a747fe048702e9a7dc6e4d9c85ddd2a5428645c5eff902769de01cd24df822c5a7d005d42010eeb406a2c40ea428020a74865c3d06fbc4","name":"image (2).png","type":"image/png","lastModified":1793507247573,"size":71922}] 49:{"id":"8b52f8994cdb7775","slug":"assignment-4-interaction","title":"Assignment 4: Interaction","thumbnail":"79994a31319d8ed64acade57d5500b01227f6656dcbf80402cbf8d014ee35b1b","access_level":"public","create_time":"$D2026-10-30T03:11:12.950Z","update_time":"$D2026-11-01T04:28:43.584Z","view_time":null,"first_public_time":"$D2026-11-01T04:29:03.643Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"016a75231850063b","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":179,"publish_version":179,"role":null,"authored":false,"authors":[{"type":"individual","id":"d66e4012a6856cb7","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"016a75231850063b","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 4: Interaction","cells":[{"id":1,"value":"# Assignment 4: Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"## Data Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const header = d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\",\n d3.autoType\n);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const raw704 = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\", d3.autoType);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"const raw705 = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\", d3.autoType);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const months = [\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sept\",\"Oct\",\"Nov\",\"Dec\"];","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const clean = rows => rows.map(d => {\n const ok = Number.isFinite(d.value) && d.value >= 0;\n return {\n year: d.year,\n month: d.month,\n m: months.indexOf(d.month),\n raw: d.value,\n value: ok ? d.value : null,\n status: ok ? \"valid\" : (Number.isFinite(d.value) ? \"invalid\" : \"missing\")\n };\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const st704 = clean(raw704);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"const st705 = clean(raw705);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Data quality summary\n\n| Station | Rows | Valid | Missing (NaN) | Invalid (negative) |\n|---|---|---|---|---|\n| 704 Hono Substation | ${st704.length} | ${st704.filter(d=>d.status===\"valid\").length} | ${st704.filter(d=>d.status===\"missing\").length} | ${st704.filter(d=>d.status===\"invalid\").length} |\n| 705 Beretania Pump | ${st705.length} | ${st705.filter(d=>d.status===\"valid\").length} | ${st705.filter(d=>d.status===\"missing\").length} | ${st705.filter(d=>d.status===\"invalid\").length} |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"# Visualize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"const us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\");","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const hawaii = ({\n type: \"FeatureCollection\",\n features: topojson.feature(us, us.objects.counties).features.filter(d => String(d.id).startsWith(\"15\"))\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"## 1. Visualize Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4d","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4e","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"const years = d3.range(1904, 2008);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"const colorScale = ({type: \"sqrt\", scheme: \"YlGnBu\", domain: [0, 400], clamp: true});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const heatmap = (data, title, {yearRange = years, width = 420} = {}) => Plot.plot({\n width,\n height: yearRange.length * 6 + 90,\n marginLeft: 45,\n marginTop: 40,\n padding: 0,\n x: {domain: months, label: null, tickRotate: -45, axis: \"top\"},\n y: {domain: yearRange, label: null, ticks: yearRange.filter(y => y % 10 === 0)},\n color: colorScale,\n title,\n marks: [\n Plot.cell(data.filter(d => d.status === \"missing\"), {x: \"month\", y: \"year\", fill: \"#e6e6e6\"}),\n Plot.cell(data.filter(d => d.status === \"invalid\"), {x: \"month\", y: \"year\", fill: \"#d6249f\"}),\n Plot.cell(data.filter(d => d.status === \"valid\"), {\n x: \"month\", y: \"year\", fill: \"value\",\n title: d => `${d.month} ${d.year}: ${d.value.toFixed(1)} mm`, tip: true\n })\n ]\n});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## 2. Visualize Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"

704 Hono Substation

${heatmap(st704, \"\")}

705 Beretania Pump

${heatmap(st705, \"\")}

\n ${Plot.legend({color: {...colorScale, label: \"Monthly rainfall (mm)\"}})}\n missing (no record)\n invalid (negative value)\n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"## 4. Visualize Overlap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"const overlap = [1945, 1979];","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"const joined = (() => {\n const key = d => `${d.year}-${d.month}`;\n const b = new Map(st705.map(d => [key(d), d]));\n return st704\n .filter(d => d.year >= overlap[0] && d.year <= overlap[1])\n .map(d => {\n const o = b.get(key(d));\n const v704 = d.value, v705 = o ? o.value : null;\n return {year: d.year, month: d.month, m: d.m, v704, v705,\n both: v704 != null && v705 != null,\n diff: v704 != null && v705 != null ? v705 - v704 : null};\n });\n})();","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"const overlapHeatmaps = display(html`

704 (overlap)

${heatmap(st704.filter(d => d.year >= overlap[0] && d.year <= overlap[1]), \"\", {yearRange: d3.range(overlap[0], overlap[1] + 1)})}

705 (overlap)

${heatmap(st705.filter(d => d.year >= overlap[0] && d.year <= overlap[1]), \"\", {yearRange: d3.range(overlap[0], overlap[1] + 1)})}

`);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"const diffPlot = display(Plot.plot({\n title: \"Rainfall difference, 705 − 704\",\n subtitle: \"1945–1979; grey = at least one station missing\",\n width: 420,\n height: 35 * 6 + 90,\n marginLeft: 45, marginTop: 40, padding: 0,\n x: {domain: months, label: null, tickRotate: -45, axis: \"top\"},\n y: {domain: d3.range(overlap[0], overlap[1] + 1), label: null, ticks: d3.range(1945, 1980, 5)},\n color: {type: \"diverging-symlog\", constant: 20, scheme: \"RdBu\", domain: [-200, 200], legend: true, label: \"705 − 704 (mm)\"},\n marks: [\n Plot.cell(joined.filter(d => !d.both), {x: \"month\", y: \"year\", fill: \"#e6e6e6\"}),\n Plot.cell(joined.filter(d => d.both), {x: \"month\", y: \"year\", fill: \"diff\",\n title: d => `${d.month} ${d.year}\\n704: ${d.v704.toFixed(1)}\\n705: ${d.v705.toFixed(1)}`, tip: true})\n ]\n}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"const scatter = display(Plot.plot({\n title: \"Monthly rainfall at 704 vs. 705\",\n subtitle: \"1945–1979, months with valid data at both; red dashed = 1:1 line, black = regression\",\n width: 520, height: 560, grid: true, inset: 8,\n x: {label: \"704 Hono Substation (mm)\", type: \"sqrt\"},\n y: {label: \"705 Beretania Pump (mm)\", type: \"sqrt\"},\n marks: [\n Plot.dot(joined.filter(d => d.both), {x: \"v704\", y: \"v705\", r: 2.5, fillOpacity: 0.5, fill: \"steelblue\",\n title: d => `${d.month} ${d.year}`, tip: true}),\n Plot.line([[0, 0], [500, 500]], {stroke: \"red\", strokeDasharray: \"4\"}),\n Plot.linearRegressionY(joined.filter(d => d.both), {x: \"v704\", y: \"v705\", stroke: \"black\"})\n ]\n}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"const stats = (() => {\n const p = joined.filter(d => d.both);\n const mx = d3.mean(p, d => d.v704), my = d3.mean(p, d => d.v705);\n const r = d3.sum(p, d => (d.v704 - mx) * (d.v705 - my)) /\n Math.sqrt(d3.sum(p, d => (d.v704 - mx) ** 2) * d3.sum(p, d => (d.v705 - my) ** 2));\n return {n: p.length, total: joined.length, mx, my, r, medAbs: d3.median(p, d => Math.abs(d.diff))};\n})();","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$51","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"# Design Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"### Who are the analysts and what do they need to do?\n\nThe raw dataset has ~2,250 stations, each with a different time span (1837–2009), many gaps, and some bad values. Analysts working on this on a laptop will likely want to:\n\n1. Find stations by place, elevation, years covered, record length, status (current/discontinued), observer, or whether it was used in the Rainfall Atlas (UsedInRFA).\n2. Assess data quality/coverage: which stations and years are usable, where are gaps, and how many errors exist?\n3. Inspect a station: see its full seasonal and long-term pattern in a heatmap.\n4. Compare stations: neighbouring stations (consistency/validation) and distant ones (climate contrast).\n5. Find patterns: wet/dry years, seasonality, trends, and extreme events across many stations.\n6. Clean/annotate: flag suspicious values, mark changepoints, and decide which stations to include, then export a cleaned subset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### 1. Basic Layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"const layoutImage = display(await FileAttachment(\"image (2).png\").image());\nlayoutImage.style.maxWidth = \"100%\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$53","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$54","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"2"}} 44:null