45:["$","title",null,{"children":"Assignment 4 - TJ Acasio | Tyler Jordan Acasio | Observable"}] 4d:T5a0,const hoverText = s => `${s.name} (SKN ${s.skn})
${s.minYear}–${s.maxYear}
${s.numMos} months of records
${s.status}`; const groups = [ { label: "Current", color: "#2b6cb0", data: stations.filter(s => s.status === "Current") }, { label: "Discontinued", color: "#a0a0a0", data: stations.filter(s => s.status !== "Current") } ]; const picked = stations.filter(s => s.skn === 704 || s.skn === 705); const mapTraces = [ ...groups.map(g => ({ type: "scattermap", mode: "markers", name: g.label, lat: g.data.map(s => s.lat), lon: g.data.map(s => s.lon), marker: { size: 5, color: g.color, opacity: 0.7 }, hovertext: g.data.map(hoverText), hoverinfo: "text" })), { type: "scattermap", mode: "markers+text", name: "Heatmap stations", lat: picked.map(s => s.lat), lon: picked.map(s => s.lon), text: picked.map(s => s.name), textposition: "top right", marker: { size: 12, color: "#d62728" }, hovertext: picked.map(hoverText), hoverinfo: "text" } ]; const mapDiv = document.createElement("div"); Plotly.newPlot(mapDiv, mapTraces, { title: { text: "Rainfall Stations in Hawaiʻi
^{2,248 stations · red = stations used in the heatmaps}" }, map: { style: "carto-positron", center: { lat: 20.6, lon: -157.4 }, zoom: 6.2 }, height: 600, margin: { l: 0, r: 0, t: 70, b: 0 }, legend: { x: 0.01, y: 0.01, bgcolor: "rgba(255,255,255,0.8)" } }); display(mapDiv);4e:T4e5,const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"]; function toGrid(rows) { const years = [...new Set(rows.map(d => +d.year))].sort((a, b) => a - b); const z = years.map(y => months.map(m => { const r = rows.find(d => +d.year === y && d.month === m); const v = r ? +r.value : NaN; return Number.isFinite(v) && v >= 0 ? v : null; })); return { years, z }; } function rainHeatmap(rows, title) { const { years, z } = toGrid(rows); const div = document.createElement("div"); Plotly.newPlot(div, [{ type: "heatmap", x: months, y: years, z: z, zmin: 0, zmax: 300, colorscale: [ [0, "#f7fbff"], [0.25, "#c6dbef"], [0.5, "#6baed6"], [0.75, "#2171b5"], [1, "#08306b"] ], colorbar: { title: { text: "Rainfall (mm)" } }, hoverongaps: false, hovertemplate: "%{x} %{y}
%{z:.1f} mm" }], { title: { text: title, y: 0.97 }, xaxis: { side: "top", tickangle: 0, tickfont: { size: 10 } }, yaxis: { range: [2007.5, 1903.5], dtick: 10, title: { text: "Year" } }, // shared year range plot_bgcolor: "#d9d9d9", // gray = missing data height: 720, width: 480, margin: { t: 120 } }); return div; }4f:T663,## Style Choices ### Map I plotted all 2,248 stations on the `carto-positron` base map because it's light and keeps the focus on the points. The map is zoomed out to show all the main islands. Current stations are blue and discontinued ones are gray, and the two heatmap stations are larger, red, and labeled. Hovering over a station shows its name, years, and number of records. ### Heatmaps Each row is one year, with months across the top. I used a light-to-dark blue scale, since blue reads as rain and darker means wetter. Both heatmaps use the same 0–300 mm scale so colors mean the same amount at both stations. I capped it at 300 because most months are under 100 mm. Missing and negative values are gray so they don't look like dry months. Both heatmaps also use the same year range, so the overlapping years line up. ## Comparing the Overlapping Period The stations overlap from 1945 to 1979 and look very consistent. The same wet months stand out on both, like January 1949 and March 1958, and both have wetter winters and drier summers. The correlation between the two stations is about 0.92. The main difference is July to October 1978, when Hono Substation shows much more rain than Beretania Pump, which might be a recording error. ## Stations Far Apart Two distant stations would probably look much less alike. A windward or mountain station would be much wetter than one in Honolulu, and its seasons might differ too. Big storms or droughts might still show up on both, which would show how widespread they were. But distant stations couldn't be used to check each other's accuracy the way nearby stations can.50:T676,## Design Interaction ### 1. Layout The system fits on one laptop screen. Filters run across the top. The station map is on the left and the heatmaps for the selected stations are on the right, so the analyst can pick stations and see their data side by side. A timeline along the bottom shows how many stations were reporting each year. ### 2. Interactive abilities 1. **Dynamic query filters:** island, station search, year range, and status filter every view at once. 2. **Direct selection:** clicking or lassoing stations on the map adds their heatmaps on the right. 3. **Details on demand:** hovering over a station shows its name and years, and hovering over a heatmap cell shows the exact rainfall. 4. **Linked views:** the heatmaps share the same year axis and color scale, so the years where stations overlap line up and can be compared directly. 5. **Annotation:** clicking a cell lets the analyst add a note or flag a value as bad, like a negative rainfall. 6. **Brushing:** dragging across a range of years on the timeline filters the map and the heatmaps to those years. ### 3. Example workflow An analyst wants to check if the Hono Substation data is reliable. They filter to Oʻahu, then lasso Hono Substation and the nearby Beretania Pump on the map. Both heatmaps appear on the right, and the analyst brushes 1945 to 1979 on the timeline to focus on the years both stations were running. The heatmaps look very similar, which suggests the data is consistent. The analyst notices that Hono Substation is much wetter than Beretania Pump in July to October 1978, so they click those cells and add a note marking them as a possible error.51:[{"id":"bef603d7c3fa6feb8e8f565b685d3332ff936874ed95bffb9720b0e72231e53571e13b748d16c08f9053122299402c23fa92252edf9769715315ff01e9dd4f76","href":"https://static.observableusercontent.com/files/bef603d7c3fa6feb8e8f565b685d3332ff936874ed95bffb9720b0e72231e53571e13b748d16c08f9053122299402c23fa92252edf9769715315ff01e9dd4f76","name":"column704.csv","type":"text/csv","lastModified":1793308996256,"size":14410},{"id":"96cd3e0a2a048957c2296d641a3f6271aafdd8332521de9a5c05fa2695a2a6eb503cfefaeafe7db5e102e7e70d7caf644548c7ceeb31623cbb54d6b85ebdf937","href":"https://static.observableusercontent.com/files/96cd3e0a2a048957c2296d641a3f6271aafdd8332521de9a5c05fa2695a2a6eb503cfefaeafe7db5e102e7e70d7caf644548c7ceeb31623cbb54d6b85ebdf937","name":"column705.csv","type":"text/csv","lastModified":1793309005178,"size":11751},{"id":"0032ad584a5639e0bb1efba9dbd053a59ac5064292e115faf5d9497b16de9d08f9281f28f3b475dd3d30c03e613677ec79df5d18e6c1146c4f09b291912026c5","href":"https://static.observableusercontent.com/files/0032ad584a5639e0bb1efba9dbd053a59ac5064292e115faf5d9497b16de9d08f9281f28f3b475dd3d30c03e613677ec79df5d18e6c1146c4f09b291912026c5","name":"RawOriginalData_Header.csv","type":"text/csv","lastModified":1793308721911,"size":231897},{"id":"914534d7ea540c4d1c770227cd9918dcaf9e661b5a311cc5bbcad37f818a8bf095f6bb30f2e20a7c2a7b881ef4388bf0a74599ad962df41954586a2e76b85d98","href":"https://static.observableusercontent.com/files/914534d7ea540c4d1c770227cd9918dcaf9e661b5a311cc5bbcad37f818a8bf095f6bb30f2e20a7c2a7b881ef4388bf0a74599ad962df41954586a2e76b85d98","name":"IMG_2731.jpg","type":"image/jpeg","lastModified":1793335139000,"size":974371}] 49:{"id":"116819e7cdbeb404","slug":"assignment-4-tj-acasio","title":"Assignment 4 - TJ Acasio","thumbnail":"4151b49e6d5df34c3d0ad2c3454ba52f8e298de2919442e6ce439173b3d56937","access_level":"public","create_time":"$D2026-10-29T21:17:51.208Z","update_time":"$D2026-10-30T08:43:09.391Z","view_time":null,"first_public_time":"$D2026-10-30T08:37:51.627Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"097d1added7e3ca8","login":"tyler-jordan-acasio","name":"Tyler Jordan Acasio","avatar_url":"https://avatars-next.observableusercontent.com/d16d5f61ff4df3645e1bea461ec28b6315a7e201282394a7876e18c8b31b48d5","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":34,"publish_version":34,"role":null,"authored":false,"authors":[{"type":"individual","id":"f200503d43213b14","login":"tyler-jordan-acasio","name":"Tyler Jordan Acasio","avatar_url":"https://avatars-next.observableusercontent.com/d16d5f61ff4df3645e1bea461ec28b6315a7e201282394a7876e18c8b31b48d5","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"097d1added7e3ca8","login":"tyler-jordan-acasio","name":"Tyler Jordan Acasio","avatar_url":"https://avatars-next.observableusercontent.com/d16d5f61ff4df3645e1bea461ec28b6315a7e201282394a7876e18c8b31b48d5","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 - TJ Acasio","cells":[{"id":1,"value":"# Assignment 4 - TJ Acasio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import Plotly from \"https://cdn.jsdelivr.net/npm/plotly.js-dist-min/+esm\";\nconst stations = (await FileAttachment(\"RawOriginalData_Header.csv\").csv()).map(d => ({\n skn: parseFloat(d.SKN),\n name: d.Name,\n lat: +d.Lat_DD,\n lon: +d.Lon_DD,\n numMos: +d.NumMos,\n minYear: +d.MinYear,\n maxYear: +d.MaxYear,\n status: d.StationStatus\n}));\n\nconst rain704 = await FileAttachment(\"column704.csv\").csv();\nconst rain705 = await FileAttachment(\"column705.csv\").csv();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const row = document.createElement(\"div\");\nrow.style.display = \"flex\"\nrow.style.gap = \"20px\";\nrow.append(\n rainHeatmap(rain704, \"Hono Substation (SKN 704)
^{Monthly rainfall, 1904–1979 · gray = missing}\"),\n rainHeatmap(rain705, \"Beretania Pump (SKN 705)
^{Monthly rainfall, 1945–2007 · gray = missing}\")\n);\ndisplay(row);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"display(await FileAttachment(\"IMG_2731.jpg\").image({width: 900}));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$50","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 44:null