From 9f3c2caabcd2787a4259cee94cfe5ccd545a6b6e Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sat, 11 Jul 2026 18:49:22 -0700 Subject: [PATCH] Compare: label every bar segment with a key; drop the colored caption (#73) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The bar showed each segment's share but not what it meant, leaning on the coloured below/above-comfort text to explain it. Replace that text with a per-card key directly under the bar: a colour swatch + plain name + share for every bucket present (Too cold / Cool / Comfortable / Warm / Too hot), in the same cold→hot order as the bar. Every span is spelled out, so a 1% sliver is as clear as a 60% block, and small segments no longer need to fit a label inside them. Bar segments also carry a hover title. The redundant top legend is removed (each card now names its own colours), and the leftover summary line keeps just the tolerance share and typical miss. --- static/compare.js | 57 +++++++++++++++++++++-------------------------- static/style.css | 31 +++++++++++--------------- 2 files changed, 38 insertions(+), 50 deletions(-) diff --git a/static/compare.js b/static/compare.js index 53648e0..01de8ec 100644 --- a/static/compare.js +++ b/static/compare.js @@ -331,17 +331,6 @@ const pct = (v) => `${v < 10 ? v.toFixed(1) : Math.round(v)}%`; // Temperature *differences* (avg miss, typical miss) in the active unit. const deg = (v) => fmtDelta(v); -// Names the five bar colors once, above the ranked cards. -const LEGEND = - ``; - function renderLocList() { locList.innerHTML = locations.map((l, i) => { let label, cls = "cmp-chip", lead = ""; @@ -358,29 +347,33 @@ function renderLocList() { }).join(""); } +// The five day-buckets, ordered cold → hot: css color class, plain-language name, +// and the stat key holding its share of days. Drives both the bar and its key. +const BUCKETS = [ + ["cmp-seg-vcold", "Too cold", "belowOutPct"], + ["cmp-seg-cool", "Cool", "belowTolPct"], + ["cmp-seg-comf", "Comfortable", "comfortPct"], + ["cmp-seg-warm", "Warm", "aboveTolPct"], + ["cmp-seg-vhot", "Too hot", "aboveOutPct"], +]; + // A ranked place: the 0–100 match score up top, then one full-width bar showing how -// this place's days split across five temperature buckets, ordered cold → hot using -// the site's own temperature colors — too cold, cool (within tolerance), comfortable, -// warm (within tolerance), too hot. The whole bar is 100% of the days, so every -// segment is a real share and a place that runs cold vs one that runs hot read at a -// glance (more blue vs more red). The legend above the cards names each color. +// the place's days split across the five temperature buckets (cold → hot, in the +// site's own colors), and directly beneath it a key that names every bucket and its +// share — so even a 1% sliver on the bar reads clearly. The whole bar is 100% of the +// days, so more blue = runs cold, more red = runs hot. function rankCard(loc, s, rank) { const win = rank === 1; - // Label a segment inline when it's wide enough to fit the number legibly. - const seg = (cls, w) => (w > 0 - ? `${w >= 10 ? `${Math.round(w)}%` : ""}` - : ""); - const bar = `