25:["$","title",null,{"children":"HW 4 - ICS 484 | Kate Hamada | Observable"}] 4b:T814,let station_704 = await d3.csv("https://raw.githubusercontent.com/nuritk/data/main/column704.csv"); // comparing same dates at 705 // station_704 = raw_station_704.filter(x => x.year >= 1945); // for both year and month use Set to get disctinct values since year and months repeat let year = station_704.map(x => x.year); year = [...new Set(year)]; let month = station_704.map(x => x.month); month = [...new Set(month)]; let value = station_704.filter(x => x.value); // combine year and month let lookup = station_704.map(x => [`${x.year}-${x.month}`, x.value]); // each year-month is mapped to it's respective value lookup = new Map(lookup); // basically building a matrix where each item is a month and within that items contains the values for each year let data_values = month // uses map function to go through each year and month combo .map(m => year .map(y => { // get the value for that year and month from the lookup map const temp = lookup.get(`${y}-${m}`); // return null if its null, infinite or less than 0 // else return temp which is the value for that year month combo return temp == null || !isFinite(temp) || temp < 0 ? null : temp; })); // print statements // display(value); // display(lookup); // display(data_values); let data_704 = [ { z: data_values, x: year, y: month, type: 'heatmap', hoverongaps: false, colorscale: "Viridis", // changed the hover label so that it's easier to read // month(y) year(x) // value(z) mm <-- the .2f is how many decimal places // extra get's rid of the trace that shows up hovertemplate: "%{y} %{x}
%{z:.2f} mm", zmin: 0, // values are very skewed (most < 100, max ~475), so cap the scale zmax: 250, } ]; let layout = { title: { text: "Hono Rainfall Station (704)", // I preferred the title being left aligned x: 0, pad: { l: 10 }, }, // jan at the top yaxis: { autorange: "reversed" } }; const div = DOM.element('div'); Plotly.newPlot(div, data_704, layout); display(div); 4c:T7b8,const station_705 = await d3.csv("https://raw.githubusercontent.com/nuritk/data/main/column705.csv"); // for both year and month use Set to get disctinct values since year and months repeat let year = station_705.map(x => x.year); year = [...new Set(year)]; let month = station_705.map(x => x.month); month = [...new Set(month)]; let value = station_705.filter(x => x.value); // combine year and month let lookup = station_705.map(x => [`${x.year}-${x.month}`, x.value]); // each year-month is mapped to it's respective value lookup = new Map(lookup); // basically building a matrix where each item is a month and within that items contains the values for each year let data_values = month // uses map function to go through each year and month combo .map(m => year .map(y => { // get the value for that year and month from the lookup map const temp = lookup.get(`${y}-${m}`); // return null if its null, infinite or less than 0 // else return temp which is the value for that year month combo return temp == null || !isFinite(temp) || temp < 0 ? null : temp; })); // print statements // display(value); // display(lookup); // display(data_values); let data_705 = [ { z: data_values, x: year, y: month, type: 'heatmap', hoverongaps: false, colorscale: "Viridis", // changed the hover label so that it's easier to read // month(y) year(x) // value(z) mm <-- the .2f is how many decimal places // extra get's rid of the trace that shows up hovertemplate: "%{y} %{x}
%{z:.2f} mm", zmin: 0, // values are very skewed (most < 100, max ~475), so cap the scale zmax: 250, } ]; let layout = { title: { text: "Hono Rainfall Station (705)", // I preferred the title being left aligned x: 0, pad: { l: 10 }, }, // jan at the top yaxis: { autorange: "reversed" } }; const div = DOM.element('div'); Plotly.newPlot(div, data_705, layout); display(div); 4d:T4e9,### 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. \ Framing\ I changed the scale so that it was capped since there aren't a lot of outliers in the data and much of it is in the same range. I also dropped the NaN values and just don't show them since we don't have anything and saying 0 would be disingenuous. Since there were more years than months I made the years the x axis, also so that you could more easily compare the same month across each year. I used the station name and indicated that it was measuring rainfall to make easier to understand. I also changed the hover label so that it's easier to read since the default var: value formatting was not helpful since the variable doesn't matter to the audience. Color Scale\ I also chose the Viridis color scale because using red to blue isn't really helpful since red indicates dryness which is sort of true but not necessarily depending on the area. But I didn't want blue to white since the white spaces would be confused for the months with no data. So I went with Viridis since it highlights the heavier rainfall periods with yellow which is contrasting to blue.4e:[{"id":"0032ad584a5639e0bb1efba9dbd053a59ac5064292e115faf5d9497b16de9d08f9281f28f3b475dd3d30c03e613677ec79df5d18e6c1146c4f09b291912026c5","href":"https://static.observableusercontent.com/files/0032ad584a5639e0bb1efba9dbd053a59ac5064292e115faf5d9497b16de9d08f9281f28f3b475dd3d30c03e613677ec79df5d18e6c1146c4f09b291912026c5","name":"RawOriginalData_Header.csv","type":"text/csv","lastModified":1793132919594,"size":231897},{"id":"547726cfd7bb7756d0fddb3c76c3072697086959fbeba93af096983fd47657ce9309a6ea85097ca9a275e9baa60fc8ec9e2298cdbc0ecd859758e9a463610daf","href":"https://static.observableusercontent.com/files/547726cfd7bb7756d0fddb3c76c3072697086959fbeba93af096983fd47657ce9309a6ea85097ca9a275e9baa60fc8ec9e2298cdbc0ecd859758e9a463610daf","name":"Design 1","type":"image/jpeg","lastModified":1793288487000,"size":185233},{"id":"b81b432cf9c561f2e78f9665c0662372b363df6e32bbd9f36137f6b936373b6812f93e5fe8fa68247ed32821748ef2a55f2262db9d61594d9a1881a47329359f","href":"https://static.observableusercontent.com/files/b81b432cf9c561f2e78f9665c0662372b363df6e32bbd9f36137f6b936373b6812f93e5fe8fa68247ed32821748ef2a55f2262db9d61594d9a1881a47329359f","name":"Design 2","type":"image/jpeg","lastModified":1793288948000,"size":126108}] 47:{"id":"3c33d2ea60884ed4","slug":"hw-4-ics-484","title":"HW 4 - ICS 484","thumbnail":"7bf784d77411b72487aeb0ea1e6907f04bb9e8ac877dcef1988ac7be3f478a92","access_level":"public","create_time":"$D2026-10-27T20:27:36.692Z","update_time":"$D2026-10-29T16:01:40.997Z","view_time":null,"first_public_time":"$D2026-10-29T16:01:56.266Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b3dbe8e18c461ebd","login":"kate-hamada","name":"Kate Hamada","avatar_url":"https://avatars-next.observableusercontent.com/8772ddc6a496c4b68568603f4dde3d9126156ea70661bae4f4ad6b786c1ac38c","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":207,"publish_version":207,"role":null,"authored":false,"authors":[{"type":"individual","id":"0628d981a422ecae","login":"kate-hamada","name":"Kate Hamada","avatar_url":"https://avatars-next.observableusercontent.com/8772ddc6a496c4b68568603f4dde3d9126156ea70661bae4f4ad6b786c1ac38c","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"b3dbe8e18c461ebd","login":"kate-hamada","name":"Kate Hamada","avatar_url":"https://avatars-next.observableusercontent.com/8772ddc6a496c4b68568603f4dde3d9126156ea70661bae4f4ad6b786c1ac38c","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":"HW 4 - ICS 484","cells":[{"id":1,"value":"# HW 4 - ICS 484\nKate Hamada","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"# Visualize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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":2,"value":"### 1. Create a visualization for the locations of all the stations using the lat, lon coordinates in the header file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const header_data = await FileAttachment(\"RawOriginalData_Header.csv\").csv();\nlet long = header_data.map(x => x.Lon_DD);\nlet lat = header_data.map(x => x.Lat_DD);\nlet stations = header_data.map(x => x.Name);\nlet data = [{\n type: 'scattermap',\n mode: 'markers',\n lon: long,\n lat: lat,\n marker: {\n size: 5, // slightly bigger than default\n color: \"red\"\n },\n text: stations,\n hoverinfo: \"text\", // gets rid of the coordinates when hovering\n}];\n\nlet layout = {\n title: {\n text: \"Rainfall Stations\",\n // I preferred the title being left aligned\n x: 0,\n pad: { l: 10 },\n },\n map: {\n style: \"carto-voyager\",\n center: { lon: -157.95, lat: 21.45 },\n zoom: 9, // the zoom is too much\n },\n margin: { r: 0, t: 40, b: 0, l: 0 }\n};\n\nconst div = DOM.element('div');\nPlotly.newPlot(div, data, layout);\ndisplay(div);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"### 2. Create 2 heatmap charts for the stations 704 and 705. You may create them separately or as side-by-side graphs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4b","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"### 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?\nWhen comparing the overlapping period of time the stations seem to show consistency. I can tell because while it may not be exactly the same, the heat map follows the same pattern meaning that nothing was out of the ordinary or different from each of the graphs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"### 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?\nI think we could see how some areas get significantly more rain throughout the year so with the same scale it would vary in color more. It could also show whether a storm hit their respective side of the island or not. Sort of like how Kaneohe can be pouring with rain but Honolulu will be completely dry. You can also determine if there were just wetter or dryer years if both stations are lighter or heavier than usual.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"# Design Interactions\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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\\\nThe main components:\n- scatter map (stations)\n- geo heatmap (rainfall)\n- timeline slider\n- year x month heatmap\n- line graph for elevation vs rainfall\n- pie chart of missing values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"FileAttachment(\"Design 1\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"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- I used filtering through a dynamic widget with the buttons (switch units and map) and with the timeline slider.\n- I also used direct selection in the station map where you can select a station in order to see the year x month heatmap since the data is based on per station data. Also so that a popup can appear permanently so you can see it's elevation level and name clearer.\n- The direct selection is also an example of linked views since it links the station map and the year x month heatmap and the missing values pie chart are linked to that selection.\n- Another example of linked views is that the station could also highlight the point in the elevation chart to indicate which one it is in the graph in relation to the others.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"FileAttachment(\"Design 2\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"### 3. Give an example of a possible workflow for an analyst using the system you designed.\nAn analyst may want to use this system in order to design better drainage systems in order to better prevent flooding. So in order to do that they may want to know what patterns might appear during heavy rainfall periods of time. So they might immediately look at the rainfall vs elevation graph to see if there's correlation to higher elevation and increased rainfall. Then they might want to look at the geographical heatmap and zoom in to the island or specific area that they're working with. Then they would scroll to compare decades and see if there's any significant changes that they should be aware of. Then They would go back to stations to highlight which stations are correlated with more rainfall and what their elevation is. Also to double check the missing values pie chart to see the validity of the data before using them to base their decisions off of.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null