45:["$","title",null,{"children":"# Assignment 4: Interaction | Tyler Unger | Observable"}] 4d:T10c9,// Import Plotly so we can create the map. // You only need to import Plotly once in the notebook. import Plotly from "npm:plotly.js-dist-min"; // `stationData` already contains all of the rows from the header CSV. // Here we keep only rows that have valid numeric latitude and longitude values. // // Number.isFinite(...) checks that the value is actually a usable number. // We do this so Plotly does not try to map rows with missing or bad coordinates. const mappedStations = stationData.filter( x => Number.isFinite(x.Lat_DD) && Number.isFinite(x.Lon_DD) ); // Create one Plotly trace for all of the station markers. const stationTrace = { // `scattermap` tells Plotly that we want to place points on a geographic map. type: "scattermap", // `markers` means we only want dots/points. // We are not drawing lines between the stations. mode: "markers", // Go through every station and create an array of longitude values. // Example: // [-155.67, -155.68, -155.68, ...] lon: mappedStations.map( x => x.Lon_DD ), // Go through every station and create an array of latitude values. // Example: // [18.91, 18.91, 18.93, ...] lat: mappedStations.map( x => x.Lat_DD ), // `text` stores the station name for each point. // We will use this later inside the hover information. text: mappedStations.map( x => x.Name ), // `customdata` lets us attach extra information to every station marker. // // For each station we are storing: // [SKN, elevation, number of records] // // So one station might have customdata like: // [704, 20, 712] customdata: mappedStations.map( x => [ x.SKN, x.ElevFT, x.NumMos ] ), // Control how the station markers look. marker: { // Size of each station dot. size: 6, // Color of each station dot. color: "purple", // Opacity controls transparency. // 1 = completely solid // 0 = completely invisible opacity: 0.6 }, // `hovertemplate` controls what appears when you move your mouse // over one of the station markers. // // `%{text}` uses the station name from the `text` array. // // `%{customdata[0]}` gets the first customdata value, which is SKN. // `%{customdata[1]}` gets elevation. // `%{customdata[2]}` gets number of records. // //
means "start a new line." // // removes Plotly's extra trace label box. hovertemplate: "%{text}
" + "SKN: %{customdata[0]}
" + "Elevation: %{customdata[1]} ft
" + "Number of records: %{customdata[2]}" + "" }; // Plotly expects its traces inside an array. // // We only have one trace here, so the array contains only stationTrace. const stationMapData = [ stationTrace ]; // `layout` controls the overall appearance of the visualization. const stationMapLayout = { // Give the visualization a title. title: { text: "Historic Rainfall Observation Stations in Hawaiʻi" }, // The `map` section controls the geographic map itself. map: { // Use Carto Positron as the background map. // It has a light/simple design so the station markers stand out. style: "carto-positron", // Decide where the map should be centered when it first appears. // // This is roughly centered around the Hawaiian Islands. center: { lon: -157.0, lat: 20.8 }, // Control how far in or out the map is zoomed. // // Larger number = more zoomed in. // Smaller number = more zoomed out. zoom: 5.3 }, // Remove unnecessary empty space around the map. // // r = right // t = top // b = bottom // l = left margin: { r: 0, t: 50, b: 0, l: 0 } }; // Create an empty

