How this site draws its diagrams, charts, and interactive figures, each one shown with the site's own numbers.
Each figure here is built from the same parts a note or a research entry uses, drawn with the site’s own numbers as of 2026-10-20, and grouped by the job it does. Switch your system to dark mode and every figure follows; on a phone, the line chart, the small multiples, and the instrument change to drawings of their own.
The Palette
Every figure is drawn in these nine values. On the page each one becomes a color of the theme, so the drawing turns with dark mode, while the file on its own stays correct in light. Words take #000000, #555555, or #6E6E6E.
Lines
Two weights of ink, one context line, one dash, one leader. Strokes keep their width at any scale.
Diagrams
A system
One brain, five surfaces, from the Ambient Computing stream, at the page’s full width so every word is 14 px or more. The brain is the subject, so it alone takes the 2 px line and the surface fill; what runs outside it is dashed.
A pipeline
How a page gets from a text file to ttvl.co, and how a dispatch also leaves as email. Steps carry their numbers like the sections of a note.
A tree
The site’s sections and the pages in each.
Spans in time
Each section from its first page to its latest. The dashed line is today.
Events in time
Every Flâneur dispatch. Dispatches that went out within days of each other stack.
Eras on a timeline
The newsletter’s dispatches under its two names, the names by year as the newsletter page gives them. Eras are bands above the axis, named at their edges; events stay dots.
Shapes for an argument
Five shapes a note’s argument can take, filled with the site’s own parts: its sections between a record and an argument, how long and how often they come, the research loop, what holds an entry, and the studio’s layers.
States and transitions
A research question’s life. A state that isn’t real yet is dashed; a loop is something that can happen without changing the state.
A sequence of messages
Finding a drawer from the phone, from the Ambient Computing stream: each message a line from one part to another, in order down the page.
Sizes to scale
Three film formats at one scale, 2 px to the millimetre, each with its dimension lines; 6×7 at its nominal size. The same drawing would compare paper sizes or the notebook’s 95 × 171 mm page.
A keyboard
The keys this site answers to: ? opens search, the arrows select results and move between entries and months, return opens, esc closes, and cmd shift L links to a selection (control on other systems).
Research reached 28 entries in its first three weeks.
A line over time
Words in each Log month. One line, labeled at its end and at the one change worth naming.
Two Series
Side by side in rows
Log2025: 122026: 9
Research2025: 02026: 28
Notes2025: 52026: 10
Darkroom2025: 82026: 0
Project Humane2025: 02026: 7
Flâneur2025: 52026: 4
Obsidian2025: 22026: 4
2025
2026
Pages published in each section in 2025 and in 2026 so far. Built in HTML like the single bar list, so it reflows on a phone.
Side by side in columns
Notes and Flâneur dispatches published each year. With a dozen small counts the values sit on the columns and the gridlines go.
On one scale over time
Notes and dispatches counted up since 2021 (one note predates it). Both reach 17 in 2026-10: the dispatches over six years, most of the notes since 2025. The comparison is an optional layer.
Before and after
The same numbers as the paired rows, drawn for the change: each row runs from 2025 to 2026, rises first and falls last, with the values in columns at the right.
Part to Whole
Counted one by one
Measured 2
Confirmed 34
Product specification 16
CAD drawing 11
Derived 3
Estimated 113
Every recorded fact in the studio specification, from the Ambient Computing entry on what to measure next: 63 known, 116 still to check.
Year by year
Log months by length. Through 2024 none reached 250 words; since 2025 almost all have. Bars keep their true length, so 2026 stops at nine months.
Difference
Above and below a baseline
Each Log month against the 2019–2024 median of 94 words: above it in ink, below it in tone 3.
Distribution
How one measure spreads
Words in each Log month, counted in steps of 25: two humps, one for each way of writing the Log.
Relationship
Two measures of the same thing
Every Log month by its bullets and its words. Since 2025 the bullets themselves run longer, from about 10 words each to about 30.
Calendar
Year by month
Show
Every Log month in four steps. The control switches the measure; the steps of each are in the key.
Small Multiples
One small chart per year
Words in each Log month, one panel per year, every panel on the same 0–500 scale so their heights compare. Four across, two on a phone.
In Tables and Text
Bars in a table
Pages in each section, the right-aligned column drawing its own bars:
Section
Since
Pages
Log
2019
93
Research
2026
28
Notes
2018
17
Flâneur
2021
17
Darkroom
2024
12
A sparkline in a sentence
The Log has run for 93 months, and its months have grown from about 100 words to more than 300.
Darkroom
The zones
The Zone System’s eleven zones as tones of a print. They’re the paper’s tones, not the page’s, so they stay put in dark mode.
A characteristic curve
A film’s characteristic curve in outline, density against exposure. Schematic: no film was measured for it.
Instruments
The two series over time above carry a toggle and the calendar a segmented control; both work by CSS alone. A scrubber moves through marks:
2026-10-19 · 3 entries in Ambient Computing
Research entries per day, from the journal’s first day to its latest entry. Drag the scrubber, or move across the chart, and the readout names the day.
Pictures
An illustration made for one page, a shelf in elevation or a drawer from above, stays an image. Drawn on white in the palette and in Plex, it stands on a white plate in both themes, framed like any picture.
The Bookshelf from the Ambient Computing stream, a PNG drawn on white.
Annotated
12345
The place, highlighted in the model
Its address
The unit drawn, the place filled
The room’s letter
Devices nearby and their states
A place card from the studio viewer, from the Ambient Computing stream, its parts numbered beside them rather than on them.
Compared
Solaris, 1972Street View
Drag across the frame, or use the arrow keys: the view from Minami-motomachi Park in Tarkovsky’s film and today. The Solaris highway article compares each of its eight places this way.
Step by step
Folding a sheet into a signature. Photographs of a process would take the same strip.
Making Figures
Drawn by the build
Pages published each year, the Log’s months apart, drawn by Hugo from the site’s own pages whenever it builds: it changes when the next page goes out.
From a spreadsheet
tools/chart.py turns a CSV like this into a chart in the palette, written beside it for the drawing shortcode:
uv run tools/chart.py columns static/visuals/figures/research-kinds.csv --width 360
research-kinds.csv
kind,entriesProgress,21Question,5Finding,2
What it draws: the research journal’s entries by kind. A line over dates is chart.py line.
In the email
The line chart as a Flâneur email would carry it: a PNG 600 px wide, light in every mail client, from tools/drawing-png.py --width 600. Its words shrink with it, so a chart meant for a dispatch would be drawn at 600 px.
