45:["$","title",null,{"children":"Assignment 4: Interaction | Aris Carlos | Observable"}] 4d:T46d,stationMap = { const div = document.createElement("div"); const mapWidth = Math.min(width, 950); const trace = { type: "scattermap", mode: "markers", lat: stations.map(d => d.lat), lon: stations.map(d => d.lon), text: stations.map(d => `${d.Name}
` + `SKN: ${d.SKN}
` + `Elevation: ${d.ElevFT} ft
` + `Records: ${d.NumMos} months` ), hovertemplate: "%{text}
Lat: %{lat:.3f}
Lon: %{lon:.3f}", marker: { size: 6, color: "#12566C", opacity: 0.75 } }; const layout = { title: { text: "Historical Rainfall Station Locations in Hawaiʻi" }, width: mapWidth, height: 570, margin: { t: 55, r: 0, b: 0, l: 0 }, map: { style: "outdoors", center: { lat: 20.6, lon: -157.4 }, zoom: 6.5 + Math.log2(mapWidth / 950), bearing: 0, pitch: 0 }, dragmode: "pan" }; await Plotly.newPlot(div, [trace], layout, { responsive: true, displaylogo: false, scrollZoom: true }); invalidation.then(() => Plotly.purge(div)); return div; }4e:T9ef,rainfallHeatmaps = { const div = document.createElement("div"); const makeTrace = (rows, xaxis) => ({ type: "heatmap", x: months, y: heatmapYears, z: makeRainMatrix(rows), xaxis, yaxis: "y", coloraxis: "coloraxis", zsmooth: false, connectgaps: false, hoverongaps: false, hovertemplate: "%{y:.0f} · %{x}
Rainfall: %{z:.2f} mm" }); const layout = { title: { text: "Monthly Rainfall at Two Honolulu Stations" }, width: Math.min(width, 1000), height: 900, margin: { t: 110, r: 100, b: 65, l: 65 }, plot_bgcolor: "#D9D9D9", xaxis: { domain: [0, 0.44], type: "category", categoryorder: "array", categoryarray: months, tickangle: -45, showgrid: false, title: { text: "Month" } }, xaxis2: { domain: [0.54, 0.98], type: "category", categoryorder: "array", categoryarray: months, tickangle: -45, showgrid: false, title: { text: "Month" } }, yaxis: { title: { text: "Year" }, range: [ heatmapYears[0] - 0.5, heatmapYears[heatmapYears.length - 1] + 0.5 ], tick0: 1910, dtick: 10, tickformat: "d", showgrid: false, zeroline: false }, coloraxis: { colorscale: [ [0.00, "#F7FBFF"], [0.20, "#C6DBEF"], [0.40, "#6BAED6"], [0.60, "#2171B5"], [1.00, "#08306B"] ], reversescale: false, cmin: 0, cmax: 500, colorbar: { title: { text: "Monthly rainfall
(mm)" }, thickness: 15, len: 0.75 } }, annotations: [ { xref: "paper", yref: "paper", x: 0.22, y: 1.06, text: "704 - Hono Substation", showarrow: false, xanchor: "center" }, { xref: "paper", yref: "paper", x: 0.76, y: 1.06, text: "705 - Beretania Pump", showarrow: false, xanchor: "center" }, { xref: "paper", yref: "paper", x: 0, y: 1.13, text: "Gray = no valid measurement; includes years outside each file’s span", showarrow: false, xanchor: "left", font: { size: 11, color: "#555555" } } ] }; await Plotly.newPlot( div, [ makeTrace(rain704, "x"), makeTrace(rain705, "x2") ], layout, { responsive: true, displaylogo: false } ); invalidation.then(() => Plotly.purge(div)); return div; }4f:Tc99,**Rainfall Station Map** For my rainfall station map visualization, I chose `outdoors` because it provides geographical detail and terrain information, which gives viewers more context about where the rainfall stations are located. When observing where the stations were more densely clustered in my initial visualization, I opened Google Maps and roughly compared the plotted locations to their corresponding locations there. From this comparison, I noticed that many stations appeared to be located in mountainous areas, which motivated me to use a map style that shows more terrain detail. I initially used `scattergeo`, but the island outlines were too simplified and did not show Lānaʻi and Kahoʻolawe correctly, despite both islands having rainfall stations. Switching to `scattermap` provided a more detailed map that users can zoom into to explore individual islands and the terrain surrounding the stations. When experimenting with marker styles, I found that larger, fully opaque markers made the visualization too busy, especially where many stations were clustered together. I settled on a marker size of 6 and an opacity of 0.75 to keep the stations visible while reducing how much they cover each other and the underlying map. I chose `#12566C` because it offered a balance between being visible against the map and being easier on viewers’ eyes compared to the magenta I tried earlier. I framed the initial view to include all the station locations across the main Hawaiian Islands. Lastly, I added a title and hover information so users can view each station’s name, identifier, elevation, coordinates, and number of monthly records without overcrowding the map with labels. **Rainfall Heatmap** For my rainfall heatmap visualization, I placed the two stations side by side so viewers can compare their rainfall patterns more easily. I arranged the months from January through December along the horizontal axis and placed the years along a shared vertical axis, with earlier years at the bottom and later years at the top. Although the stations cover different year spans, keeping the same year positions allows viewers to compare matching months and years directly. When interacting with the heatmaps, users can hover over a cell to see its month, year, and rainfall value, then move their cursor horizontally to the corresponding month in the other heatmap. Since the timelines are aligned, staying at the same vertical position helps users compare values from the same year. I chose a light-to-dark blue color scale, where lighter colors represent lower rainfall and darker colors represent higher rainfall. I also used the same range of 0–500 mm for both heatmaps, which covers the valid measurements from both stations and ensures that the same color represents the same amount of rainfall in either chart. For missing or invalid measurements, including negative rainfall values, I left the cells gray rather than replacing them with zero, since that would incorrectly suggest that no rain occurred. The gray areas also show years outside each station’s available data span. Lastly, I included station labels, axis labels, and a shared color legend to make the comparison easier to follow.50:T42c,When comparing the overlapping period of 1945–1979, the two stations seem to show generally consistent rainfall patterns, although their measurements do not always closely match. From observing the heatmaps, May through September appear to be the drier months, while November through March appear to be the wetter months. The shared color scale and aligned timeline make it easier to identify similar patterns between the stations. For example, in March 1951, station 704 recorded 405.38 mm and station 705 recorded 421.13 mm, showing that both stations experienced similarly high rainfall that month. However, in January 1957, station 704 recorded 344.93 mm while station 705 recorded 158.75 mm, which is a substantial difference despite the stations being relatively close together. To me, these observations suggest that the stations share broad seasonal patterns, but being nearby does not necessarily mean they will receive the same amount of rainfall each month. I also avoided treating gray cells as dry months, since those represent unavailable measurements.51:T4a9,If we were presented with two heatmaps from stations that are distant from each other, I think we could observe differences in their overall rainfall amounts, seasonal patterns, and whether wetter or drier periods occur at the same time. I would especially expect differences depending on the terrain surrounding each station, such as comparing a coastal station with one in a mountainous area. This relates to something I learned about how moist air rises when it encounters mountains, cools, and can form clouds and rain, which is known as orographic lifting. This helps explain why the windward side of Oʻahu is generally wetter, while the leeward side is generally drier. Depending on their locations, the heatmaps could therefore show consistently darker cells at a wetter windward station and lighter cells at a drier leeward station. However, I would not assume that every mountain station receives more rainfall than every coastal station, since elevation and exposure to prevailing winds also matter. I would compare the same years using the same color scale so differences in the visualizations reflect the rainfall measurements rather than different time periods or chart settings.52:Tdad,**1. Basic Layout** For my interactive visualization system, I would place the station map in the upper-left area and a station information panel to its right. This allows analysts to explore station locations while checking details such as elevation, available years, and the number of valid or unavailable measurements. Below these components, I would place two heatmaps side by side with an aligned timeline and a shared rainfall color scale. I would place the station search along the top with a filter button next to it, where analysts could narrow down the stations by island, geographic area, elevation range, and record availability. Island and area filters would require assigning those categories using station coordinates and geographic boundaries. I would also include station A/B selection, an “Overlap only” option, and a reset button along the top, with a year-range slider below the heatmaps. Since this system is intended for a laptop, I would limit the main comparison to two stations at a time to keep the charts readable. **2. Interactive Abilities** I would use direct selection to allow analysts to click stations on the map and assign them to comparison slots A and B. Through linked views, selecting a station would update its heatmap and station information. Analysts could also zoom and pan the map to inspect areas where markers overlap. The station search and filter button would help analysts find stations that meet specific criteria, such as stations on Oʻahu within a certain elevation range. Applying these filters would update the stations shown on the map, making it easier to focus on relevant locations. For the heatmaps, I would include linked highlighting, where hovering over one cell highlights the corresponding month and year in both charts. A tooltip would provide details on demand by showing both rainfall values, or indicating when a measurement is unavailable. Analysts could adjust the year-range slider to filter both heatmaps together, while the “Overlap only” option would focus on the intersection of the stations’ record spans without removing gaps within that period. Although I did not draw a separate annotations field in my sketch, I would make annotations available through a panel that opens when an analyst clicks a heatmap cell. This panel would show the original value and allow the analyst to attach a note about an unusual measurement or missing record. To me, this would keep the main layout less crowded while still allowing analysts to document observations without changing the source data. **3. Example Analyst Workflow** An analyst could begin by opening the filter menu and selecting Oʻahu to narrow down the stations shown on the map. They could then search for Hono Substation and Beretania Pump and assign them to stations A and B. The system would display their locations, station information, and rainfall heatmaps. The analyst could enable “Overlap only” to focus on 1945–1979 and compare the seasonal patterns. After noticing a difference in January 1957, they could hover over that month to view 344.93 mm at station 704 and 158.75 mm at station 705. They could then click the cell to inspect the original value and add an annotation identifying the difference for further investigation. If they encountered gray cells, such as those at station 705 during 1946–1948, they could inspect them to confirm that the source measurements were unavailable rather than assume that no rainfall occurred.53:[{"id":"87527f6456534f4b7899ff535f6c0b5f139b31b7b2be412fc6a85d3d4fed0fecb2b683d4fb7eb55144207cc19040d1b45051f14dbdf310ef247dd38e27d022d5","href":"https://static.observableusercontent.com/files/87527f6456534f4b7899ff535f6c0b5f139b31b7b2be412fc6a85d3d4fed0fecb2b683d4fb7eb55144207cc19040d1b45051f14dbdf310ef247dd38e27d022d5","name":"image.png","type":"image/png","lastModified":1793351610888,"size":8794},{"id":"87527f6456534f4b7899ff535f6c0b5f139b31b7b2be412fc6a85d3d4fed0fecb2b683d4fb7eb55144207cc19040d1b45051f14dbdf310ef247dd38e27d022d5","href":"https://static.observableusercontent.com/files/87527f6456534f4b7899ff535f6c0b5f139b31b7b2be412fc6a85d3d4fed0fecb2b683d4fb7eb55144207cc19040d1b45051f14dbdf310ef247dd38e27d022d5","name":"image (2).png","type":"image/png","lastModified":1793351619765,"size":8794},{"id":"9c621c05c47f3e76ed50763fedc473ee875ba828ce0feddd627006068af61f242e8e4528d5c3d6926fd39a9d13345007fb237306a6a1e1aa05488d62ab6187fa","href":"https://static.observableusercontent.com/files/9c621c05c47f3e76ed50763fedc473ee875ba828ce0feddd627006068af61f242e8e4528d5c3d6926fd39a9d13345007fb237306a6a1e1aa05488d62ab6187fa","name":"RainfallSystemDesignImproved.jpg","type":"image/jpeg","lastModified":1793354042795,"size":530154}] 49:{"id":"c174193956b9039f","slug":"assignment-4-interaction","title":"Assignment 4: Interaction","thumbnail":"b64d1cb9621dc471b6986aeef2ae40a64ac6db6a1c168db93bc3330e1827212d","access_level":"public","create_time":"$D2026-10-30T05:27:56.626Z","update_time":"$D2026-10-30T09:54:16.488Z","view_time":null,"first_public_time":"$D2026-10-30T09:55:38.416Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"405cae645c2e1d6b","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":199,"publish_version":199,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d286dabeed650d","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"405cae645c2e1d6b","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","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":2,"value":"### Aris Carlos - ICS 684","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## Exploring Historical Rainfall in Hawaiʻi","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"### Data Inspection and Cleaning","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import Plotly from \"npm:plotly.js-dist-min\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"stationsRaw = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"rain704Raw = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"rain705Raw = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"stationsNumCoords = stationsRaw.map(d => ({\n ...d,\n lat: d.Lat_DD.trim() === \"\" ? NaN : Number(d.Lat_DD),\n lon: d.Lon_DD.trim() === \"\" ? NaN : Number(d.Lon_DD)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"stations = stationsNumCoords.filter(d =>\n Number.isFinite(d.lat) &&\n Number.isFinite(d.lon) &&\n d.lat >= -90 &&\n d.lat <= 90 &&\n d.lon >= -180 &&\n d.lon <= 180\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"cleanRainfall = rows => rows.map(d => {\n const raw = d.value.trim();\n const numeric = raw === \"\" ? NaN : Number(raw);\n\n return {\n year: Number(d.year),\n month: d.month.trim(),\n value: Number.isFinite(numeric) && numeric >= 0\n ? numeric\n : null,\n rawValue: raw\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"rain704 = cleanRainfall(rain704Raw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"rain705 = cleanRainfall(rain705Raw)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"months = [\"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":31,"value":"heatmapYears = d3.range(\n d3.min([...rain704, ...rain705], d => d.year),\n d3.max([...rain704, ...rain705], d => d.year) + 1\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"makeRainMatrix = rows => {\n const lookup = d3.index(rows, d => d.year, d => d.month);\n\n return heatmapYears.map(year =>\n months.map(month =>\n lookup.get(year)?.get(month)?.value ?? null\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Station Locations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"### Rainfall Heatmaps","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"### Explanations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"#### Style Choices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"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":"#### Rainfall Heatmap Visual Comparison","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$50","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"FileAttachment(\"image (2).png\").image()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"#### Comparing Distant Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$51","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"### Interactive System Design","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"FileAttachment(\"RainfallSystemDesignImproved.jpg\").image()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"2"}} 44:null