element. // // Plotly needs an HTML element where it can draw the visualization. const stationMapDiv = document.createElement("div"); // Build the map. // // First argument = where to draw it // Second argument = the data // Third argument = the layout/settings Plotly.newPlot( stationMapDiv, stationMapData, stationMapLayout ); // Observable's new JS/TS cells do not automatically show every object, // so `display()` tells Observable to put the finished Plotly map on the page. display(stationMapDiv);4e:T618,// Load and clean the rainfall data for Hono Substation (SKN 704). const station704 = await d3.csv( "https://raw.githubusercontent.com/nuritk/data/main/column704.csv", // This function runs once for every row in the CSV. d => { // Convert the rainfall value from text into a number. const rainfall = Number(d.value); return { // Convert the year from text into a number. year: Number(d.year), // Keep the month as text. month: d.month, // Keep the rainfall measurement only if it is a valid // number AND it is not negative. // // If it is NaN, missing, or negative, store null instead. // Plotly can then display that measurement as missing data. value: Number.isFinite(rainfall) && rainfall >= 0 ? rainfall : null }; } ); // Load and clean the rainfall data for Beretania Pump (SKN 705). const station705 = await d3.csv( "https://raw.githubusercontent.com/nuritk/data/main/column705.csv", // Run the same cleaning process on every row. d => { // Convert the rainfall value into a number. const rainfall = Number(d.value); return { // Convert year into a number. year: Number(d.year), // Keep the month name. month: d.month, // Invalid or negative rainfall becomes null. value: Number.isFinite(rainfall) && rainfall >= 0 ? rainfall : null }; } ); // Display both cleaned datasets so we can inspect them. display(station704); display(station705);4f:T819,// Put the months in the order we want them to appear // on the vertical axis of the heatmap. const months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec" ]; // ------------------------------------------------------ // STATION 704: HONO SUBSTATION // ------------------------------------------------------ // Get all of the unique years from station 704. // // `new Set(...)` removes duplicate years. // `[... ]` turns the Set back into an array. // `.sort(...)` puts the years from smallest to largest. const years704 = [ ...new Set(station704.map(x => x.year)) ].sort((a, b) => a - b); // Build the grid of rainfall values for the heatmap. // // We go through each month first. // Then, for every year, we look for the row that matches // both that month AND that year. const heatmap704 = months.map(month => years704.map(year => { // Find the record for this specific month and year. const record = station704.find( x => x.year === year && x.month === month ); // If a record exists, use its rainfall value. // If no record exists, use null so Plotly leaves a gap. return record ? record.value : null; }) ); // ------------------------------------------------------ // STATION 705: BERETANIA PUMP // ------------------------------------------------------ // Get all unique years for station 705 // and sort them from earliest to latest. const years705 = [ ...new Set(station705.map(x => x.year)) ].sort((a, b) => a - b); // Build the year × month rainfall grid for station 705. const heatmap705 = months.map(month => years705.map(year => { // Find the matching month/year record. const record = station705.find( x => x.year === year && x.month === month ); // Use the rainfall measurement if it exists. // Otherwise use null. return record ? record.value : null; }) ); // Display these so you can inspect the arrays if you want. display(years704); display(heatmap704); display(years705); display(heatmap705);50:Taf7,// ------------------------------------------------------ // HEATMAP 1: HONO SUBSTATION // ------------------------------------------------------ // Create the Plotly heatmap trace. const trace704 = { // Tell Plotly this is a heatmap. type: "heatmap", // Years go across the horizontal axis. x: years704, // Months go down the vertical axis. y: months, // The rainfall values control the color of each square. z: heatmap704, // Use a sequential color scale. // Lower rainfall values will be darker red, // while higher rainfall values will move toward orange and yellow. colorscale: "YlOrRd", // Use the same minimum and maximum values for BOTH heatmaps. // This is important because it means the same color // represents the same amount of rainfall on both charts. zmin: 0, zmax: 500, // Label the color scale. colorbar: { title: { text: "Rainfall (mm)" } }, // Show useful information when hovering over a square. hovertemplate: "Year: %{x}
" + "Month: %{y}
" + "Rainfall: %{z:.1f} mm" + "" }; // Set up the appearance of the first heatmap. const layout704 = { title: { text: "Hono Substation (SKN 704)" }, xaxis: { title: { text: "Year" } }, yaxis: { title: { text: "Month" } } }; // Create a place for the chart. const heatmapDiv704 = document.createElement("div"); // Create the heatmap. Plotly.newPlot( heatmapDiv704, [trace704], layout704 ); // Display it in Observable. display(heatmapDiv704); // ------------------------------------------------------ // HEATMAP 2: BERETANIA PUMP // ------------------------------------------------------ // Create the second heatmap trace. const trace705 = { type: "heatmap", // Use station 705's years. x: years705, // Use the same month ordering. y: months, // Use station 705's rainfall grid. z: heatmap705, // Use exactly the same colors as the first heatmap. colorscale: "YlOrRd", // Same scale limits as station 704. // // This means, for example, 300 mm has the same color // in BOTH heatmaps. zmin: 0, zmax: 500, colorbar: { title: { text: "Rainfall (mm)" } }, hovertemplate: "Year: %{x}
" + "Month: %{y}
" + "Rainfall: %{z:.1f} mm" + "" }; // Set up the second heatmap. const layout705 = { title: { text: "Beretania Pump (SKN 705)" }, xaxis: { title: { text: "Year" } }, yaxis: { title: { text: "Month" } } }; // Create a place for the second chart. const heatmapDiv705 = document.createElement("div"); // Create the second heatmap. Plotly.newPlot( heatmapDiv705, [trace705], layout705 ); // Display it. display(heatmapDiv705);51:T4b8,### Heatmap Design Choices I used the same sequential color scale for both heatmaps so that the same color represents the same amount of rainfall in each visualization. Darker red represents lower rainfall amounts, while orange and yellow represent higher rainfall amounts. I also used the same rainfall range of 0 to 500 mm for both heatmaps. Using the same scale makes it easier to visually compare rainfall measurements between the two stations. Years are shown on the horizontal axis and months are shown on the vertical axis. Missing or invalid measurements are left blank so they are visually different from measurements of zero rainfall. ### Station Map Design Choices I used the Carto Positron base map because its light background makes the station markers easy to see without distracting from the data. I used small, partially transparent markers because there are many rainfall stations. The transparency helps reduce clutter when multiple stations are located close together. I framed the map so that the main Hawaiian Islands are visible when the map first loads. Hover information provides additional details about each station, including its name, SKN, elevation, and number of records.52:T53b,### Comparison of Hono Substation and Beretania Pump The two stations overlap from approximately 1945 through 1979. During this period, they appear to show some consistency in their overall rainfall patterns. Both stations generally show higher rainfall during the beginning and end of the year, especially around January through March and November through December. Many of the summer months have lower rainfall values at both stations. The measurements are not identical, however. There are individual months and years where one station records substantially more rainfall than the other. This makes sense because even nearby stations can experience different local rainfall conditions. Overall, the heatmaps suggest that the two nearby stations share a similar general seasonal pattern, even though their individual measurements vary. ### Comparing Distant Rainfall Stations If the two heatmaps came from stations that were far apart, we could compare their seasonal rainfall patterns and see whether different parts of Hawaiʻi experience rainfall at different times or in different amounts. We might also observe differences caused by geography, such as elevation, windward versus leeward location, or differences between islands. A distant pair of stations may show much less consistency than the two nearby Honolulu stations.53:T85a,### Basic Layout The system would use a dashboard-style layout. A control panel at the top would allow the analyst to filter the data by island, year range, month, and station. The main area would contain two linked views. A station map would appear on the left and a rainfall heatmap for the selected station would appear on the right. A station information panel at the bottom would show additional details about the selected station, such as its name, SKN, elevation, available year range, and amount of missing data. ### Interactive Abilities The system would use **direct selection** so an analyst could click a station marker on the map to select it. The map and heatmap would be **linked views**. Selecting a station on the map would automatically update the heatmap to show rainfall measurements for that station. The analyst could use **filters** to limit the visualization to a specific island, year range, or month. Hovering over a station could display a tooltip with information such as the station name, SKN, elevation, and available years. Hovering over a heatmap cell could show the exact year, month, and rainfall measurement. The system could also use **annotations** to identify unusual rainfall values, large gaps in the data, or periods where records are missing. For comparison, the analyst could select a second station and display two heatmaps side by side using the same color scale. ### Example Analyst Workflow An analyst could begin by filtering the map to stations on Oʻahu. They could then click Hono Substation on the map. The linked heatmap would update to show the rainfall history for that station. Next, the analyst could select Beretania Pump as a comparison station. The system would display a second heatmap beside the first one using the same rainfall color scale. The analyst could adjust the year filter to focus on the overlapping period between the two stations and compare monthly rainfall patterns. If an unusual rainfall value or a large missing-data period appeared, the analyst could hover over the heatmap cells or use annotations to inspect the specific year and month.54:[{"id":"160de4f3d11356f13f38cb8a387264ec36b0c4cd8ba30db2345a016a205fafc7ff692f2930492ef4e7bac565a8d0471fad4d763fc9659f4ebd6dfdbecb5ff94a","href":"https://static.observableusercontent.com/files/160de4f3d11356f13f38cb8a387264ec36b0c4cd8ba30db2345a016a205fafc7ff692f2930492ef4e7bac565a8d0471fad4d763fc9659f4ebd6dfdbecb5ff94a","name":"interaction-sketch.jpeg","type":"image/jpeg","lastModified":1793206580000,"size":465609}] 49:{"id":"2ffbbe14ca68dcc1","slug":"assignment-4-interaction","title":"# Assignment 4: Interaction","thumbnail":"704886dd2114dc2845a841019be3b3a7873a685d4b0fba51edb7f864ea140495","access_level":"public","create_time":"$D2026-10-28T16:30:19.279Z","update_time":"$D2026-10-28T17:10:19.751Z","view_time":null,"first_public_time":"$D2026-10-28T17:11:41.372Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc9602396bde81bf","login":"tyler-unger","name":"Tyler Unger","avatar_url":"https://avatars-next.observableusercontent.com/0cf25ca85aa3d07b8db2a9ae35a1bc2330ffb54324269042c44e81346bbf140b","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":52,"publish_version":52,"role":null,"authored":false,"authors":[{"type":"individual","id":"e03228fe44b9727b","login":"tyler-unger","name":"Tyler Unger","avatar_url":"https://avatars-next.observableusercontent.com/0cf25ca85aa3d07b8db2a9ae35a1bc2330ffb54324269042c44e81346bbf140b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"dc9602396bde81bf","login":"tyler-unger","name":"Tyler Unger","avatar_url":"https://avatars-next.observableusercontent.com/0cf25ca85aa3d07b8db2a9ae35a1bc2330ffb54324269042c44e81346bbf140b","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\n\nThis notebook explores historical rainfall measurements from the Rainfall\nAtlas of Hawaiʻi. It visualizes rainfall station locations and compares\nrainfall patterns from Hono Substation and Beretania Pump using heatmaps.\n\nThe second part proposes an interactive visualization system for analysts\nworking with the rainfall dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## Rainfall Observation Stations","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const stationData = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\",\n d3.autoType\n);\n\ndisplay(stationData);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Rainfall Heatmaps\n\nThe following visualizations compare historical monthly rainfall measurements\nfrom Hono Substation (SKN 704) and Beretania Pump (SKN 705).\n\nThe datasets contain missing and incorrect measurements. Missing values and\nnegative rainfall measurements are treated as missing data because rainfall\ncannot have a negative value.","pinned":false,"hidden":false,"mode":"md","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":7,"value":"$4f","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":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$51","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$52","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## Interactive Visualization System Design\n\nThe following design proposes an interactive visualization system for analysts\nworking with the historical rainfall dataset. The goal is to make it easier to\nexplore stations, compare rainfall patterns, inspect missing data, and analyze\ndifferent time periods.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"display(\n await FileAttachment(\"interaction-sketch.jpeg\").image({\n width: 800\n })\n);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$53","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"2"}} 44:null