b1c6b94765
Defaulting climate pages to the city's temperature convention left every page half-converted: a Delhi reader got °C next to "9 mph" and "0.00 in". One flag now drives every measure — picking °C also gives mm and km/h. Absolute humidity stays g/m³ in both systems; there is no imperial unit for it anyone would recognise, so converting it would only make the page worse. units.js becomes the single source for all of it. The formatting logic existed in three independent copies — shared.js's fmtPrecip/fmtWind/fmtHumid, a second set inside fmtMetricVal, and a third baked into chart.js's series labels, axis ticks and tooltip — which is why the units drifted apart in the first place. shared.js now re-exports from units.js so its importers are unchanged, and chart.js carries a per-series unit `kind` in place of sniffing for a "°" suffix, which could not have extended to three unit families. Server-rendered pages gain the carrier they were missing: precipitation and wind now render as <span class="precip" data-precip-in> / <span class="wind" data-wind-mph>, the same contract temperature already had, so climate.js can repaint them on toggle and the attribute stays imperial as the source of truth. Precision follows the unit: millimetres get one decimal where inches get two. 0.04 in and 1.0 mm are the same amount, and "1.02 mm" would advertise precision the source doesn't have. Wind rounds half-up to match Math.round, as temperature already does. The weekly table's wind and rain cells are bare numbers to keep the grid narrow, so their row labels now carry the unit and rebuild per render. Static copy that names a unit — the legend's "(mph)", "(inches)", and a "(°F)" that had been wrong for °C readers since the country defaults landed — is marked up with data-unit-label and painted from the same source. The chart keeps its imperial domain; only labels convert, so point positions and the fan geometry are untouched. Push and email bodies are still imperial-only (notify.py): they are composed server-side with no client to repaint them and no per-user unit stored, which is the same limitation temperature already has there. Left for a follow-up. Claude-Session: https://claude.ai/code/session_013dRZmX9D3JEntfMKWMTWZ8
112 lines
7.3 KiB
HTML
112 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Thermograph — reading the grades</title>
|
|
<meta name="description" content="How Thermograph grades weather: percentiles of a location's own ±7-day seasonal history, the scale from Below Normal to Near Record, and what every metric means." />
|
|
<meta name="theme-color" content="#f0803c" />
|
|
<!-- Link previews (Discord, Slack, iMessage…). The server fills the og:url /
|
|
og:image origins in from this request's scheme://host + base path —
|
|
crawlers need absolute URLs and don't run JS. -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:site_name" content="Thermograph" />
|
|
<meta property="og:title" content="Thermograph — reading the grades" />
|
|
<meta property="og:description" content="How Thermograph grades weather: percentiles of a location's own ±7-day seasonal history, the scale from Below Normal to Near Record, and what every metric means." />
|
|
<meta property="og:url" content="__ORIGIN__/legend" />
|
|
<meta property="og:image" content="__ORIGIN__/logo.png?v=2" />
|
|
<meta property="og:image:width" content="512" />
|
|
<meta property="og:image:height" content="512" />
|
|
<meta property="og:image:alt" content="Thermograph logo" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<link rel="canonical" href="__ORIGIN__/legend" />
|
|
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
|
<link rel="icon" href="favicon-48.png" type="image/png" sizes="48x48" />
|
|
<link rel="icon" href="favicon-32.png" type="image/png" sizes="32x32" />
|
|
<link rel="icon" href="favicon-16.png" type="image/png" sizes="16x16" />
|
|
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
|
|
<link rel="manifest" href="manifest.webmanifest" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="brand">
|
|
<div>
|
|
<h1><a href="./"><span class="logo"><svg viewBox="0 0 512 512" width="28" height="28" aria-hidden="true"><rect x="32" y="32" width="448" height="448" rx="96" fill="#10141B" stroke="#fff" stroke-opacity=".08" stroke-width="4"/><rect x="64" y="170" width="384" height="48" rx="8" fill="#27131C"/><rect x="64" y="222" width="384" height="48" rx="8" fill="#38322E"/><rect x="64" y="274" width="384" height="48" rx="8" fill="#1A2D27"/><rect x="64" y="326" width="384" height="48" rx="8" fill="#26333F"/><rect x="64" y="378" width="384" height="48" rx="8" fill="#18293A"/><line x1="64" y1="132" x2="448" y2="132" stroke="#46586E" stroke-width="8" stroke-dasharray="26 20"/><path d="M64 410H126V386H160" fill="none" stroke="var(--cold)" stroke-width="34"/><path d="M160 403V352H244V368H282" fill="none" stroke="var(--cool)" stroke-width="34"/><path d="M282 385V320H312" fill="none" stroke="var(--normal)" stroke-width="34"/><path d="M312 337V248H338" fill="none" stroke="var(--warm)" stroke-width="34"/><path d="M338 265V196H366" fill="none" stroke="var(--hot)" stroke-width="34"/><path d="M366 213V132H396" fill="none" stroke="var(--very-hot)" stroke-width="34"/><rect x="382" y="100" width="64" height="64" rx="12" fill="var(--rec-hot)" stroke="#10141B" stroke-width="12"/></svg></span>Thermograph</a></h1>
|
|
<p class="tag">What the metrics and percentile grades mean</p>
|
|
</div>
|
|
<details class="nav-menu">
|
|
<summary class="nav-toggle" aria-label="Menu"><svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg></summary>
|
|
<div class="nav-panel">
|
|
<nav class="view-nav" aria-label="Views">
|
|
<a href="./" data-view="map">Weekly</a>
|
|
<a href="calendar" data-view="calendar">Calendar</a>
|
|
<a href="day" data-view="day">Day Detail</a>
|
|
<a href="compare" data-view="compare">Compare</a>
|
|
<a href="climate">Climate</a>
|
|
<a href="alerts">Alerts</a>
|
|
</nav>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="guide">
|
|
<section class="guide-block">
|
|
<h2>How the grades work</h2>
|
|
<p>Every grade is <b>relative to this place's own climate history</b>, not an absolute
|
|
temperature. For each day Thermograph builds a ±7-day seasonal distribution from
|
|
decades of local records, then reports the <b>percentile</b> where the day falls in it.</p>
|
|
<p>So a 60° day can be “Above Normal” in one place or season and
|
|
“Below Normal” in another. That's why the categories read
|
|
“Above/Below Normal”, “High/Low”, and “Near Record” —
|
|
never “hot” or “cold”.</p>
|
|
</section>
|
|
|
|
<section class="guide-block">
|
|
<h2>Grade scale — percentile of the local ±7-day history</h2>
|
|
<div class="guide-scale" id="temp-scale"></div>
|
|
</section>
|
|
|
|
<section class="guide-block">
|
|
<h2>Rain intensity — percentile among rain days</h2>
|
|
<p class="muted">Precipitation is graded only across days that actually saw rain, so
|
|
“Heavy” means heavy <i>for a rainy day here</i>. Dry days are colored by
|
|
their dry streak instead (below).</p>
|
|
<div class="guide-scale" id="rain-scale"></div>
|
|
</section>
|
|
|
|
<section class="guide-block">
|
|
<h2>The metrics</h2>
|
|
<dl class="guide-metrics">
|
|
<dt>High / Low</dt><dd>The day's highest and lowest air temperature (<span data-unit-label="temp">°F</span>).</dd>
|
|
<dt>Feels</dt><dd>Apparent temperature — what the air actually felt like once humidity
|
|
and wind are factored in, taking whichever apparent extreme (heat-index high or
|
|
wind-chill low) sits further from a temperate baseline, graded against its own history.</dd>
|
|
<dt>Humid</dt><dd>Absolute humidity: grams of water vapor per cubic meter of air (g/m³).</dd>
|
|
<dt>Wind</dt><dd>Average sustained wind speed (<span data-unit-label="wind">mph</span>).</dd>
|
|
<dt>Gust</dt><dd>Peak wind gust for the day (<span data-unit-label="wind">mph</span>).</dd>
|
|
<dt>Precip</dt><dd>Total precipitation (<span data-unit-label="precip">inches</span>), graded by intensity among rain days.</dd>
|
|
<dt>Dry streak</dt><dd>Consecutive days since the last measurable rain — the color deepens
|
|
the longer it's been dry, and resets to blue on a rain day.</dd>
|
|
</dl>
|
|
</section>
|
|
|
|
<p class="guide-back"><a href="./">← Back to Thermograph</a></p>
|
|
</main>
|
|
|
|
<script type="module">
|
|
import "./nav.js"; // header view-links follow the last location
|
|
import "./units.js"; // the °F/°C toggle
|
|
import "./account.js"; // header sign-in entry + notification bell
|
|
// The scale rows come from the shared tier tables, so this guide can't
|
|
// drift from what the app actually shows.
|
|
import { SCALE_TEMP, SCALE_RAIN } from "./shared.js";
|
|
const row = ({ c, label, range }) =>
|
|
`<div class="guide-seg"><span class="guide-sw" style="background:var(--${c})"></span>` +
|
|
`<span class="guide-lbl">${label}</span><span class="guide-rng">${range}</span></div>`;
|
|
document.getElementById("temp-scale").innerHTML = SCALE_TEMP.map(row).join("");
|
|
document.getElementById("rain-scale").innerHTML = SCALE_RAIN.map(row).join("");
|
|
</script>
|
|
</body>
|
|
</html>
|