45:["$","title",null,{"children":"Assignment 4: Interaction | Joseph Creollo | Observable"}] 4d:T4bd,## Handling gaps and bad values Both files are monthly rainfall in millimetres (year, month, value). Before drawing anything I checked what is actually in them: - **NaN values** are months with no measurement (the gauge was not operating or the record is missing). Station 704 has 22 of them, and station 705 has 110. - **Negative values** are impossible for rainfall (1 in station 704, 10 in station 705). They are recording errors, so I treated them as missing. - **I did not replace missing values with 0** A zero means "it was measured and no rain fell", which is a real observation. Turning a gap into a zero would make the station look drier than it was and would hide the fact that data is absent. - **Very large values** (the maximum is about 475 mm at 704 and 489 mm at 705) look extreme, but I kept them. They are plausible for a wet Honolulu month, and both stations record big totals in the same months, which tells me they are real storms and not typos. - **Years outside a station's record** (for example 704 before it starts, or 705 before 1945) are shown as gaps too, so the two heatmaps can share one time axis. The cell below turns each file into one clean table where bad values become null.4e:T51f,stationMapState = { const div = document.createElement("div"); const isTarget = d => d.SKN === 704 || d.SKN === 705; const others = stations.filter(d => !isTarget(d)); const targets = stations.filter(isTarget); plotly.newPlot(div, [ { type: "scattermap", mode: "markers", name: "Other stations", lat: others.map(d => d.Lat_DD), lon: others.map(d => d.Lon_DD), text: others.map(d => `${d.Name}
SKN ${d.SKN}
${d.ElevFT} ft · ${d.StationStatus}`), hovertemplate: "%{text}", marker: { size: 4, color: "#2b6cb0", opacity: 0.45 } }, { type: "scattermap", mode: "markers", name: "Stations 704 and 705", lat: targets.map(d => d.Lat_DD), lon: targets.map(d => d.Lon_DD), text: targets.map(d => `${d.Name}
SKN ${d.SKN}`), hovertemplate: "%{text}", marker: { size: 13, color: "#d9480f" } } ], { title: { text: "All 2,248 rain-gauge stations in the Rainfall Atlas of Hawaiʻi" }, width: 900, height: 560, margin: { t: 50, b: 0, l: 0, r: 0 }, legend: { x: 0.01, y: 0.99, bgcolor: "rgba(255,255,255,0.85)" }, map: { style: "carto-positron", center: { lat: 20.6, lon: -157.4 }, zoom: 5.6 } }, { displayModeBar: false }); return div; }4f:T5ab,stationMapHonolulu = { const div = document.createElement("div"); const near = stations.filter(d => d.Lat_DD > 21.25 && d.Lat_DD < 21.40 && d.Lon_DD > -157.93 && d.Lon_DD < -157.77); const isTarget = d => d.SKN === 704 || d.SKN === 705; const others = near.filter(d => !isTarget(d)); const targets = near.filter(isTarget); plotly.newPlot(div, [ { type: "scattermap", mode: "markers", name: "Other stations", lat: others.map(d => d.Lat_DD), lon: others.map(d => d.Lon_DD), text: others.map(d => `${d.Name}
SKN ${d.SKN}
${d.MinYear}–${d.MaxYear}`), hovertemplate: "%{text}", marker: { size: 8, color: "#2b6cb0", opacity: 0.6 } }, { type: "scattermap", mode: "markers+text", name: "704 and 705", lat: targets.map(d => d.Lat_DD), lon: targets.map(d => d.Lon_DD), text: targets.map(d => `${d.SKN} ${d.Name}`), textposition: ["bottom left", "top right"], hovertemplate: "%{text}", marker: { size: 15, color: "#d9480f" } } ], { title: { text: "Zoom: stations around Honolulu (704 and 705 highlighted)" }, width: 900, height: 560, margin: { t: 50, b: 0, l: 0, r: 0 }, legend: { x: 0.01, y: 0.99, bgcolor: "rgba(255,255,255,0.85)" }, map: { style: "carto-positron", center: { lat: 21.315, lon: -157.85 }, zoom: 11.3 } }, { displayModeBar: false }); return div; }50:T426,**Style choices for the maps** - **Two maps instead of one** The statewide map shows how the network covers all islands. At that scale, 704 and 705 sit on top of each other, so a second zoomed map of Honolulu shows their real positions. - **Light basemap (carto-positron).** A pale gray map keeps attention on the dots. Rainfall data has no relationship to roads or satellite imagery, so I did not use a busy basemap. - **Small, semi-transparent blue dots for the other stations.** There are 2,248 stations, and many overlap in wet and populated areas, so transparency lets dense areas show up as darker clusters. - **One contrasting orange color for the two stations in question.** Orange against blue pops without needing a legend lookup, and the labels name the stations directly on the zoomed map. - **Tile-based map (not the outline-based scattergeo).** Hawaiʻi is tiny, and the outline maps draw it as a rough blob. Tiles stay sharp when zoomed in. - **Hover text** gives name, SKN id, elevation and status on demand, so the map itself stays uncluttered.51:T571,makeHeatmap = (data, title, yearRange = [1903.5, 2007.5], height = 330) => { const div = document.createElement("div"); const years = d3.range(Math.ceil(yearRange[0]), Math.floor(yearRange[1]) + 1); const lookup = new Map(data.map(d => [`${d.year}-${d.mi}`, d])); const z = monthNames.map((_, mi) => years.map(y => { const d = lookup.get(`${y}-${mi}`); return d ? d.value : null; })); const text = monthNames.map((m, mi) => years.map(y => { const d = lookup.get(`${y}-${mi}`); if (!d) return `${m} ${y}
not in this station's record`; if (d.value === null) return `${m} ${y}
no usable data (${d.reason})`; return `${m} ${y}
${d.value.toFixed(1)} mm`; })); plotly.newPlot(div, [{ type: "heatmap", x: years, y: monthNames, z, text, hoverinfo: "text", hoverongaps: false, colorscale: rainScale, zmin: 0, zmax: 300, xgap: 0, ygap: 1, colorbar: { title: { text: "mm / month" }, thickness: 14, ticksuffix: "", tickvals: [0, 100, 200, 300], ticktext: ["0", "100", "200", "300+"] } }], { title: { text: title }, width: 900, height, margin: { t: 50, b: 40, l: 50, r: 20 }, plot_bgcolor: "#d0d0d0", paper_bgcolor: "white", xaxis: { range: yearRange, dtick: 10, title: { text: "Year" } }, yaxis: { autorange: "reversed" } }, { displayModeBar: false }); return div; }52:T5a2,**Style choices for the heatmaps** - **Year across, month down** Each column is one year and each row is one calendar month. That way the seasons show up as horizontal stripes (Hawaiʻi's wet winter versus dry summer), and wet and dry years show up as vertical bands. - **Sequential, single-hue blue scale, light to dark** Rainfall is a quantity that goes from low to high, so one hue that gets darker is the natural fit. Blue also matches the idea of water. I wrote the scale out by hand so that low rainfall is nearly white and high rainfall is deep navy. - **Color capped at 300 mm** A few months are close to 500 mm. If the scale went to the maximum, almost every month would be pale and the seasonal pattern would vanish. 300 mm is roughly the 98th to 99th percentile of all monthly values, so only the very wettest months saturate, and the legend labels the top as "300+". - **Same scale and same x-axis on both heatmaps** Equal colors mean equal rainfall in both figures, and both span 1904–2007 so that a given year lines up vertically. Without this, the two stations cannot be fairly compared. - **Missing data is flat gray, not white** White is "very little rain" on this scale, so a gap must look different. Gray reads as "nothing here". The hover tells you whether a gray cell is a missing month, a removed negative, or outside that station's record. - **No smoothing or interpolation** Each cell is a real monthly measurement.53:T71e,**Are the two stations consistent?** The stations overlap from **1945 to 1979**, which gives **366 months** where both have usable values. Looking at the two stacked heatmaps for those years, they are **largely consistent**: - **The same seasons.** Both show a pale band across the summer rows and darker cells through the winter rows, year after year. - **The same wet and dry years.** Vertical dark bands (wet years) and pale bands (dry years) appear in the same columns on both heatmaps. Because the x-axes are aligned, I can look straight down from one chart to the other and see the same columns light up. - **The same extreme months.** The darkest cells land in the same months at both stations (March 1958 and March 1951 are among the top two or three months at both stations, about 475 and 405 mm at 704 and 426 and 421 mm at 705), which also supports my choice to keep the large values as real storms. - **The scatter plot confirms it.** Plotting each month's 704 value against its 705 value gives a tight cloud around the equal-rainfall line, with a correlation of about **r ≈ 0.92**. They are **not identical**, though. Station 705 is a little wetter on average (about 63 mm per month versus about 57 mm at 704), and individual months can differ by a lot, because a heavy shower can fall on one gauge and miss the other (the stations are about a kilometre apart). 705 also has far more gray gaps than 704, so some of the differences come from where the data are missing. **How I can tell:** by (1) aligned columns and matching color patterns in the heatmaps, (2) the points clustering along the diagonal of the scatter plot, and (3) a high correlation coefficient. If the stations disagreed, the heatmaps would show wet and dry bands in different columns and the scatter would look like a shapeless cloud.54:T5f3,## 4. What would two heatmaps of distant stations let us see? Putting two heatmaps of far-apart stations side by side with the same time axis and color scale lets an analyst see how rainfall differs across space, not just across time: - **Local versus regional patterns.** If both stations light up in the same months, a storm or season affected a wide region. If only one does, it was a local event. - **Windward versus leeward differences.** Hawaiʻi's trade winds make windward slopes much wetter than leeward coasts. A windward station would look uniformly darker, and a leeward one paler, with a different dry season. - **Elevation and microclimate effects.** A mountain station and a coastal station can have very different totals even when the two are near each other. - **Timing differences.** Wet seasons or big events can come at different times in different places (for example, Kona-storm rain on one island versus none on another). - **Climate signals over decades.** Long dry spells or wet periods that appear in both places suggest a large-scale driver (for example El Niño or a long-term trend), while changes in only one place suggest a local cause, or a change in the instrument or its site. - **Data quality problems.** If one station suddenly looks different from its neighbor in a particular year, it may point to a gauge problem rather than weather. Two stations also have limits: they cannot show a map of the whole island, which is why Part 2 proposes linking the map and many heatmaps together.55:T4fe,# Part 2: Design of an Interactive Rainfall Explorer Users: climate and water-resource analysts who need to find patterns, spot bad data, and compare stations across Hawaiʻi. ## 1. Basic layout The screen has five regions (see the sketch below): 1. **Top bar:** title, a search box (station name or SKN number), and an Export view button. 2. **Left control panel:** filters for island/region, elevation range, station status (current or discontinued), minimum years of record, the rainfall variable (monthly or annual), and the heatmap color cap. A reset button clears everything. 3. **Map view (center left):** every station as a dot on a light tile basemap. Selected stations are drawn in a strong orange; the rest stay small, blue, and semi-transparent. 4. **Heatmap stack (center right):** one year-by-month heatmap per selected station. They all share the same color scale and year axis, so they can be compared by looking straight down. 5. **Overview timeline (middle strip):** a line of the average rainfall for the current selection, with a draggable brush for choosing years. 6. **Detail panel and notes (bottom):** exact values for whatever the analyst hovers or selects, the scatter plot and correlation for two chosen stations, and a list of pinned annotations.56:T883,**Annotated sketch.** The numbers on the sketch match the interactions below. ## 2. Interactive abilities | # | Technique (class term) | What the analyst does | What happens | |---|---|---|---| | 1 | **Dynamic queries / filtering** | Moves a slider or ticks a checkbox in the control panel | Stations that do not match fade from the map and drop out of the heatmap stack immediately | | 2 | **Linked views** | Changes the selection in any one view | Map, heatmaps, overview timeline and detail panel all update together | | 3 | **Direct selection** | Lasso or box-selects dots on the map, or clicks one dot (shift-click to add) | The selected stations are highlighted on the map and one heatmap per station appears | | 4 | **Aligned small multiples + highlighting** | Hovers a cell in one heatmap | The same month is highlighted in every other heatmap, and the tooltip shows the value | | 5 | **Comparison / highlight two items** | Picks two stations (or two cells) | The detail panel opens a scatter plot of A against B with the correlation and the count of missing months | | 6 | **Overview + detail, brushing, zoom and pan** | Drags a brush on the timeline, scrolls to zoom, drags to pan | Every heatmap zooms to those years, and brushing the timeline filters the others | | 7 | **Details on demand** | Hovers or clicks any dot or cell | A tooltip and the detail panel show the exact millimetres, the station's name, elevation and status, and whether a gray cell is missing data | | 8 | **Annotations** | Pins a note to a month or station (for example a storm, or a gauge outage) | The note appears on the heatmap cell and in the notes list, and it is kept for later and for colleagues | | 9 | **Export / sharing state** | Clicks Export view | The current filters, selection and brush are saved as an image or a link that reopens the same view | Design choices behind this: filtering is dynamic (instant, with no "apply" button) so that analysts can explore quickly; the heatmap color scale is fixed and shared so that selection changes never silently change what a color means; and missing data is always shown in gray and never hidden, so that data problems stay visible.57:T5e4,## 3. Example analyst workflow **Question:** "Did the big storm months of the 1950s hit all of leeward Oʻahu, or only Honolulu?" 1. **Filter.** The analyst picks *Oʻahu* in the island menu and sets *ears of record ≥ 20. The map now shows only long-running stations, so the short and noisy records are out of the way. (dynamic queries) 2. **Select.** They lasso the dots around Honolulu. Five heatmaps appear, including 704 and 705. (direct selection, linked views) 3. **Scan.** They notice a very dark column in March 1958 in several heatmaps. They hover a cell there, and every heatmap highlights the same month, with values in the detail panel (475 mm at 704, 426 mm at 705). (aligned small multiples, details on demand) 4. **Zoom.** They drag the brush on the timeline to 1950–1965, and every heatmap zooms to those years. (overview + detail, brushing) 5. **Widen the selection.** They lasso a second group of leeward stations farther west. If the same month is dark there, it was a regional storm. If it is pale or gray, it was local or the gauge was down. (direct selection, comparison) 6. **Check the data.** They pick 704 and 705 and open the scatter. The points cluster on the diagonal (r ≈ 0.92), so the two agree and the storm looks real. (comparison, details on demand) 7. **Record and share.** They pin a note on March 1958 ("storm confirmed at 704 and 705"), then click Export view and send the link to a colleague, who sees the same filters, selection and brush. (annotations, export)58:[{"id":"21ce2049ed51bb5b200148ab6b8293b856f47bbb46d54c53857cc681abfaf5d87b5010b5c6607823a4bf57bc01360d4c46a2357b314736362188ad1dac50ddff","href":"https://static.observableusercontent.com/files/21ce2049ed51bb5b200148ab6b8293b856f47bbb46d54c53857cc681abfaf5d87b5010b5c6607823a4bf57bc01360d4c46a2357b314736362188ad1dac50ddff","name":"IMG_8595.png","type":"image/png","lastModified":1793237148000,"size":9076361},{"id":"20d30b5d69cea7cac6105a744ca5ef3fdb895ac47f75dac7e2255f1e5474778f29efb642233722b9953af37b19e5cdeda94bb709d27624fa461a7b3b0a141e4a","href":"https://static.observableusercontent.com/files/20d30b5d69cea7cac6105a744ca5ef3fdb895ac47f75dac7e2255f1e5474778f29efb642233722b9953af37b19e5cdeda94bb709d27624fa461a7b3b0a141e4a","name":"RawOriginalData_Data_in.csv","type":"text/csv","lastModified":1793237938000,"size":4650309},{"id":"0032ad584a5639e0bb1efba9dbd053a59ac5064292e115faf5d9497b16de9d08f9281f28f3b475dd3d30c03e613677ec79df5d18e6c1146c4f09b291912026c5","href":"https://static.observableusercontent.com/files/0032ad584a5639e0bb1efba9dbd053a59ac5064292e115faf5d9497b16de9d08f9281f28f3b475dd3d30c03e613677ec79df5d18e6c1146c4f09b291912026c5","name":"RawOriginalData_Header.csv","type":"text/csv","lastModified":1793237973000,"size":231897},{"id":"bef603d7c3fa6feb8e8f565b685d3332ff936874ed95bffb9720b0e72231e53571e13b748d16c08f9053122299402c23fa92252edf9769715315ff01e9dd4f76","href":"https://static.observableusercontent.com/files/bef603d7c3fa6feb8e8f565b685d3332ff936874ed95bffb9720b0e72231e53571e13b748d16c08f9053122299402c23fa92252edf9769715315ff01e9dd4f76","name":"column704.csv","type":"text/csv","lastModified":1793238017000,"size":14410},{"id":"96cd3e0a2a048957c2296d641a3f6271aafdd8332521de9a5c05fa2695a2a6eb503cfefaeafe7db5e102e7e70d7caf644548c7ceeb31623cbb54d6b85ebdf937","href":"https://static.observableusercontent.com/files/96cd3e0a2a048957c2296d641a3f6271aafdd8332521de9a5c05fa2695a2a6eb503cfefaeafe7db5e102e7e70d7caf644548c7ceeb31623cbb54d6b85ebdf937","name":"column705.csv","type":"text/csv","lastModified":1793238068000,"size":11751}] 49:{"id":"2f8f8b1cda92036b","slug":"assignment-4-interaction","title":"Assignment 4: Interaction","thumbnail":"591ca62a1c9ab4993cc8705c8475bec8ac37a59ff6c7d5f842c92be3d0b83540","access_level":"public","create_time":"$D2026-10-29T00:36:12.980Z","update_time":"$D2026-10-29T01:44:42.433Z","view_time":null,"first_public_time":"$D2026-10-29T01:47:20.184Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f3dbd45c8c316e77","login":"joseph-creollo","name":"Joseph Creollo","avatar_url":"https://avatars-next.observableusercontent.com/59496af5a4d1a3ad599df23ccf6fe8d6f2f70e16fb68d22c0fc199f4fde8712a","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":157,"publish_version":157,"role":null,"authored":false,"authors":[{"type":"individual","id":"4dd20a98d4c89a58","login":"joseph-creollo","name":"Joseph Creollo","avatar_url":"https://avatars-next.observableusercontent.com/59496af5a4d1a3ad599df23ccf6fe8d6f2f70e16fb68d22c0fc199f4fde8712a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"f3dbd45c8c316e77","login":"joseph-creollo","name":"Joseph Creollo","avatar_url":"https://avatars-next.observableusercontent.com/59496af5a4d1a3ad599df23ccf6fe8d6f2f70e16fb68d22c0fc199f4fde8712a","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\nJoseph Creollo\nICS 484\n10/28/26\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"# Part 1: Stations and Rainfall Heatmaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"plotly = {\n if (window.Plotly) return window.Plotly;\n await new Promise((resolve, reject) => {\n const s = document.createElement(\"script\");\n s.src = \"https://cdn.plot.ly/plotly-2.35.2.min.js\";\n s.onload = resolve;\n s.onerror = reject;\n document.head.appendChild(s);\n });\n return window.Plotly;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"stations = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"raw704 = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"raw705 = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"monthNames = [\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\",\"Jul\",\"Aug\",\"Sept\",\"Oct\",\"Nov\",\"Dec\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"clean = rows => rows.map(r => {\n const mi = monthNames.indexOf(r.month);\n const v = r.value;\n const bad = v === null || v === undefined || Number.isNaN(+v) || +v < 0;\n return {\n year: +r.year,\n month: r.month,\n mi,\n value: bad ? null : +v,\n reason: bad ? (+v < 0 ? \"negative\" : \"missing\") : \"ok\"\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d704 = clean(raw704)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d705 = clean(raw705)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"quality = [\n {station: \"704 Hono Substation\", file: d704},\n {station: \"705 Beretania Pump\", file: d705}\n].map(({station, file}) => ({\n station,\n months_in_file: file.length,\n first_year: d3.min(file.filter(d => d.value !== null), d => d.year),\n last_year: d3.max(file.filter(d => d.value !== null), d => d.year),\n valid: file.filter(d => d.reason === \"ok\").length,\n missing_NaN: file.filter(d => d.reason === \"missing\").length,\n negative_removed: file.filter(d => d.reason === \"negative\").length,\n max_mm: d3.max(file, d => d.value)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Inputs.table(quality)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## 1. Where are the stations?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"## 2. Heatmaps of stations 704 and 705","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"rainScale = [\n [0.00, \"#f7fbff\"],\n [0.15, \"#deebf7\"],\n [0.35, \"#9ecae1\"],\n [0.55, \"#4292c6\"],\n [0.80, \"#08519c\"],\n [1.00, \"#08306b\"]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$51","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"heat704 = makeHeatmap(d704, \"Station 704 · Hono Substation · monthly rainfall (mm)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"heat705 = makeHeatmap(d705, \"Station 705 · Beretania Pump · monthly rainfall (mm)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## 3. Comparing the overlapping period","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"overlapHeat = {\n const wrap = document.createElement(\"div\");\n const range = [1944.5, 1979.5];\n wrap.append(\n makeHeatmap(d704, \"704 Hono Substation · overlap years 1945–1979\", range, 300),\n makeHeatmap(d705, \"705 Beretania Pump · overlap years 1945–1979\", range, 300)\n );\n return wrap;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"pairs = {\n const m705 = new Map(d705.map(d => [`${d.year}-${d.mi}`, d]));\n return d704\n .map(a => ({a, b: m705.get(`${a.year}-${a.mi}`)}))\n .filter(({a, b}) => b && a.value !== null && b.value !== null)\n .map(({a, b}) => ({year: a.year, month: a.month, r704: a.value, r705: b.value}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"overlapStats = {\n const x = pairs.map(d => d.r704), y = pairs.map(d => d.r705);\n const mx = d3.mean(x), my = d3.mean(y);\n const r = d3.sum(pairs, d => (d.r704 - mx) * (d.r705 - my)) /\n Math.sqrt(d3.sum(pairs, d => (d.r704 - mx) ** 2) * d3.sum(pairs, d => (d.r705 - my) ** 2));\n return {months_compared: pairs.length, mean_704: mx, mean_705: my, correlation_r: r};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"scatterCompare = {\n const div = document.createElement(\"div\");\n const maxV = d3.max(pairs, d => Math.max(d.r704, d.r705));\n plotly.newPlot(div, [\n {\n type: \"scatter\", mode: \"lines\", name: \"Equal rainfall\",\n x: [0, maxV], y: [0, maxV], line: { color: \"#999\", dash: \"dash\" }, hoverinfo: \"skip\"\n },\n {\n type: \"scatter\", mode: \"markers\", name: \"Month\",\n x: pairs.map(d => d.r704), y: pairs.map(d => d.r705),\n text: pairs.map(d => `${d.month} ${d.year}
704: ${d.r704.toFixed(1)} mm
705: ${d.r705.toFixed(1)} mm`),\n hoverinfo: \"text\", marker: { size: 6, color: \"#2b6cb0\", opacity: 0.6 }\n }\n ], {\n title: { text: \"Same month, two stations (each dot = one month, 1945–1979)\" },\n width: 560, height: 520,\n margin: { t: 50, b: 55, l: 60, r: 20 },\n xaxis: { title: { text: \"Station 704 rainfall (mm)\" } },\n yaxis: { title: { text: \"Station 705 rainfall (mm)\" }, scaleanchor: \"x\" },\n legend: { x: 0.02, y: 0.98 }\n }, { displayModeBar: false });\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$53","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$54","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$55","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"FileAttachment(\"IMG_8595.png\").image({width: 900})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$56","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$57","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"Data: Rainfall Atlas of Hawaiʻi (RawOriginalData_Header.csv, column704.csv, column705.csv), loaded from the class data repository. Maps: Plotly (scattermap, CARTO Positron tiles). All wrangling decisions are explained above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W58","stdlib":"2"}} 44:null