A static-first recreation of a point climate comparison: current-year daily mean temperature against a historical daily mean, framed by a hatched 5th-95th percentile band.
Amsterdam, NL
Jan 1 to Jul 8, 2026. Open-Meteo daily mean against a 1991-2020 baseline.
Showing historical dataA local 1991–2020 reference is ready to explore.
5th-95th percentile range
Current year
Below average
Above average
What This Shows
Semiotic owns the axes, hover behavior, responsive frame, and the red-blue difference fill. The example adds art-directed overlays as chart-aware SVG: a much lighter hatched percentile envelope, the black current-year curve, a quiet adjusted-mean reference, and the vertical today marker.
The location controls take a latitude/longitude directly (or your browser location) and use Open-Meteo's keyless historical archive and forecast APIs in the browser. The example computes the daily historical mean and percentile band from 1991-2020, then overlays available 2026 observations and forecast values. A deterministic local profile remains as the offline fallback.
Implementation Excerpt
JSX
<DifferenceChart data={observedRows} xAccessor="day" seriesAAccessor="actual" seriesBAccessor="adjustedMean" seriesALabel="Above average" seriesBLabel="Below average" seriesAColor="var(--semiotic-danger)" seriesBColor="var(--semiotic-info)" areaOpacity={0.82} curve="catmullRom" showLines={false} showLegend={false} showGrid responsiveWidth xExtent={[0, END_DAY]} yExtent={yDomain} frameProps={{ background: "transparent", // The callback now receives the chart's resolved scales — the overlay // anchors to the same x/y the chart drew instead of re-deriving them. foregroundGraphics: ({ scales }) => ( <ClimateOverlay rows={rows} observedRows={observedRows} scales={scales} /> ), }} />
This is a simple proof of concept based on the Point WXdaily climate view; visit the original for the full experience. Live data here comes from Open-Meteo without an API key. Preset locations use bundled 1991-2020 summaries; arbitrary locations compute the same baseline once and cache it in the browser for two weeks.