Four stills of the axis

What changed

Right after the “Shape of the collection” band and the button into the axis stands a new section, “Example records on the timeline”. It holds four cards: the whole axis, 1970–1979, 2022 and August 2026. The 6-in-1 chose these periods. Each card carries a miniature of the axis at that period, and under it the period’s name and how many records it holds. The whole card is one link to that same state of the axis. On a tablet and a desktop the cards stand two by two; on a phone, in one column.

Why drawn and not captured

Screenshots would go stale with every data package. August 2026 took six records on the very day this task was set. There would also have been sixteen of them: four periods, two languages, a light and a dark theme. Keeping them fresh would have needed a script of its own.

The miniature is drawn during the build instead. The layout comes from the same functions as the axis: densityView cuts the period into stretches, and packMarks places the marks and collapses dense runs into clusters. So after the click the reader sees the same picture, only larger. The topic colours and shapes, the hatching of empty stretches and the highlight of the newest year come from CSS variables. That is why the miniature follows the theme on its own.

The front page still carries no script. The four miniatures weigh about 2.6 KB together after compression, and the page’s budget (12 KiB) still has room.

What a miniature costs

Looking at the finished section, the 6-in-1 named its drawback. A miniature is smaller than the axis on a laptop, so packMarks collapses more records into round clusters. A screenshot at a large scale would have shown more single marks with their colours and lines. The decision is to keep it as it is: performance matters more. The trade-off is written in the comment beside the section, so that nobody reopens it as a flaw.

The same evening the 6-in-1 swapped two periods: 1980–1989 for 1970–1979, and 2025 for 2022. The whole axis and August 2026 stayed. Only the list of periods on the page and in the tests changed; the generator is the same.

Shared code, not a copy

The ticks, the hatching, a cluster’s size and the period’s name used to be worked out inside the axis component. They are now plain functions in src/ui/density.ts: laneGuides, markSizes and periodRange. Both the axis and the miniatures use them, so a change on the axis reaches these too. The axis behaves as before, and its browser tests confirmed it.

A card names its period in the words of the axis’s toolbar. That is why August reads “August 2026”: it is what the axis will call it after the click.

An old flaw in the band

The previous pass found an accessibility flaw on the front page and left it for this task. The whole frame of the band had the role of an image, decade links included. A screen reader treats an image as whole, with no parts, so the links ended up inside something that has none. Now only the band’s drawing has the image role and its description, and the links stand beside it. The accessibility check now runs over the whole front page rather than one row, and it is clean.

What was checked

npm run verify:code passed. A unit test draws all four miniatures from the live data and checks each count against densityView. Another takes an empty period and checks that it shows only hatching and a count of nought. The browser tests of the front page and the axis that the change touched passed in Chromium. A new test checks each card’s address against timelinePath. It counts the records from the dates in the data, not with the axis’s functions. It also checks two columns at 800px, one at 393px, and that nothing scrolls sideways. The full run is CI’s, after the push.