44:["$","title",null,{"children":"Assignment 4: Interaction | Christian Moore | Observable"}] 4c:T532,### 3. Explain style choices you have made for the map and the heatmap graphs, i.e. how did you frame the map, what color scale you chose for the heatmap and why, etc. ### Answer For the map, I used a light basemap and small gray markers for the full set of stations. This keeps the focus on the station locations while reducing visual clutter. I highlighted the two stations of interest in red and orange and displayed their labels to distinguish them from the remaining stations. I framed the map around the Hawaiian island chain so the geographic distribution of the stations is visible rather than focusing only on Oʻahu. For the heatmaps, I used the YlGnBu sequential color scale, which progresses from lighter to darker colors as rainfall increases. A sequential scale is suitable because rainfall is a nonnegative quantitative measurement and the main goal is to distinguish lower and higher values. I also used the same rainfall scale for both stations. This is important because independently scaled heatmaps could make similar colors represent different rainfall amounts. Keeping a common minimum of 0 mm and a common maximum makes the colors directly comparable. Finally, I kept the months in calendar order and used blank cells for missing or invalid measurements so that data gaps are not mistaken for dry periods.4d:T4ac,### 4. Visually compare the overlapping period of time between the two stations. Do the stations seem to show consistency between them? How can you tell? ### Answer The two stations have an overlapping calendar-year period from 1945 to 1979, although not every month within that period has a valid measurement at both stations. The heatmaps suggest that the stations can show similar monthly rainfall patterns. For example, in 1945, both stations recorded relatively high rainfall in April and lower values in May and June. Hono Substation recorded 127.508 mm in April, compared with 132.080 mm at Beretania Pump. In July, the respective readings were 65.024 mm and 68.580 mm. Their October readings were also close, at 15.494 mm and 16.002 mm. These similarities support the idea that the nearby stations can capture common rainfall patterns. However, I would not conclude that their records are identical or interchangeable based on this visual evidence alone. Some months have missing measurements, and the stations can differ in the amounts they record. The paired-observation summary provides an additional way to assess how consistently the stations move together across the full period.4e:T503,### 5. What kind of observations do you think could be made if we were presented with 2 heatmaps from stations that are distant from each other? ### Answer Comparing two stations that are geographically distant could reveal differences in rainfall patterns across the Hawaiian Islands. For example, a station on a windward slope might receive more rainfall than a station on a leeward side, where the terrain creates a rain-shadow effect. Differences in elevation, local topography, prevailing winds, and exposure to weather systems could also contribute to differences in rainfall amounts. The heatmaps might reveal that one station experiences greater rainfall throughout the year, that seasonal patterns differ between locations, or that particular years contain high-rainfall events at one station but not the other. These observations could help analysts investigate geographic variations in rainfall and identify periods that deserve further study. However, a fair comparison would still require aligning the stations by year and month, accounting for missing observations, and considering their different measurement periods. Differences in the heatmaps should not automatically be attributed to geographic location without checking data quality and station characteristics.4f:T977,let monthOrder = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec" ]; let monthLookup = new Map([ ["jan", "Jan"], ["feb", "Feb"], ["mar", "Mar"], ["apr", "Apr"], ["may", "May"], ["jun", "Jun"], ["jul", "Jul"], ["aug", "Aug"], ["sep", "Sept"], ["sept", "Sept"], ["oct", "Oct"], ["nov", "Nov"], ["dec", "Dec"] ]); let normalizeRainMonth = month => monthLookup.get(String(month ?? "").trim().toLowerCase()) ?? null; let makeStationHeatmap = (rawRows, metadata) => { let cleanedRows = rawRows.map(d => { let yearText = String(d.year ?? "").trim(); let year = yearText === "" ? NaN : Number(yearText); let month = normalizeRainMonth(d.month); let rawValue = String(d.value ?? "").trim(); let parsedValue = rawValue === "" || rawValue.toLowerCase() === "nan" ? null : Number(rawValue); let value = parsedValue !== null && Number.isFinite(parsedValue) && parsedValue >= 0 ? parsedValue : null; return { year: year, month: month, value: value, rawValue: rawValue }; }).filter(d => Number.isInteger(d.year) && monthOrder.includes(d.month) ); // Use the header's year range so missing years are not skipped. let minYear = Number(metadata.MinYear); let maxYear = Number(metadata.MaxYear); let years = d3.range(minYear, maxYear + 1); // Map each available observation to its year and month. let valuesByKey = new Map( cleanedRows.map(d => [ `${d.year}|${d.month}`, d.value ]) ); // Each row represents one month; each column represents one year. // Missing records, NaN values, and negative values all become null. let z = monthOrder.map(month => years.map(year => { let key = `${year}|${month}`; return valuesByKey.has(key) ? valuesByKey.get(key) : null; }) ); return { name: metadata.Name, skn: Number(metadata.SKN), minYear: minYear, maxYear: maxYear, years: years, z: z, cleanedRows: cleanedRows }; }; let station704Meta = stationHeader.find( d => Number(d.SKN) === 704 ); let station705Meta = stationHeader.find( d => Number(d.SKN) === 705 ); let station704Heatmap = makeStationHeatmap( station704Raw, station704Meta ); let station705Heatmap = makeStationHeatmap( station705Raw, station705Meta );50:T455,let countMissingCells = heatmap => heatmap.z.flat().filter(value => value === null).length; let findNegativeReadings = heatmap => heatmap.cleanedRows.filter(d => d.rawValue !== "" && d.rawValue.toLowerCase() !== "nan" && Number.isFinite(Number(d.rawValue)) && Number(d.rawValue) < 0 ).map(d => ({ station: heatmap.name, year: d.year, month: d.month, originalValue: d.rawValue, cleanedValue: d.value })); let dataValidationSummary = { "Header records loaded": stationHeader.length, "SKN 704 monthly records loaded": station704Raw.length, "SKN 705 monthly records loaded": station705Raw.length, "SKN 704 heatmap grid": `${station704Heatmap.years.length} years x 12 months`, "SKN 705 heatmap grid": `${station705Heatmap.years.length} years x 12 months`, "SKN 704 null cells": countMissingCells(station704Heatmap), "SKN 705 null cells": countMissingCells(station705Heatmap), "SKN 704 negative readings": findNegativeReadings(station704Heatmap), "SKN 705 negative readings": findNegativeReadings(station705Heatmap) }; display(dataValidationSummary);51:Ta7d,let mapStations = stationHeader.map(d => ({ name: d.Name, skn: Number(d.SKN), lat: Number.parseFloat(d.Lat_DD), lon: Number.parseFloat(d.Lon_DD) })).filter(d => Number.isFinite(d.skn) && Number.isFinite(d.lat) && Number.isFinite(d.lon) ); let otherMapStations = mapStations.filter(d => d.skn !== 704 && d.skn !== 705 ); let honoMapStation = mapStations.find(d => d.skn === 704); let beretaniaMapStation = mapStations.find(d => d.skn === 705); let stationMapData = [ { type: "scattermap", mode: "markers", name: "Other rainfall stations", lon: otherMapStations.map(d => d.lon), lat: otherMapStations.map(d => d.lat), text: otherMapStations.map(d => d.name), customdata: otherMapStations.map(d => d.skn), marker: { size: 5, color: "blue", opacity: 0.65 }, hovertemplate: "%{text}
" + "SKN: %{customdata}
" + "Latitude: %{lat:.5f}
" + "Longitude: %{lon:.5f}" + "" }, { type: "scattermap", mode: "markers+text", name: "Hono Substation (704)", lon: [honoMapStation.lon], lat: [honoMapStation.lat], text: [honoMapStation.name], customdata: [honoMapStation.skn], textposition: "top left", marker: { size: 13, color: "#dc2626", line: { color: "#ffffff", width: 1.5 } }, hovertemplate: "%{text}
" + "SKN: %{customdata}
" + "Latitude: %{lat:.5f}
" + "Longitude: %{lon:.5f}" + "" }, { type: "scattermap", mode: "markers+text", name: "Beretania Pump (705)", lon: [beretaniaMapStation.lon], lat: [beretaniaMapStation.lat], text: [beretaniaMapStation.name], customdata: [beretaniaMapStation.skn], textposition: "bottom right", marker: { size: 13, color: "#f59e0b", line: { color: "#ffffff", width: 1.5 } }, hovertemplate: "%{text}
" + "SKN: %{customdata}
" + "Latitude: %{lat:.5f}
" + "Longitude: %{lon:.5f}" + "" } ]; let stationMapLayout = { title: { text: "Rainfall Measurement Stations in Hawaiʻi" }, map: { style: "carto-positron", center: { lon: -157.5, lat: 20.5 }, zoom: 5.2 }, height: 620, margin: { top: 55, bottom: 10, left: 0, right: 0 }, legend: { orientation: "h", x: 0.02, y: 0.01 } }; let stationMapDiv = DOM.element("div"); Plotly.newPlot( stationMapDiv, stationMapData, stationMapLayout, { responsive: true } ); display(stationMapDiv);52:T9c1,let heatmapTrace704 = [{ type: "heatmap", x: station704Heatmap.years, y: monthOrder, z: station704Heatmap.z, zmin: 0, zmax: sharedRainfallMax, colorscale: "YlGnBu", hoverongaps: false, colorbar: { title: { text: "Rainfall (mm)" }, thickness: 12, tickformat: ".0f" }, hovertemplate: "Year: %{x:.0f}
" + "Month: %{y}
" + "Rainfall: %{z:.1f} mm" + "" }]; let heatmapTrace705 = [{ type: "heatmap", x: station705Heatmap.years, y: monthOrder, z: station705Heatmap.z, zmin: 0, zmax: sharedRainfallMax, colorscale: "YlGnBu", hoverongaps: false, colorbar: { title: { text: "Rainfall (mm)" }, thickness: 12, tickformat: ".0f" }, hovertemplate: "Year: %{x:.0f}
" + "Month: %{y}
" + "Rainfall: %{z:.1f} mm" + "" }]; let makeHeatmapLayout = (title, minYear) => ({ title: { text: title }, xaxis: { title: "Year", type: "linear", dtick: 10, tick0: Math.ceil(minYear / 10) * 10, tickformat: ".0f", showgrid: false, automargin: true }, yaxis: { title: "Month", type: "category", categoryorder: "array", categoryarray: monthOrder, autorange: "reversed", automargin: true }, height: 520, margin: { top: 65, bottom: 55, left: 65, right: 35 }, paper_bgcolor: "#ffffff", plot_bgcolor: "#f1f5f9", showlegend: false }); let heatmapLayout704 = makeHeatmapLayout( "Hono Substation (SKN 704)", station704Heatmap.minYear ); let heatmapLayout705 = makeHeatmapLayout( "Beretania Pump (SKN 705)", station705Heatmap.minYear ); // One shared container with two equal-width columns. let heatmapsContainer = DOM.element("div"); heatmapsContainer.style.display = "grid"; heatmapsContainer.style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))"; heatmapsContainer.style.gap = "12px"; heatmapsContainer.style.width = "100%"; let heatmap704Div = DOM.element("div"); let heatmap705Div = DOM.element("div"); heatmap704Div.style.minWidth = "0"; heatmap705Div.style.minWidth = "0"; heatmapsContainer.appendChild(heatmap704Div); heatmapsContainer.appendChild(heatmap705Div); display(heatmapsContainer); await Promise.all([ Plotly.newPlot( heatmap704Div, heatmapTrace704, heatmapLayout704, { responsive: true } ), Plotly.newPlot( heatmap705Div, heatmapTrace705, heatmapLayout705, { responsive: true } ) ]);53:T7c0,let station704ValuesByKey = new Map( station704Heatmap.cleanedRows.map(d => [ `${d.year}|${d.month}`, d.value ]) ); let station705ValuesByKey = new Map( station705Heatmap.cleanedRows.map(d => [ `${d.year}|${d.month}`, d.value ]) ); let overlapStartYear = Math.max( station704Heatmap.minYear, station705Heatmap.minYear ); let overlapEndYear = Math.min( station704Heatmap.maxYear, station705Heatmap.maxYear ); let pairedRainfall = d3.range( overlapStartYear, overlapEndYear + 1 ).flatMap(year => monthOrder.map(month => ({ year: year, month: month, value704: station704ValuesByKey.get(`${year}|${month}`), value705: station705ValuesByKey.get(`${year}|${month}`) })) ).filter(d => Number.isFinite(d.value704) && Number.isFinite(d.value705) ); let mean704 = d3.mean(pairedRainfall, d => d.value704); let mean705 = d3.mean(pairedRainfall, d => d.value705); let correlationNumerator = d3.sum( pairedRainfall, d => (d.value704 - mean704) * (d.value705 - mean705) ); let squaredDifferences704 = d3.sum( pairedRainfall, d => (d.value704 - mean704) ** 2 ); let squaredDifferences705 = d3.sum( pairedRainfall, d => (d.value705 - mean705) ** 2 ); let correlationDenominator = Math.sqrt( squaredDifferences704 * squaredDifferences705 ); let overlapCorrelation = pairedRainfall.length > 1 && correlationDenominator > 0 ? correlationNumerator / correlationDenominator : null; let meanAbsoluteDifference = d3.mean( pairedRainfall, d => Math.abs(d.value704 - d.value705) ); let overlapSummary = { "Calendar-year overlap": `${overlapStartYear}–${overlapEndYear}`, "Valid paired month observations": pairedRainfall.length, "Pearson correlation": overlapCorrelation === null ? "Not available" : overlapCorrelation.toFixed(3), "Mean absolute difference (mm)": meanAbsoluteDifference === undefined ? "Not available" : meanAbsoluteDifference.toFixed(2) }; display(overlapSummary);54:[{"id":"50f60e6dcaaae32d412318ea6b022e56504cce7c488f470e1246de3d7a64e3c468e128b12ce465bb6baffced7511551c7ea5ed7fb21570a890bcea13fb636961","href":"https://static.observableusercontent.com/files/50f60e6dcaaae32d412318ea6b022e56504cce7c488f470e1246de3d7a64e3c468e128b12ce465bb6baffced7511551c7ea5ed7fb21570a890bcea13fb636961","name":"Screenshot 2026-10-25 at 8.05.23 PM.png","type":"image/png","lastModified":1792994729000,"size":218715}] 48:{"id":"90a34e2c9028c888","slug":"assignment-4","title":"Assignment 4: Interaction","thumbnail":"8d50e8ada130193b00fef7ce9882203b0c72babc811700b4d16c46af7777fe37","access_level":"public","create_time":"$D2026-10-26T02:30:23.625Z","update_time":"$D2026-10-26T06:05:55.949Z","view_time":null,"first_public_time":"$D2026-10-26T02:30:39.097Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b5ca32f4163d4864","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":85,"publish_version":85,"role":null,"authored":false,"authors":[{"type":"individual","id":"d025da308015c262","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"b5ca32f4163d4864","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","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":12,"value":"## Visualize\n\n### 1. Create a visualization for the locations of all the stations using the lat, lon coordinates in the header file.\n### Answer\nSee visualization below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"### 2. Create 2 heatmap charts for the stations 704 and 705. You may create them separately or as side-by-side graphs.\n\n### Answer\nSee visualization below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4c","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":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$4e","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 \"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":3,"value":"let stationHeader = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\"\n);\n\nlet station704Raw = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\"\n);\n\nlet station705Raw = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\"\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$50","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$51","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"let validRainfallValues = [\n ...station704Heatmap.z.flat(),\n ...station705Heatmap.z.flat()\n].filter(value =>\n Number.isFinite(value) && value >= 0\n);\n\nlet sharedRainfallMax =\n Math.ceil(d3.max(validRainfallValues) / 50) * 50;\n\ndisplay({\n \"Color scale minimum (mm)\": 0,\n \"Color scale maximum (mm)\": sharedRainfallMax,\n \"Valid rainfall measurements\": validRainfallValues.length\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$52","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$53","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## Design Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### 1. What should the basic layout of the visualization system look like? Decide on the main components of the system (chart views, controls) and where they should be placed.\n\n### Answer\nI believe the layout should let the analyst see the overall geographic location of stations while comparing rainfall records from selected stations. The layout would include a control panel on the right which allows for station selection, filtering the islands, selecting the years, and selecting the months. There should be a station map that shows all the stations displayed, letting the user select the stations desired. With an optional choice to export selected station heatmaps if they wanted. This feature is there in case the user wants to compare and save the visualization of multiple stations and their heatmaps of rainfall histories. When the user selects a station, there should be a small info panel available to show the station's name, available year range, number of valid observations, and missing-data counts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"### 2. What are the interactive abilities of your system? Decide what your system should do, use terms we discussed in class to explain these abilities (i.e. linked views, direct selection, annotations, etc.), annotate your sketch to explain interaction.\n\n### Answer\nI would like to include linked views where clicking a station on the map would highlight it and update the heatmap panel. Then the user could select a second and compare the heatmap pair. I would cap the panels/visualizations to 2 heatmaps per view, and allow the user to save all the selected heatmaps and export them. I also want to add the ability to annotate the map and draw connections between years and locations. This would just be sticky notes on the map, that the user can note information on.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"### 3. Give an example of a possible workflow for an analyst using the system you designed.\n\n### Answer\nThe analyst could filter rainfall data to O'ahu and only see those stations. Then they could select their desired stations, showing the information of those selected stations, allowing them to compare the rainfall data collected. The analyst could also filter the data to a date range if they are looking for a specific time period. An important finding could be missing data for a station. The analyst could use the date range to further investigate if needed, using other external resources about the climate during that time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"FileAttachment(\"Screenshot 2026-10-25 at 8.05.23 PM.png\").image()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"2"}} 24:null