45:["$","title",null,{"children":"Assignment 4: Interaction | Joonhee Kim | Observable"}] 4d:T46a, stationMap = Plot.plot({ title: "Rainfall Measuring Stations in Hawaiʻi", width: 850, height: 480, projection: { type: "mercator", domain: { type: "MultiPoint", coordinates: [ [-160.5, 18.7], [-154.5, 22.5] ] }, inset: 15 }, marks: [ Plot.geo(hawaii, { fill: "#edf2f2", stroke: "#718096", strokeWidth: 1 }), Plot.dot(validStations, { x: "Lon_DD", y: "Lat_DD", r: 2, fill: "#64748b", fillOpacity: 0.45, title: d => `${d.Name}\nSKN: ${d.SKN}\nRecords: ${d.NumMos}` }), Plot.dot( validStations.filter(d => d.SKN === 704), { x: "Lon_DD", y: "Lat_DD", r: 7, fill: "#e45756", stroke: "white", strokeWidth: 1.5, title: "704: Hono Substation" } ), Plot.dot( validStations.filter(d => d.SKN === 705), { x: "Lon_DD", y: "Lat_DD", r: 7, fill: "#2563eb", stroke: "white", strokeWidth: 1.5, title: "705: Beretania Pump" } ) ] }) 4e:T594, makeHeatmap = (data, stationName, startYear, endYear) => { const years = d3.range( startYear, endYear + 1 ).map(String); const records = data .filter(d => d.year >= startYear && d.year <= endYear ) .map(d => ({ ...d, yearLabel: String(d.year) })); return Plot.plot({ title: stationName, width: 800, height: Math.max(350, years.length * 9 + 110), marginLeft: 65, marginBottom: 50, x: { domain: months, label: "Month", axis: "bottom", padding: 0 }, y: { domain: years, label: "Year", padding: 0, tickFormat: d => Number(d) % 5 === 0 ? d : "" }, color: { type: "linear", scheme: "YlGnBu", domain: [0, colorMax], clamp: true, legend: true, label: "Rainfall (mm)" }, marks: [ Plot.cell( records.filter(d => d.value === null), { x: "month", y: "yearLabel", fill: "#e5e7eb", inset: 0.3, title: d => `${d.year} ${d.month}: Missing` } ), Plot.cell( records.filter(d => d.value !== null), { x: "month", y: "yearLabel", fill: "value", inset: 0.3, title: d => `${d.year} ${d.month}\nRainfall: ${d.value.toFixed(1)} mm` } ) ] }); } 4f:Ta64, wireframe = svg`` 50:T5d5, ### Layout and Interactive Features The proposed dashboard consists of four main components: 1. **Filtering controls (top):** Allow analysts to select observation years, station status, and data completeness. 2. **Station map (left):** Displays the geographic locations of rainfall stations and supports direct station selection. 3. **Linked heatmaps (right):** Display monthly rainfall records for two selected stations. 4. **Data quality panel (bottom):** Allows analysts to inspect missing or invalid observations and add annotations. ### Interactive Abilities The main interactive features are: - **Direct selection:** Clicking two stations on the map selects them for comparison. - **Linked views:** Selecting stations automatically updates the corresponding heatmaps. - **Brushing:** Selecting a range of years updates both heatmaps to show the same period. - **Filtering:** Analysts can filter stations based on their observation periods or data completeness. - **Zooming and panning:** Users can explore specific geographic areas in greater detail. - **Details on demand:** Hovering over a heatmap cell displays the exact rainfall measurement, year, and month. - **Annotations:** Analysts can flag suspicious measurements and add explanatory notes. - **Export:** Analysts can export selected records and comparison results for further investigation. These interactions would help analysts explore rainfall patterns, compare stations, and evaluate data quality more efficiently. 51:T4b5, ## 8. Example Analyst Workflow An analyst wants to determine whether two nearby stations in Honolulu provide consistent historical rainfall measurements. ### Step 1. Select Stations The analyst selects Hono Substation (704) and Beretania Pump (705) directly from the station map. ### Step 2. Compare Linked Views The system automatically updates the two heatmaps to display rainfall records for the selected stations. ### Step 3. Brush a Time Period The analyst uses brushing to focus on the years 1949–1955. Both heatmaps update simultaneously to display the selected time range. ### Step 4. Inspect Rainfall Patterns The analyst identifies high rainfall in March 1951 and uses hovering to examine the exact measurements at both stations. ### Step 5. Check Data Quality The analyst inspects missing observations and potential anomalies. Suspicious values can be flagged using the annotation feature. ### Step 6. Export Results Finally, the analyst exports the selected data and annotations for additional analysis. This workflow illustrates how linked views, direct selection, brushing, details on demand, and annotations could support effective exploration of historical rainfall data. 52:[] 49:{"id":"e06f1a536168eec2","slug":"assignment-4-interaction","title":"Assignment 4: Interaction","thumbnail":"40f62e936f1c818ea5dd2e52fd63ac407a0f57acf06dadfaf7628a322b97de56","access_level":"public","create_time":"$D2026-10-26T06:23:14.922Z","update_time":"$D2026-10-26T07:34:05.213Z","view_time":null,"first_public_time":"$D2026-10-26T07:25:59.616Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6d2d009dbb13ed46","login":"joonhee-kim","name":"Joonhee Kim","avatar_url":null,"tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":192,"publish_version":192,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c8365c9919ecb5b","login":"joonhee-kim","name":"Joonhee Kim","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"6d2d009dbb13ed46","login":"joonhee-kim","name":"Joonhee Kim","avatar_url":null,"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":42,"value":"## 1. Introduction\n\nThis project explores historical rainfall measurements collected from weather stations across the Hawaiian Islands, using data from the Rainfall Atlas of Hawaiʻi.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"typeof d3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"typeof Plot","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"\n## 2. Data Loading and Cleaning","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"stations = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\",\n d => ({\n ...d,\n SKN: Number(d.SKN),\n Lat_DD: Number(d.Lat_DD),\n Lon_DD: Number(d.Lon_DD),\n NumMos: Number(d.NumMos),\n MinYear: Number(d.MinYear),\n MaxYear: Number(d.MaxYear)\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"stations.filter(d => d.SKN === 704 || d.SKN === 705)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"cleanRain = d => {\n const value = Number(d.value);\n\n return {\n year: Number(d.year),\n month: d.month,\n value:\n d.value.trim() === \"\" ||\n !Number.isFinite(value) ||\n value < 0\n ? null\n : value\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"rain704 = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\",\n cleanRain\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"rain705 = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\",\n cleanRain\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"\n### Data Cleaning Decisions\n\nThe dataset contains missing observations and some potentially invalid measurements.\n\nI converted rainfall measurements to numeric values and treated missing values (NaN) and negative rainfall measurements as missing data (null).\n\nFor example, Station 704 contains an invalid negative measurement of -25.146 mm in April 1976.\n\nI did not replace missing observations with zero because zero rainfall represents a valid measurement, whereas missing data indicates that no reliable measurement is available.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"({\n stations: stations.length,\n rain704: rain704.length,\n rain705: rain705.length,\n valid704: rain704.filter(d => d.value !== null).length,\n valid705: rain705.filter(d => d.value !== null).length\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"\n## 3. Visualization: Station Locations\n\nThe following map displays the geographic distribution of rainfall measuring stations across the Hawaiian Islands.\n\nStations 704 and 705 are highlighted to show their locations relative to other stations.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"usStates = await (\n await fetch(\n \"https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json\"\n )\n).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"hawaii = usStates.features.find(\n d => d.properties.name === \"Hawaii\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"validStations = stations.filter(d =>\n Number.isFinite(d.Lat_DD) &&\n Number.isFinite(d.Lon_DD) &&\n d.Lat_DD >= 18 &&\n d.Lat_DD <= 23 &&\n d.Lon_DD >= -161 &&\n d.Lon_DD <= -154\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"\noahuMap = Plot.plot({\n title: \"Selected Stations in Honolulu\",\n\n width: 750,\n height: 420,\n\n projection: {\n type: \"mercator\",\n domain: {\n type: \"MultiPoint\",\n coordinates: [\n [-158.30, 21.15],\n [-157.55, 21.75]\n ]\n },\n inset: 15\n },\n\n marks: [\n Plot.geo(hawaii, {\n fill: \"#edf2f2\",\n stroke: \"#718096\"\n }),\n\n Plot.dot(\n validStations.filter(d =>\n d.SKN !== 704 && d.SKN !== 705\n ),\n {\n x: \"Lon_DD\",\n y: \"Lat_DD\",\n r: 2,\n fill: \"#94a3b8\",\n fillOpacity: 0.3\n }\n ),\n\n Plot.dot(\n validStations.filter(d => d.SKN === 704),\n {\n x: \"Lon_DD\",\n y: \"Lat_DD\",\n r: 6,\n fill: \"#e45756\",\n title: \"Hono Substation (704)\"\n }\n ),\n\n Plot.dot(\n validStations.filter(d => d.SKN === 705),\n {\n x: \"Lon_DD\",\n y: \"Lat_DD\",\n r: 6,\n fill: \"#2563eb\",\n title: \"Beretania Pump (705)\"\n }\n )\n ]\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"\n### Map Style Choices\n\nI used a geographic map of the Hawaiian Islands to display the spatial distribution of rainfall measuring stations.\n\nThe map is centered on Hawaiʻi to include the major islands within a single view. I used small, semi-transparent gray markers for most stations to reduce visual clutter.\n\nStations 704 and 705 are highlighted in red and blue, respectively, to distinguish them from other stations.\n\nI also included an enlarged map of Oʻahu to provide a closer view of the two selected stations, which are located near each other in Honolulu.\n\nThese design choices make it easier to understand the geographic context of the stations before comparing their rainfall records.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"\n## 4. Visualization: Monthly Rainfall Heatmaps\n\nThe following heatmaps display monthly rainfall measurements for Hono Substation (704) and Beretania Pump (705).\n\nEach heatmap uses:\n\n- **X-axis:** Month\n- **Y-axis:** Year\n- **Color:** Monthly rainfall (mm)\n\nThe two stations cover different historical periods and contain missing observations.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"months = [\n \"Jan\", \"Feb\", \"Mar\", \"Apr\",\n \"May\", \"Jun\", \"Jul\", \"Aug\",\n \"Sept\", \"Oct\", \"Nov\", \"Dec\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"colorMax = {\n const values = [...rain704, ...rain705]\n .map(d => d.value)\n .filter(Number.isFinite);\n\n return Math.ceil(\n d3.quantile(values, 0.98) / 25\n ) * 25;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"\nheatmap704 = makeHeatmap(\n rain704,\n \"Hono Substation (704)\",\n 1904,\n 1979\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":"\nheatmap705 = makeHeatmap(\n rain705,\n \"Beretania Pump (705)\",\n 1945,\n 2007\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"\n### Heatmap Style Choices\n\nI chose heatmaps because they allow viewers to examine both seasonal rainfall patterns and changes across years.\n\nI used the YlGnBu sequential color scale, where lighter colors represent lower rainfall and darker blue colors represent higher rainfall.\n\nBoth stations share the same color range, which allows direct visual comparison of rainfall amounts.\n\nTo reduce the influence of extreme values on the color encoding, I used the pooled 98th percentile of rainfall measurements as the upper limit of the color scale.\n\nMissing observations are displayed in gray to distinguish them from valid measurements of zero rainfall.\n\nThis design helps viewers identify wet and dry periods, extreme rainfall events, and gaps in the historical records.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"\n## 5. Comparison of Overlapping Observations\n\nStations 704 and 705 have overlapping observation years from 1945 to 1979.\n\nTo compare the stations more directly, I created additional heatmaps that focus on this overlapping period.\n\nBoth heatmaps use the same years and color scale, making it easier to identify similarities and differences in monthly rainfall patterns.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"\noverlap704 = makeHeatmap(\n rain704,\n \"Station 704: Overlap (1945–1979)\",\n 1945,\n 1979\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"\noverlap705 = makeHeatmap(\n rain705,\n \"Station 705: Overlap (1945–1979)\",\n 1945,\n 1979\n)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"\n### Comparing Overlapping Rainfall Patterns\n\nThe two stations appear to show similar rainfall patterns during their overlapping period (1945–1979).\n\nIn both heatmaps, darker colors tend to appear around similar periods, suggesting that the two stations experienced relatively high rainfall during the same months. Similarly, lighter colors often appear during comparable periods, indicating relatively low rainfall.\n\nHowever, the patterns are not identical. Some months show differences in color intensity, suggesting variations in rainfall amounts between the two stations. Additionally, missing observations, represented by gray cells, make direct comparisons difficult for certain periods.\n\nOverall, the two heatmaps suggest that the nearby stations show generally consistent rainfall patterns, although some differences and gaps in the records remain.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"\n## 6. Comparing Geographically Distant Stations\n\nI would expect rainfall patterns to differ between geographically distant stations due to differences in elevation and their locations on the windward or leeward sides of the islands. These geographic factors could lead to differences in rainfall amounts and seasonal patterns, which would be reflected in the heatmaps.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"\n## 7. Design Interaction: Rainfall Data Explorer\n\nI propose an interactive visualization system called Rainfall Data Explorer, designed for analysts working with historical rainfall records.\n\nThe system would provide a station map, two linked rainfall heatmaps, filtering controls, and a data quality panel.\n\nThe following sketch illustrates the proposed layout and interactive features.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$50","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"$51","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"2"}} 44:null