Show DEV：我建立了一個為每項水温數據標註來源的網站，還可以怎樣改進？
Show DEV: I built a water-temperature site that labels every number with its source — how would you do it better?
Eric McWay 建立了一個網站，展示美國約 20 個沿岸及五大湖監測地點的即時水温和潮汐預測，數據來自 NOAA、NDBC、USGS 及 NASA/JPL。網站為每項數值標示測站編號、觀測時間及其屬於直接觀測還是衞星分析，並以季節基準範圍協助辨別讀數是否異常；他希望瞭解如何讓一般訪客更易分辨兩類數值，以及如何改善手機版潮汐表的版面。
Hi all — I built https://watertemperaturelive.com, a site showing current water temperatures and tide predictions for about 20 monitored U.S. coastal and Great Lakes locations. Data comes from official sources: NOAA CO-OPS pier/harbor stations, NDBC buoys, USGS gauges, and NASA/JPL's daily MUR satellite sea-surface analysis.
The problem I'm trying to solve is provenance confusion. Most water-temp sites show one number. But a pier thermometer at La Jolla (NOAA 9410230) and a 1km satellite analysis pixel offshore are very different things. Right now, for example, the La Jolla pier reads 72.9°F (observed Oct 23, 3:24 PM PDT) — above the station's usual October 90th percentile of 67.8°F (2021–2025). A satellite pixel a few km offshore could easily read differently, and neither is 'wrong' — they're different measurements.
So every number on the site carries a label: station ID, observation time, and whether it's a direct observation or a satellite analysis, plus a seasonal baseline band so you can tell when today's reading is unusual. Example page: https://watertemperaturelive.com/us/california/la-jolla/?utm_source=dev-community&utm_medium=community&utm_campaign=water_resources
Disclosure: I'm the owner/builder of the site — posting for feedback, not just traffic. (I used AI assistance to help draft this post.)
My question: how would you label observed vs. analyzed values so a casual visitor (not a data person) instantly gets the difference? Right now I use badges like 'pier reading' vs 'satellite analysis' plus the station ID. Is that enough, or would you do something more explicit in the UI? Also curious how others handle mobile layout for data-dense pages — the tide tables get cramped.
— Eric McWay
來源：DEV Community · dev.to