45:["$","title",null,{"children":"Rainfall Atlas of Hawaii | Truman Choy | Observable"}] 4d:T69a,import Plotly from "npm:plotly.js-dist-min"; const highlight = new Set([704, 705]); // Hono Substation, Beretania Pump const pair = stations.filter(s => highlight.has(s.SKN)); const toCustom = s => [ s.SKN, s.ElevFT, s.Observer, s.StationStatus, s.MinYear, s.MaxYear, s.MaxYear - s.MinYear + 1, s.NumMos, ]; const hover = '%{text} (SKN %{customdata[0]})
' + '%{customdata[3]} · %{customdata[1]:,} ft
' + 'Observer: %{customdata[2]}
' + 'Records: %{customdata[4]}–%{customdata[5]} (%{customdata[6]} yrs, %{customdata[7]} months of data)' + ''; const data = [ { type: 'scattermap', mode: 'markers', name: 'Other stations', lat: stations.map(s => s.Lat_DD), lon: stations.map(s => s.Lon_DD), text: stations.map(s => s.Name), marker: { size: 10, color: '#808080' }, customdata: stations.map(toCustom), hovertemplate: hover, hoverlabel: { align: 'left' }, }, { type: 'scattermap', mode: 'markers', name: 'Hono Substation / Beretania Pump', lat: pair.map(s => s.Lat_DD), lon: pair.map(s => s.Lon_DD), text: pair.map(s => s.Name), marker: { size: 10, color: '#3b82f6' }, customdata: pair.map(toCustom), hovertemplate: hover, hoverlabel: { align: 'left' }, }, ]; const layout = { title: { text: 'Rainfall Stations', x: 0.016 }, width: 800, height: 600, margin: { t: 50, r: 10, b: 10, l: 10 }, legend: { x: 0.01, y: 0.99, bgcolor: 'rgba(255,255,255,0.8)' }, map: { style: 'basic', center: { lat: 21.3055, lon: -157.8567 }, zoom: 14, }, }; const div = DOM.element('div'); display(div); Plotly.newPlot(div, data, layout);4e:T6c6,## Visualizing and studying the rainfall There are countless ways we could visualize the rainfall levels recorded by a particular station. The current Atlas just shows a bar chart showing the overall monthly averages of a station. However, a heatmap would allow us to see *all* the averages over the station's lifespan. This could be a neat new feature for the Atlas! Importantly, the Atlas' stations weren't all operational 24/7 during the nearly 100-year period. The Beretania pump is a prime example: it has a large number of empty data cells (1946-1948 are completely empty, many cells from 1986-1998 are empty), represented in the raw CSV file as "NaN" which thankfully translates fine into JavaScript's `NaN`. Parsing them to `0` would be a mistake because `0` recorded rainfall has different meaning than "no record." The data contains some negative values. I'm not sure why, but I just removed them when creating the heatmaps because rainfall levels can't really be negative. For some reason September is the only month whose code is "Sept" not "Sep"? Like, sure I guess. I tried a bunch of color scales but didn't really like any of them. I tried Viridis because I thought it'd work well and it's used in a [rainfall visualization on the HCDP](https://www.hawaii.edu/climate-data-portal/data-portal/). I even tried reversing it, but the colors at both ends of the spectrum (bright yellow and dark blue) made it really hard to read. At the end I just went with blue because water is blue. Lighter means less rainfall and darker blue means more rainfall. I didn't change much else except copy the color scale range from the HCDP (max 650mm) so that months with potentially extreme rainfall don't end up stretching the scale.4f:T56c,const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec']; const heatData = [ { type: 'heatmap', x: honoSubstation.map(d => d.year), y: honoSubstation.map(d => d.month), z: honoSubstation.map(d => d.value < 0 ? NaN : d.value), coloraxis: 'coloraxis', xaxis: 'x', yaxis: 'y', hovertemplate: 'Hono Substation
%{y} %{x}: %{z:.1f} mm', }, { type: 'heatmap', x: beretaniaPump.map(d => d.year), y: beretaniaPump.map(d => d.month), z: beretaniaPump.map(d => d.value < 0 ? NaN : d.value), coloraxis: 'coloraxis', xaxis: 'x2', yaxis: 'y2', hovertemplate: 'Beretania Pump
%{y} %{x}: %{z:.1f} mm', }, ]; const heatLayout = { title: { text: 'Monthly Rainfall (mm)' }, width: 1000, height: 450, grid: { rows: 1, columns: 2, pattern: 'independent' }, xaxis: { title: { text: 'Hono Substation (704)' } }, xaxis2: { title: { text: 'Beretania Pump (705)' } }, yaxis: { categoryorder: 'array', categoryarray: months }, yaxis2: { categoryorder: 'array', categoryarray: months }, coloraxis: { colorscale: 'Blues', reversescale: true, cmin: 0, cmax: 650, colorbar: { title: { text: 'mm', }, }, }, }; const heatDiv = DOM.element('div'); display(heatDiv); Plotly.newPlot(heatDiv, heatData, heatLayout);50:[{"id":"5c4ef5ccecf64103b0486d97d13dcb3c1a73c44a90ffa1bd4ffa8defb9c86e4b3440145425de7749e59df2dd2a477b1560714f2a5c9d99f5f9a6274a5f5f5a81","href":"https://static.observableusercontent.com/files/5c4ef5ccecf64103b0486d97d13dcb3c1a73c44a90ffa1bd4ffa8defb9c86e4b3440145425de7749e59df2dd2a477b1560714f2a5c9d99f5f9a6274a5f5f5a81","name":"windward-side-station","type":"image/png","lastModified":1793352380431,"size":1255202},{"id":"07c07d0fde1cb88d4ab85c1600480ef3c981d2095e98283db2abdea5d6bef20e28bfc88a3b76f4436f9d02bccca21786664122b72145119fd67fa778cbc043aa","href":"https://static.observableusercontent.com/files/07c07d0fde1cb88d4ab85c1600480ef3c981d2095e98283db2abdea5d6bef20e28bfc88a3b76f4436f9d02bccca21786664122b72145119fd67fa778cbc043aa","name":"leeward-side-station","type":"image/png","lastModified":1793352392792,"size":1259140}] 49:{"id":"4ff35269e2bee345","slug":"rainfall-atlas-of-hawaii","title":"Rainfall Atlas of Hawaii","thumbnail":"e1093020897a975a9bb10cad0c2498c98d3513778d32f734db2414dc6a279192","access_level":"public","create_time":"$D2026-10-30T02:42:21.732Z","update_time":"$D2026-10-30T09:44:00.423Z","view_time":null,"first_public_time":"$D2026-10-30T09:29:24.494Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1383329390b9484b","login":"truman-choy","name":"Truman Choy","avatar_url":"https://avatars-next.observableusercontent.com/a7d29b17fd00b3c8079fc515ddcaff9fba90108f6356c3110ff709917a14fd18","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":533,"publish_version":533,"role":null,"authored":false,"authors":[{"type":"individual","id":"821429cf50ca85d7","login":"choytr","name":"Truman Choy","avatar_url":"https://avatars-next.observableusercontent.com/a7d29b17fd00b3c8079fc515ddcaff9fba90108f6356c3110ff709917a14fd18","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"1383329390b9484b","login":"truman-choy","name":"Truman Choy","avatar_url":"https://avatars-next.observableusercontent.com/a7d29b17fd00b3c8079fc515ddcaff9fba90108f6356c3110ff709917a14fd18","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Rainfall Atlas of Hawaii","cells":[{"id":1,"value":"# Rainfall Atlas of Hawaii\n\nThe Rainfall Atlas of Hawaii was an old project that displayed rainfall data in Hawaii recorded from 1920 to 2012. The original site was deprecated but I helped rebuild it a while ago and it is now [live](https://rainfall.geography.hawaii.edu) again. I cringe at how slow it is. I only hope I've matured enough as a developer to know how to fix it if I ever get the chance.\n\nThe Atlas' data includes of a list of rainfall stations and their locations, and the rainfall data collected by each station. The current Atlas displays this on a [Leaflet](https://leafletjs.com) map, but here we will explore it with [Plotly](https://plotly.com/javascript/) instead.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"## Getting the data\n\nTo start we'll get the station data and the rainfall data for just two stations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"stations = d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/RawOriginalData_Header.csv\",\n d3.autoType,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"honoSubstation = d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/column704.csv\",\n d3.autoType,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"beretaniaPump = d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/column705.csv\",\n d3.autoType,\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"## Creating the map\nNow we can create the map and display the stations on it. The stations are colored gray while the two we are interested in (Hono Substation and Beretania Pump) are a different color, blue. I zoomed the map in to see these two stations. They are physically quite close to each other so we can expect that their rainfall levels will be quite similar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4d","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$4f","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"These two heatmaps show very similar rainfall levels with more during the winter and less during the summer, reflective of typical Hawaii weather. This similarity is unsurprising considering their proximity as mentioned earlier. If these were two stations very far apart, we could see very different rainfall patterns. For example if we took a station on the Windward side of Oahu and one of the Leeward side, we might see heavy rainfall in some of the Windward station's cells while we might see barely any in the Leeward one.\n\nIndeed we can observe this if we visit the Atlas and look at some of the stations. Many of the Leeward-side stations have the same bell curve of rainfall---very heavy rainfall, around 6 mm, in the winter that tapers off almost entirely in the summer, down to about 1mm. But compare any Leeward-side station with a Windward-side one and you'll almost certainly see higher summer-level rainfall in the Windward-side one---I see many that have around 4mm during the summer.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"FileAttachment(\"windward-side-station\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"\nFileAttachment(\"leeward-side-station\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"2"}} 44:null