43:["$","title",null,{"children":"Zeyao Zhou Assignment 4: Interaction | Zeyao Zhou | Observable"}] 4b:T54c,{ const div = html`

`; const g704 = toGrid(st704); const g705 = toGrid(st705); const common = { type: "heatmap", x: months, coloraxis: "coloraxis", hoverongaps: false, hovertemplate: "%{x} %{y}
Rainfall: %{z:.1f} mm" }; const traces = [ { ...common, y: g704.years, z: g704.z, xaxis: "x", yaxis: "y" }, { ...common, y: g705.years, z: g705.z, xaxis: "x2", yaxis: "y2" } ]; const layout = { title: { text: "Monthly Rainfall: Stations 704 and 705" }, grid: { rows: 1, columns: 2, pattern: "independent" }, xaxis: { title: { text: "Month" } }, xaxis2: { title: { text: "Month" } }, yaxis: { title: { text: "Year" }, autorange: "reversed" }, yaxis2: { title: { text: "Year" }, autorange: "reversed" }, coloraxis: { colorscale: "Viridis", cmin: 0, cmax: 300, colorbar: { title: { text: "Rainfall (mm)" } } }, annotations: [ { text: "Station 704 (1904–1979)", xref: "x domain", yref: "y domain", x: 0.5, y: 1.06, showarrow: false, font: { size: 14 } }, { text: "Station 705 (1945–2007)", xref: "x2 domain", yref: "y2 domain", x: 0.5, y: 1.06, showarrow: false, font: { size: 14 } } ], width: width, height: 900, margin: { t: 100 } }; Plotly.newPlot(div, traces, layout); return div; }4c:Ta36,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 graph, I centered the map on the main Hawaiian Islands (Big Island to Kauai) at a zoom level that comfortably fits all of the islands in 1 view. For the style, I used open-street-map, which provides visuals for streets and other locations. Each station is a dot, and the dots were colored according to the station's elevation (Viridis), which adds useful information to the visualization. Hovering over each dot shows the station name, State Key Number, coordinates, elevation, and status, so the map stays clean but the details are still available if needed.\ For the heatmap graphs, I decided to place both heatmaps side-by-side for easier comparisons. Each heatmap has months on the x-axis and years on the y-axis, so a row is 1 year and a column is a month across multiple years. Viridis was chosen for both heatmaps because the differences between low and high rainfall are very noticeable (dark to bright). The scale is capped at 300mm rainfall because if it was uncapped, extreme months would stretch the scale so far that most ordinary months would look the same. Missing months and negative values are shown as blank cells. Hovering over each cell displays the month, year, and rainfall in mm, so it is easy to get exact rainfall statistics for each month. 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**: When comparing the overlapping period from 1945 to 1979, the data shows that the 2 station's rainfall metrics are consistent with each other. I can tell this because of the similar colors displayed on the heatmaps in the same time period. Both maps have individual months that stand out as wet periods. For example, Jan 1950, Mar 1951, and Feb 1955 are wet periods for both stations. 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**: If presented with 2 heatmaps from stations that are distant from each other, I could expect different amounts of rain overall or each month if one station is in an area that gets substantially less or more rainfall than the other. I can also expect to see different seasonal patterns between the 2 stations, which would be reflected in the heatmaps. Large-scale events such as hurricanes and tropical storms may still be consistent between the 2 stations.4d:T604,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. **Answer**:\ Search: adding a new SKN in the comparison manager can be done manually or by using the filters. Dynamic filters: every slider and checkbox updates all views immediately. Map: the map has an overview of every station and supports zooming. It will also give additional station details on hover. Clicking a station on the map can also add it to the comparison manager. Consistency: each station has a consistent color across all visualizations. Annotations: analysts can add annotations to any cell. Saved views: current visualization configurations can be saved and reloaded later. Coordination: linked views are used so that data selected in 1 cell will be highlighted in all other cells. Direct selections will also update across cells. 3. Give an example of a possible workflow for an analyst using the system you designed. **Answer**: An analyst wants to know whether station 704 or station 705 had a larger rainfall statistic in Jul 1967. First, the analyst adds SKN 704 and SKN 705 in the comparison manager. Then, the analyst tunes the Year filter for 1967 to 1968. Then, the analyst shortens the timeline by tuning it to show only the data for Jul. Finally, the analyst checks the station details for both stations and records the average rainfall (a single value).4e:[{"id":"c32dd2b19b3675d7dc098812b369e0882ac38e41c9aeddb73bd6cbb21130569d87fe6477eb75c06a35cb54a688349d2795b07d8809081bee8f437f324f955d14","href":"https://static.observableusercontent.com/files/c32dd2b19b3675d7dc098812b369e0882ac38e41c9aeddb73bd6cbb21130569d87fe6477eb75c06a35cb54a688349d2795b07d8809081bee8f437f324f955d14","name":"RawOriginalData_Header.csv","type":"text/csv","lastModified":1792897816449,"size":228133},{"id":"e27937d5e22981e4cfa328d07bd32c564cdf2d40af89469f2ae13c2422d1699d1c385a39a4db02f59f800a82a45f6074b1fbed6e9956b987025d81b8ba9998da","href":"https://static.observableusercontent.com/files/e27937d5e22981e4cfa328d07bd32c564cdf2d40af89469f2ae13c2422d1699d1c385a39a4db02f59f800a82a45f6074b1fbed6e9956b987025d81b8ba9998da","name":"column704.csv","type":"text/csv","lastModified":1792897780914,"size":15322},{"id":"fcd023fa5f306a0a8b7f847928f38ac544487bb2e70ee482416243ebaf62afb49698be5376cf81050762209c8893bbf0160e825d5cd572d9355cf6691b8d8e77","href":"https://static.observableusercontent.com/files/fcd023fa5f306a0a8b7f847928f38ac544487bb2e70ee482416243ebaf62afb49698be5376cf81050762209c8893bbf0160e825d5cd572d9355cf6691b8d8e77","name":"column705.csv","type":"text/csv","lastModified":1792897708946,"size":12507},{"id":"c5a97c86c9dd26aaaf5660e5b16f39cf9c2b5b64e1919a5b16ded3561bc17e7001091967fe06478c363fda4261efab33be526a3694fc9fcb831bd4db260567d4","href":"https://static.observableusercontent.com/files/c5a97c86c9dd26aaaf5660e5b16f39cf9c2b5b64e1919a5b16ded3561bc17e7001091967fe06478c363fda4261efab33be526a3694fc9fcb831bd4db260567d4","name":"Sketch.jpg","type":"image/jpeg","lastModified":1792903084395,"size":1254877}] 47:{"id":"6d684bc7ff9da353","slug":"zeyao-zhou-assignment-4-interaction","title":"Zeyao Zhou Assignment 4: Interaction","thumbnail":"16f4c5b64c8dfc8462a990e37adbff41bbda4a0b9730779aaaafc385ff7212b1","access_level":"public","create_time":"$D2026-10-25T03:11:43.591Z","update_time":"$D2026-10-25T05:03:28.833Z","view_time":null,"first_public_time":"$D2026-10-25T05:04:42.389Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5682b6b777c953fc","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":94,"publish_version":94,"role":null,"authored":false,"authors":[{"type":"individual","id":"3777be497ac13bca","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"5682b6b777c953fc","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","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":"Zeyao Zhou Assignment 4: Interaction","cells":[{"id":1,"value":"# Zeyao Zhou 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":"## Visualize\n1. Create a visualization for the locations of all the stations using the lat, lon coordinates in the header file.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"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":4,"value":"stations = FileAttachment(\"RawOriginalData_Header.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"stationsClean = stations.filter(d =>\n Number.isFinite(d.Lat_DD) && Number.isFinite(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":6,"value":"{\n const div = html`

`;\n\n const trace = {\n type: \"scattermap\",\n mode: \"markers\",\n lat: stationsClean.map(d => d.Lat_DD),\n lon: stationsClean.map(d => d.Lon_DD),\n marker: {\n size: 6,\n color: stationsClean.map(d => d.ElevFT),\n colorscale: \"Viridis\",\n colorbar: { title: { text: \"Elevation (ft)\" } },\n opacity: 0.8\n },\n customdata: stationsClean.map(d => [d.SKN, d.Name, d.ElevFT, d.StationStatus]),\n hovertemplate:\n \"%{customdata[1]}
\" +\n \"SKN: %{customdata[0]}
\" +\n \"Lat: %{lat:.4f}, Lon: %{lon:.4f}
\" +\n \"Elevation: %{customdata[2]} ft
\" +\n \"Status: %{customdata[3]}\"\n };\n\n const layout = {\n title: { text: `Rainfall Station Locations` },\n map: {\n style: \"open-street-map\",\n center: { lat: 20.5, lon: -157.7 },\n zoom: 6.6\n },\n width: width,\n height: 650,\n margin: { l: 0, r: 0, t: 50, b: 0 }\n };\n\n Plotly.newPlot(div, [trace], layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"2. Create 2 heatmap charts for the stations 704 and 705. You may create them separately or as side-by-side graphs.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"st704 = FileAttachment(\"column704.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"st705 = FileAttachment(\"column705.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"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":12,"value":"toGrid = (rows) => {\n const years = [...new Set(rows.map(d => d.year))].sort((a, b) => a - b);\n const z = years.map(y =>\n months.map(m => {\n const r = rows.find(d => d.year === y && d.month === m);\n const v = r ? +r.value : NaN;\n return Number.isFinite(v) && v >= 0 ? v : null; // NaN and negative values become gaps\n })\n );\n return { years, z };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","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":"## Design Interaction\n\n1. 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**: I drew a sketch of the visualization system. It has 1 page with the controls on the left sidebar and the displays on the right. There is a bar containing the dataset name at the top, along with an option to save the current configuration and an option to export the configuration as an image. The analyst would have options to display specific stations and filter the data from those stations through the filtering options on the left. Based on the filter options, the displays on the right would change accordingly. The analyst can also add and remove displays at will, and there would be many different types of displays available, including map, line graph, timeline, and heatmap.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"FileAttachment(\"Sketch.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 42:null