45:["$","title",null,{"children":"ICS 684 Assignment 4 | Alyssa Greenwell | Observable"}] 4d:T7ad,### Design Choices #### Station Map For the map of the weather stations, I chose to frame the map to show the entire island chain. It shows the complete given data and it is interesting to compare the density of weather stations on each island. I struggled to find a dot size that didn't crowd the map when it was zoomed out to all the islands, while also being large enough to easily see when zoomed into a specific area. I settled on 3.5 because I think it best fits that compromise between the two. I chose blue dots because it felt appropriate for the theme of rain. #### Rainfall Heatmaps I chose to do two different maps instead of side-by-side to give the data more space, since there is so much to look at. I once again chose a blue theme for rain. This was somewhat unintentional but I also like how the map as a whole looks a bit like falling rain. I chose a color scale that goes from a light shade of blue to a dark shade because I think that it is intuitive and the difference in values are easy to see. ### Comparing Heatmaps Data I can see a lot of similarity between the overlapping periods between the two heatmaps. The easiest way to tell is to pick out the darkest colors and see if there are similar patterns between the dark colors in one and the dark colors of the other, which there are. If we had two heatmaps that were of two distant stations, we could see broadstokes differences between the two locations, like which generally got more rain, or when the yearly rainy periods were in one location compared to the other. ## Interactivity map colorcoded with amount of rain (split by county, or maybe a bubble around the rainfall station?) Use a slider to change view by month and year? Filter by year range or by month (ex winter months from 1966 - 1970). Hover over a dot on the map representing a weather station to see the amount of rain at that station. Zoom into the map or select a specific station to see the data over time.4e:Tb99,### Design Choices #### Station Map For the map of the weather stations, I chose to frame the map to show the entire island chain. It shows the complete given data and it is interesting to compare the density of weather stations on each island. I struggled to find a dot size that didn't crowd the map when it was zoomed out to all the islands, while also being large enough to easily see when zoomed into a specific area. I settled on 3.5 because I think it best fits that compromise between the two. I chose blue dots because it felt appropriate for the theme of rain. #### Rainfall Heatmaps I chose to do two different maps instead of side-by-side to give the data more space, since there is so much to look at. I once again chose a blue theme for rain. This was somewhat unintentional but I also like how the map as a whole looks a bit like falling rain. I chose a color scale that goes from a light shade of blue to a dark shade because I think that it is intuitive and the difference in values are easy to see. ### Comparing Heatmaps Data I can see a lot of similarity between the overlapping periods between the two heatmaps. The easiest way to tell is to pick out the darkest colors and see if there are similar patterns between the dark colors in one and the dark colors of the other, which there are. If we had two heatmaps that were of two distant stations, we could see broadstokes differences between the two locations, like which generally got more rain, or when the yearly rainy periods were in one location compared to the other. ## Interactivity My idea for an interactive version of this data is a map where you can see the rainfall of the area by color-coded sections of the islands. Darker blue means that there was a lot of rain. At the top, you can filter for which years to show. You can also select certain months, for example, maybe you only want to see the rainfall during the winter months. You can also toggle viewing the stations or not. At the bottom is a play button, that generates frames that have the data you filtered for (for example, every June from 1966 - 1970), and when you hit play it goes through those frames like a slideshow. Or, you can use the slider at the bottom or the mouse scroll wheel to scroll through the frames yourself. You can also hover over a weather station and it will highlight and show the station name and rainfall information. Clicking on a station can bring up some data over time, like generating a heatmap like the one above for that particular station. This gives a lot of options for workflows, for example if someone wants to see how the weather changes for the same time of year over a certain amount of years they can. Or if they want to see a snapshot of the islands at a specific time, they can. Or they can see specific data over time for a particular station, and compare and contrast data from another station. ${await FileAttachment("Untitled_Artwork.jpg").image({ width: 500 })}4f:[{"id":"a962d7f974155e0019b2e31f2a7b74122f15b7c5ab709c25ff2fec332f1ccf217642a93c44b836cec275c41920a598475f52604e171a1ac5087bf2b4e90fdd5a","href":"https://static.observableusercontent.com/files/a962d7f974155e0019b2e31f2a7b74122f15b7c5ab709c25ff2fec332f1ccf217642a93c44b836cec275c41920a598475f52604e171a1ac5087bf2b4e90fdd5a","name":"Untitled_Artwork.jpg","type":"image/jpeg","lastModified":1792894457907,"size":270372}] 49:{"id":"e8f99d660da69e7d","slug":"ics-684-assignment-4","title":"ICS 684 Assignment 4","thumbnail":"8700c2729e7e2a5d50673e73eba3c96e85c6b7ed16846814edda802db24e3619","access_level":"public","create_time":"$D2026-10-23T19:07:07.931Z","update_time":"$D2026-10-25T02:25:10.852Z","view_time":null,"first_public_time":"$D2026-10-25T02:26:21.377Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a3af47ca20cfeb1c","login":"alyssa-greenwell","name":"Alyssa Greenwell","avatar_url":"https://avatars-next.observableusercontent.com/cacc95d72123f5da0f16a871150b99c51dbfc5f8d8c529e28e2744e49c14d16d","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":205,"publish_version":205,"role":null,"authored":false,"authors":[{"type":"individual","id":"05eead659d80c80e","login":"alyssa-greenwell","name":"Alyssa Greenwell","avatar_url":"https://avatars-next.observableusercontent.com/cacc95d72123f5da0f16a871150b99c51dbfc5f8d8c529e28e2744e49c14d16d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"a3af47ca20cfeb1c","login":"alyssa-greenwell","name":"Alyssa Greenwell","avatar_url":"https://avatars-next.observableusercontent.com/cacc95d72123f5da0f16a871150b99c51dbfc5f8d8c529e28e2744e49c14d16d","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":"ICS 684 Assignment 4","cells":[{"id":1,"value":"# ICS 684 Assignment 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"rainfallData = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"station704 = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"station705 = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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":5,"value":"{\n let data = [{\n type: \"scattermap\",\n mode: \"markers\",\n text:rainfallData.map(x => x.Name),\n lat: rainfallData.map(x => x.Lat_DD),\n lon: rainfallData.map(x => x.Lon_DD),\n marker: {\n size: 3.5,\n color: \"#1a56b8\"\n },\n textposition: \"top left\",\n hoverinfo: \"lat+lon+text\",\n }];\n\n let layout = {\n title: {\n text: \"Rainfall Measuring Stations in Hawai'i\",\n },\n showlegend: false,\n map: {\n\t\t style: \"carto-positron\",\n // setting the center and zoom level helps setting the frame of the chart\n center: { lat: 20.55, lon: -157.2 },\n\t\t zoom: 6.45,\n },\n height: 500,\n width: 800,\n\t margin: { r: 0, t: 40, b: 0, l: 0 }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"matrixData704 = [...new Set(station704.map(x => x.month))].toReversed().map(x => station704.filter(y => y.month === x).map(z => parseFloat(z.value)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"matrixData705 = [...new Set(station705.map(x => x.month))].toReversed().map(x => station705.filter(y => y.month === x).map(z => parseFloat(z.value)));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"{\n var data = [\n {\n z: matrixData704,\n y: [...new Set(station704.map(x => x.month))].toReversed(),\n x: [...new Set(station704.map(x => x.year))],\n zmin: 0,\n zmax: 500,\n zauto: false,\n type: 'heatmap',\n colorscale: [[0, '#f5f5f7'], [1, '#000094']],\n hovertemplate:\n 'Year: %{x}
' +\n 'Month: %{y}
' +\n 'Rain: %{z:.2f} in
' +\n ''\n }];\n\n var layout = {\n title: {\n text: 'Hono Substation Rain Measurements by Month 1904 - 1979'\n },\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n var data = [\n {\n z: matrixData705,\n y: [...new Set(station705.map(x => x.month))].toReversed(),\n x: [...new Set(station705.map(x => x.year))],\n zmin: 0,\n zmax: 500,\n zauto: false,\n type: 'heatmap',\n colorscale: [[0, '#f5f5f7'], [1, '#000094']],\n hovertemplate:\n 'Year: %{x}
' +\n 'Month: %{y}
' +\n 'Rain: %{z:.2f} in
' +\n ''\n }];\n\n var layout = {\n title: {\n text: 'Beretainia Pump Rain Measurements by Month 1945 - 2007'\n },\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 44:null