Machine-readable page content
Canonical: https://semiotic.nteract.io/examples/climate-radial-weather
Brushable Weather Rings
Years are cycles, and weather patterns make more sense when you can see the cyclical nature of weather patterns mapped to years. But it still helps to see it as a straight line, so here's a radial brush to get that, too.
New York
Daily temperature range and conditions with a 1991–2020 baseline
110 FHistorical Jun 26 high
Showing historical dataA local 1991–2020 reference is ready to explore.
How it works
The controls use browser geolocation and Open-Meteo's archive and forecast APIs. The display is a radial/linear pair: an OrdinalCustomChart in radial projection, an external custom control (in this case a circular brush), and two alignedTemporalHistogram detail charts. The current-year marks and condition rings use available daily observations and forecast values; the full-year reference uses a computed 1991-2020 baseline. The orange marks show when temperature goes beyond the normal variation of temperature during that time of year while still showing min and max for context.
Implementation Excerpt
JSX
<RadialWeatherOrdinalChart weather={weather} brush={brush} setBrush={setBrush} selectedLabel={selectedLabel} /> <LinearDetail rows={selectedRows} conditions={selectedConditions} />
Live data comes from Open-Meteo without an API key. Preset locations use bundled 1991-2020 summaries; a browser-provided location computes and caches its baseline locally. The deterministic generator remains available when the network or service is unavailable.