← Back to Daily Builds

Daily build note · October 19, 2026

Daylight Ribbon

See a whole year of sunrise and sunset as one ribbon, count the dark mornings and dark evenings, and compare switching clocks twice a year with standard time or DST all year.

Civic / Data Toys Interactive demo live Static HTML/CSS/JS

What shipped

Daylight Ribbon draws a whole year of sky as a single chart. Each day is a thin column. Night is dark, civil twilight is slate blue, and daylight is gold, plotted against the clock time you'd actually see. The ribbon's top edge is sunrise and its bottom edge is sunset, so you can see it jump an hour at each clock change. Set a dark-morning line (default: sunrise after 7:30 AM) and a dark-evening line (default: sunset before 5:00 PM). Purple wedges mark the mornings that start in the dark and red wedges mark the evenings that do. Pick any day by tapping, dragging, or using the arrow keys. A 24-hour sun dial then shows that day's daylight and twilight arcs, with sunrise, sunset, the change vs yesterday, and the next clock change with before → after times. Play year sweeps through all twelve months. The same sky is scored under three policies, switch twice a year, standard time all year, and DST all year, and the policy with the fewest dark ends gets a star. Verdict chips: BRIGHT, DARK MORNINGS, DARK EVENINGS, BOTH ENDS, POLAR, and EMPTY. Sun times come from the NOAA solar-position approximation and run entirely in the browser. You can copy a markdown daylight report stamped in America/Chicago time, and state saves under daylight-ribbon-v1.

How to try

  • The demo opens on Nashville with today's date selected: sunrise about 6:58 AM, sunset about 6:06 PM. The next change is Sun, Nov 1 (fall back), when sunset jumps from about 5:52 PM to 4:51 PM. Under today's switch there are 0 dark mornings and 79 dark evenings, so the verdict is DARK EVENINGS.
  • Load Sunshine Act (Nashville on DST all year). The red wedge is gone, but 90 winter mornings now start in the dark, with a latest sunrise around 7:59 AM. The verdict flips to DARK MORNINGS.
  • Ely, MN (Boundary Waters) shows the high-latitude squeeze, with about 87 dark mornings and 88 dark evenings: BOTH ENDS. Honolulu never changes its clocks and stays BRIGHT. In Utqiaġvik, AK the sun never rises for about two months and never sets for nearly three, so the verdict is POLAR.
  • Drag the morning and evening lines to match your own routine, click a policy row to switch to it, or type any latitude, longitude, and UTC offset. Then hit Copy report to paste the comparison into a thread.

Why this (vs neighbors)

The last stretch of builds leaned on calculators and scorers. Bus Bunch showed that a visual toy lands better, so this is another big picture you can poke at, timed to the Nov 1 fall-back. Timezone Handshake finds meeting overlap across zones. Nothing in the catalog looks at the sun itself or at the trade-offs in the permanent-DST debate, which is easier to understand when you can see the wedges move from evenings to mornings.

Scope trim

No city search or geocoding, no time-zone database (you type the standard UTC offset), only US and EU DST rules (no southern-hemisphere rules), no elevation or horizon correction, no moon, and no solar-panel yield. It only needs to be accurate enough to argue about clocks, not to plan a launch.

Limitations

  • The NOAA approximation is typically within a minute or two at mid-latitudes and drifts more near the poles. Times assume sea level and a flat horizon.
  • DST is applied for the whole day of a change, since the switch happens at 2 AM, before sunrise. Polar-night days count as both a dark morning and a dark evening, and midnight-sun days count as neither.
  • The verdict uses simple day counts. BRIGHT means both counts are ≤ 14. DARK MORNINGS or DARK EVENINGS means one count is more than twice the other. Anything else is BOTH ENDS. Your own lines decide what "dark" means.

Suggested next steps

  1. Add a small built-in city list with real time-zone rules (including southern-hemisphere DST) so you don't have to type coordinates.
  2. Overlay two places on one ribbon (e.g. Nashville vs Detroit) to show how position inside a time zone changes the argument.
  3. Add a "school bus line" and a "commute line" with per-person counts, then encode the setup in a shareable URL.