45:["$","title",null,{"children":"Assignment 4: Interaction | Lee Friedman | Observable"}] 4d:T947,For the main map, I used two different variables to change the look of each point; the size of the dot indicates the number of months where data were collected, and the color of the dots represents the latest year in which data was collected at that station (with later years, closer to the present, being darker green). I decided these were the most important information with the assumption that anyone using these data are already looking for specific locations, and would want to know what time periods each station had collected data in, rather than something like elevation, which is largely correlated with location. I did consider showing elevation through contour lines, but ran out of time to add them. Instead, elevation data are shown in the hover text. The title is "Station Data Collection Over Time" to indicate that the dots are stations where data are collected, and also to indicate that size and color have meaning related to the data collection information about each station. I used Greens as my color scale because I wanted to choose a color that was associated with nature, but didn't automatically imply that size nor color was indicative of rainfall at that location. The only other main way I considered showing the data were by using color to indicate whether the station was (at the time of data collection) discontinued or active. However, since the data are now old (and most are discontinued), I decided that would be less useful to a viewer than the last year in which data were collected, which is related to the station's current use. In addition, the map has buttons allowing a person to focus on one particular island grouping (moving from left to right), as well as a button that displays all islands. Because viewing all islands at once is a bit cramped and difficult to see each individual dot, I added the presets to zoom into certain islands (or island groups) to help with understanding what stations exist(ed) and where more precisely. If I had used the full dataset, I would have wanted to include a slider which allowed a person to look at each month and year in the dataset, where each dot's color would correspond to the month's average rainfall in blue (or be a different solid color, likely red, if the station had no data for that time). If that data were too sparse, I may include an option to hide the inactive stations.4e:Tc84,const stationMap = (() => { const div = document.createElement("div"); const nav = document.createElement("div"); Object.assign(nav.style, { display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "10px", justifyContent: "center" }); const plot = document.createElement("div"); div.append(nav, plot); const valid = stationsCleaned; const years = valid.map(d => d.MaxYear).filter(Number.isFinite); const minYear = Math.min(...years); const maxYear = Math.max(...years); const numMos = valid.map(d => d.NumMos).filter(Number.isFinite); const minMos = Math.min(...numMos); const maxMos = Math.max(...numMos); const trace = { type: "scattermap", mode: "markers", lat: valid.map(d => d.Lat_DD), lon: valid.map(d => d.Lon_DD), text: valid.map(d => `${d.Name} (#${d.SKN})
` + `Number of months: ${Number.isFinite(d.NumMos) ? d.NumMos : "N/A"}
` + `Collection years: ${Number.isFinite(d.MinYear) ? d.MinYear : "N/A"}–${Number.isFinite(d.MaxYear) ? d.MaxYear : "N/A"}
` + `Altitude: ${Number.isFinite(d.ElevFT) ? d.ElevFT : "N/A"} ft
` ), hovertemplate: "%{text}", showlegend: false, marker: { size: valid.map(d => { if (!Number.isFinite(d.NumMos)) return 7; if (maxMos === minMos) return 13; return 7 + 13 * (d.NumMos - minMos) / (maxMos - minMos); }), color: valid.map(d => Number.isFinite(d.MaxYear) ? d.MaxYear : null ), colorscale: "Greens", reversescale: true, cmin: minYear, cmax: maxYear, showscale: true, colorbar: { title: { text: "Latest collection year" } }, opacity: 1 } }; const layout = { title: { text: "Station Data Collection Over Time" }, map: { style: "carto-voyager-nolabels", center: { lon: islands[0].lon, lat: islands[0].lat }, // starts on Hawai'i zoom: islands[0].zoom }, margin: { t: 50, r: 0, b: 0, l: 0 }, height: 600 }; Plotly.newPlot(plot, [trace], layout, { responsive: true, displaylogo: false }); let selectedbutton = null; for (const island of islands) { const button = document.createElement("button"); button.textContent = island.name; Object.assign(button.style, { padding: "7px 12px", border: "1px solid #aaa", borderRadius: "5px", background: "#fff", color: "#222", cursor: "pointer", fontSize: "13px" }); button.onclick = () => { Plotly.relayout(plot, { "map.center": { lon: island.lon, lat: island.lat }, "map.zoom": island.zoom }); if (selectedbutton) { selectedbutton.style.background = "#fff"; selectedbutton.style.color = "#222"; selectedbutton.style.borderColor = "#aaa"; } // Highlight the newly selected button button.style.background = "#46B065"; button.style.color = "#fff"; button.style.borderColor = "#46B065"; // Remember the currently selected button selectedbutton = button; }; nav.appendChild(button); } return div; })(); display(stationMap);4f:T10d6,const heatmaps = (async () => { const dropNegatives = true; const heatmapStations = [ { name: "Hono Substation", skn: 704, url: "https://raw.githubusercontent.com/nuritk/data/main/column704.csv" }, { name: "Beretania Pump", skn: 705, url: "https://raw.githubusercontent.com/nuritk/data/main/column705.csv" } ]; const monthOrder = [ "Jul", "Aug", "Sept", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun" ]; const monthLabels = [ "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun" ]; async function loadStation(url) { const response = await fetch(url); if (!response.ok) { throw new Error(`Failed to load ${url}: ${response.status}`); } const text = await response.text(); return text.trim().split(/\r?\n/).slice(1).map(line => { const [year, month, value] = line.split(","); let v = parseFloat(value); if (!Number.isFinite(v) || (dropNegatives && v < 0)) { v = null; } return { year: +year, month: month.trim(), value: v }; }); } const data = await Promise.all( heatmapStations.map(s => loadStation(s.url)) ); const allValues = data .flat() .map(d => d.value) .filter(v => v !== null && Number.isFinite(v)); const sharedZmax = allValues.length ? Math.max(...allValues) : 1; const spanStart = (year, month) => monthOrder.indexOf(month) < 6 ? year : year - 1; // "1998–99" const spanLabel = y => `${y}–${String(y + 1).slice(-2)}`; const traces = []; const xAxisSettings = []; heatmapStations.forEach((station, i) => { const records = data[i].filter( d => Number.isFinite(d.year) && monthOrder.includes(d.month) ); const starts = records.map(d => spanStart(d.year, d.month)); const minStart = Math.min(...starts); const maxStart = Math.max(...starts); const spans = Array.from( { length: maxStart - minStart + 1 }, (_, j) => minStart + j ); const lookup = new Map( records.map(d => [`${d.year}-${d.month}`, d.value]) ); const z = monthOrder.map((month, r) => spans.map(s => { const calYear = r < 6 ? s : s + 1; return lookup.get(`${calYear}-${month}`) ?? null; }) ); const cellLabels = monthLabels.map((label, r) => spans.map(s => `${label} ${r < 6 ? s : s + 1}`) ); const tickvals = spans.filter(s => s % 20 === 0); xAxisSettings.push({ range: [minStart - 0.5, maxStart + 0.5], tickvals, ticktext: tickvals.map(spanLabel) }); traces.push({ type: "heatmap", x: spans, y: monthLabels, z, customdata: cellLabels, xaxis: i === 0 ? "x" : "x2", yaxis: i === 0 ? "y" : "y2", coloraxis: "coloraxis", hoverongaps: false, hovertemplate: `${station.name}
%{customdata}
%{z:.1f} mm` }); }); const sharedYAxis = { autorange: "reversed", categoryorder: "array", categoryarray: monthLabels }; const sharedXAxis = { title: { text: "July–June year" }, tickmode: "array", tickangle: 0 }; const layout = { xaxis: { ...sharedXAxis, ...xAxisSettings[0], domain: [0, 0.46], anchor: "y" }, xaxis2: { ...sharedXAxis, ...xAxisSettings[1], domain: [0.54, 1], anchor: "y2" }, yaxis: { ...sharedYAxis, domain: [0, 1], anchor: "x" }, yaxis2: { ...sharedYAxis, domain: [0, 1], anchor: "x2" }, coloraxis: { colorscale: "Blues", reversescale: true, cmin: 0, cmax: sharedZmax, colorbar: { title: { text: "Rain
(mm)" } } }, annotations: heatmapStations.map((station, i) => ({ text: `${station.name} (SKN ${station.skn})`, x: i === 0 ? 0.23 : 0.77, y: 1, xref: "paper", yref: "paper", xanchor: "center", yanchor: "bottom", showarrow: false, font: { size: 16 } })), plot_bgcolor: "#FFFFFF", margin: { t: 60, r: 20, b: 55, l: 50 }, height: 440, autosize: true }; const div = document.createElement("div"); div.style.width = "100%"; Plotly.newPlot(div, traces, layout, { responsive: true, displaylogo: false }); return div; })(); display(await heatmaps);50:T602,For the heatmaps, I used blue as the color scheme, such that higher rainfall leads to higher concentration of blue. Each heatmap shares the same rain scale, and uses the same months in the same order. I decided to start with July and end in June because the primary rainfall season in Hawai'i is over the winter, rather than over the summer, and keeping the entire season together allows for simpler visual analysis across each month within each rainy season. The ticks at the bottom represent each year at the start and end of that column. Because the data now spans across years this is important to mention. This change is most obvious at the beginning of the Beretania Pump data, which starts collecting data in January of 1945 and 1949. The stations show some consistency between them: for example, June 1971 is visually distinct with higher rainfall than in surrounding months in both heatmaps, and both show the same general patterns, with only slight variations. The most obvious visual difference is at the end of the Hono Substation's data collection period, which shows significantly higher rainfall from July-September than the Beretania Pump's station. If we looked at two heatmaps from stations that are distant from each other, we might be able to see whether one station is in an overall drier climate (e.g. comparing windward to leeward stations), or if there are substantially different rain patterns (for instance, a hurricane or tropical storm that affects one island's station but not a different island's station).51:[] 49:{"id":"3662962e400965e4","slug":"assignment-4-interaction","title":"Assignment 4: Interaction","thumbnail":"8f1bf7cd2d86c7e4bcb3ec0cfa88100302eed4a0b6c20e706738fcbc2da3508b","access_level":"public","create_time":"$D2026-10-29T07:23:34.705Z","update_time":"$D2026-10-29T20:39:47.260Z","view_time":null,"first_public_time":"$D2026-10-29T21:34:57.297Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"485cfb00720e7892","login":"lee-friedman","name":"Lee Friedman","avatar_url":"https://avatars-next.observableusercontent.com/9b356e697ce46d2e722ca1bad766348599ef289e2e1b6a3390d181a5fab73815","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":182,"publish_version":182,"role":null,"authored":false,"authors":[{"type":"individual","id":"73871743a2357449","login":"lee-friedman","name":"Lee Friedman","avatar_url":"https://avatars-next.observableusercontent.com/9b356e697ce46d2e722ca1bad766348599ef289e2e1b6a3390d181a5fab73815","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"485cfb00720e7892","login":"lee-friedman","name":"Lee Friedman","avatar_url":"https://avatars-next.observableusercontent.com/9b356e697ce46d2e722ca1bad766348599ef289e2e1b6a3390d181a5fab73815","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":11,"value":"$4d","pinned":true,"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":"const stations = await d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"var stationsCleaned = stations.map(d => ({\n ...d,\n Lat_DD: +d.Lat_DD,\n Lon_DD: +d.Lon_DD,\n NumMos: +d.NumMos,\n MinYear: +d.MinYear,\n MaxYear: +d.MaxYear,\n NumMosRFAvg: +d.NumMosRFAvg,\n ElevFT: +d.ElevFT,\n})).filter(d =>\n Number.isFinite(d.Lat_DD) &&\n Number.isFinite(d.Lon_DD)\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const islands = [\n { name: \"Kauai\", lon: -159.54, lat: 22.05, zoom: 9.8 },\n { name: \"O'ahu\", lon: -157.97, lat: 21.48, zoom: 9.5 },\n { name: \"Maui Nui\", lon: -156.645, lat: 20.86, zoom: 8.7 },\n { name: \"Hawai'i\",lon: -155.479370, lat: 19.594474, zoom: 8 },\n { name: \"All Islands\", lon: -156.645, lat: 20.34, zoom: 7 }\n];\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4e","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$50","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 44:null