Bars show scheduled window (departure → arrival). Width = duration. Color = convoy type. Hover for detail. Filter by type or select a different day.
A timetable organises scheduled events along a time axis and a categorical axis (routes, rooms, people, vehicles). The Data Visualisation Catalogue describes it as a reference and management tool — its primary function is lookup, not pattern discovery. This visual form is a specific interpretation: a Gantt-style timetable where bars encode duration as width rather than simply listing departure and arrival times in text cells.
In D3, the time axis is a d3.scaleTime() with a synthetic date domain — all events are normalised to the same calendar date (2024-01-01) so only the hour and minute matter. Each row is a d3.scaleBand() slot. Convoy bars are <rect> elements positioned at xScale(parseTime(departure)) with width xScale(arrival) - xScale(departure). This pixel-precise mapping is what standard spreadsheet timetables cannot provide: a 4h15m convoy bar is visually 15 minutes wider than a 4h00m bar.
A text timetable (the form used for train schedules in printed books) is superior when users need to look up a specific departure time. Scan to the route row, scan to the time column, read the cell. The lookup is O(1) with a trained eye. A visual timetable is superior when users need to see patterns across routes: which routes overlap in ways that create vehicle conflicts; where the morning window is underused; how long each route takes relative to its neighbours. Monday's timetable makes it immediately visible that routes r2 and r3 both operate through the 07:00–14:00 window — potential competition for the same relay vehicles — which would be invisible in a text table.
The two forms answer different questions. "When does the next Garissa convoy leave?" is a text-table question. "Is there a gap in Northeast coverage between 14:00 and 17:00?" is a visual-timetable question. The chart here was built for the second question — an operations planner scanning for gaps, overlaps, and cancellation patterns — not for passengers checking departure boards.
Google Docs, Excel, and Apple Numbers render timetables as fixed-cell grids. A 1-hour convoy and a 6-hour convoy both occupy one cell. D3's continuous time scale maps duration to pixels precisely — the Northwest Lodwar convoy (12 hours, 06:00–18:00) takes up 85% of the row width, and this is immediately legible as a full-day commitment without reading any numbers. Status encoding (opacity for completed, amber border for delayed, dashed border for cancelled) layers operational intelligence onto the schedule without adding columns. Hover tooltips surface detailed notes. Day and type filters reduce noise to the relevant slice. None of this is available in standard table tools.
Unlike bar charts, timetable bars should not start at zero — they start at the departure time. The axis baseline is the opening of the operational window (06:00 here), not zero. This is the correct approach: a bar starting at 06:00 means the convoy leaves at 06:00; starting at 00:00 would mean the entire time between midnight and departure is visually wasted space. The left edge of each bar is its scheduled departure; the right edge is its estimated arrival. Length = duration. This is semantically correct and visually efficient.
The FT Visual Vocabulary places timetables and Gantt charts in its Change Over Time category as a reference subtype. Its guidance on the table vs. visual distinction: use a text table when precise value lookup is the primary task; use a visual form when relative duration, overlap, or pattern across multiple entities is the analytical goal. The timetable is the only major chart type in the FT Visual Vocabulary that is explicitly described as a reference tool rather than an insight tool — the distinction matters for design decisions about density, precision, and interaction.
The x-axis uses d3.scaleTime() with domain [new Date(2024,0,1,6,0), new Date(2024,0,1,20,0)] — an arbitrary single date where only hours and minutes carry information. All convoy departure and arrival strings are parsed by prepending this same date. The day selector swaps which subset of convoys is drawn, but the time axis never changes. This separation of day from time-of-day is the correct abstraction for operational timetables: the axis represents the rhythm of a day, and the day selector represents which calendar day's data is displayed. Using a multi-day time scale would make the chart a timeline rather than a timetable.