The plan wanted "dashboard elements" from the first notes, and the Circuit layer gave signals their paths. A metric on this grid is a number drawn as blocks, and a block has whole cells — so every widget here draws the part of the value the grid can hold and writes the rest. The numeral is exact; the meter fills whole microcolumns of the union with both grids as its ticks; bars are whole rows; a sparkline is a walk along grid lines, one sample per microcolumn, snapped to the half-row. The quantisation error is written on the block, never hidden. The source of a dashboard is a table, as the plan's kind inference says; and live numbers are observed, not animated: sampled twice a second, never while hidden, the one that changed last carrying the signal.
The numbers are real: the ten section ratings from the course-audit radar chart the live site publishes as a picture (AXI-019 placed the picture; this draws the numbers). The table below is the source and stays in the document as the accessible content — the widgets are drawn from it and hidden from assistive technology, so the reading order is the table's. Ten bars of whole rows with the value called out on each bar's top edge by CSS anchor positioning; three numerals; and the one that matters most to the client as the big numeral.
| section | rating | of | note |
|---|---|---|---|
| Instructional design | 4.5 | 5 | |
| Content & readability | 4.6 | 5 | |
| UI & visual design | 4.7 | 5 | +0.3 |
| Learner journey | 4.5 | 5 | |
| Strategic readiness | 4.7 | 5 | |
| Coherence | 4.4 | 5 | |
| Platform | 5.0 | 5 | +1.0 |
| Multimedia | 4.2 | 5 | |
| Accessibility | 4.0 | 5 | −0.5 |
| Assessment | 3.0 | 5 | −1.0 |
One value — Assessment, 3.0 of 5 — drawn three times across the page: on the base grid alone (seven ticks, a seventh each), on the overlay grid alone (five ticks, a fifth each), and on the union (thirty-five microcolumns, both grids as ticks). Each fill is whole cells of its ruler; the exact value is written beside it and the error after that. Below, the same value on a two-column meter, where the union gives only ten microcolumns. value changes the number and the fills snick to their new cell.
A series seeded from the day — seventy samples — drawn in a block of seven columns, then three, then one. A sparkline holds one sample per microcolumn, so the wide block shows the last thirty-five at 7×5, the three-column block the last fifteen, the one-column block five; the value is snapped to the half-row, the sky's unit; and the line only ever runs along a row line or a column line, turning at corners, which is the Circuit's law for a signal. grids shows the half-rows and microcolumns the line is walking.
The charter allows no service, so live means the page's own numbers: seconds since it was read, how far it is scrolled, how fast, and how many frames the browser drew in each half-second. The widgets sample twice a second and never while the document is hidden; nothing catches up on return — the latest value is shown, not a journey to it. The block that changed last carries the signal for a moment and then rests in navy, so four live widgets have at most one signal at a time: the plan's "the block that just clicked in", for numbers. Scroll, and watch the meter and the two walks.
A dashboard is where a design system usually gives up. Numbers want precision and a grid wants cells, and the ordinary answer is to let the chart library draw whatever it likes inside a box and call the box a block. This study refuses the box. A meter is a block whose fill is a count of microcolumns; a bar is a count of rows; a sparkline is a path that turns only at corners. Each of them can show only what the grid can hold, and the first finding is that this is not a loss but a division of labour the system already had: the figure shows the value to the resolution of the lattice, the numeral shows it exactly, and the difference — the quantisation error — is written on the block, where the plan's annotation voice was always meant to live. A reader who wants the number reads the number. A reader who wants to see the number against the others reads the blocks, and can count them, because the two grids are the ticks.
The union turned out to be the ruler. A meter scored to the base grid is honest to a seventh, which is coarse; to the overlay, a fifth, coarser; but to the union, a thirty-fifth, which is finer than most dashboards need, and the interference of the two grids gives it tick marks in sevenths and fifths at once. The sparkline found its law in the Circuit: one sample per microcolumn, the value snapped to the half-row, the line walking only on grid lines — a Boogie-Woogie of data. And the live widgets found theirs in the clock: sampled, never animated; silent while hidden; the one that changed last lit, and only that one, so that a page of numbers keeps the one-signal law. The plan's kind inference closes the loop: a table is the source, and the table stays in the page for anyone who reads with a machine.
Fourth study of the night; the draw taken with the date suffixed. Five sentences:
A heading plus a paragraph plus a link infers a claim block; a table infers stats; a blockquote with a citation infers a testimonial; a list of h3s infers a process.answered as law 1: the dashboard is drawn from a table, which stays in the document as the accessible content
Stage A · seeded composition · blocks are inserted in reading order, so DOM order stays sane for screen readersanswered with law 1: the widgets are hidden from assistive technology and the table is read in its own order; nothing a screen reader meets is a drawing
Two to watch, not lean on yet: anchor positioning for annotation callouts, text-box-trim for optically perfect block typography.answered as law 4: the bars' value callouts are placed by CSS anchor positioning where the browser has it, and fall inside the bar where it has not — watched, and leaned on with a fallback
IBM Plex Mono is the annotation voice: labels, grid coordinates, captions, dashboard numerals — the instrument-panel register of Direction C.answered as law 2: every numeral, label, delta and error line on this page is Plex Mono, tabular, on the √φ scale
Isotope.js Behavior yes, library probably not Its packing logic fights composed placement — masonry decides positions, our system declares them.considered: the same holds for chart libraries — a library decides a chart's geometry, this system declares it in cells
draw.js| Constant | Value | Why |
|---|---|---|
| source | table[data-stats] · label, value, of, note · widgets aria-hidden | law 1: a table infers stats; the table is the accessible content |
| numeral | Plex Mono 600 · tabular · s6 / s5 / s4 by edition, s8 big · precision = the table's | law 2: exact, in the annotation voice |
| meter | q = round(v/max × s × overlay) microcolumns · ticks at base and overlay lines · error = q/m × max − v | law 3: the union is the ruler; 1/35, 1/15, 1/6 across the page by edition |
| bars | h = round(v/max × (rows − 1)) · last row for labels · callout bottom: anchor(top) | law 4: whole rows; anchor positioning watched, with a fallback |
| sparkline | one sample per microcolumn · y snapped to row/2 · path M H V only · last sample a signal square | law 5: a walk along grid lines; a block of s columns holds s × overlay samples |
| live | 500 ms · not while hidden · no catch-up · the last-changed block lit 1200 ms | law 6: observed, not animated; one signal at a time |
| snick | fill width and bar height on the snick curve, 400 ms | law 7: the value clicking into its cell is assembly |
| feed/score | script: --q --m --h --avail, the path, data-exact, data-drawn, data-error, data-res, data-lit · stylesheet: fills, ticks, bars, callouts, lit, snick | law 8 |