Box Plot Stats Block for React

Edit ROUTES at the top of the file: a name and a list of times for each. Everything else is computed. The quartiles use linear interpolation between neighbouring readings, a whisker reaches the furthest reading within 1.5 box lengths of the box, and anything beyond is an outlier drawn as a hollow dot. Set AXIS and TICKS to the range your data needs; the rows are sorted by median.

The box spans the first to the third quartile, so half of the deliveries fall inside it, and the thick line inside is the median. The thin line (the whisker) runs to the quickest and the slowest delivery that isn't an outlier, and a hollow circle is a delivery far outside the rest. The median is written at the row's end and the box's range under the route's name, so no number depends on reading the drawing.

The plots are hidden from assistive technology. Each row is a list item with a heading for the route, its middle half and its median in text, and an unseen table repeats every route with its whiskers and outliers in one sentence. The minus and range text sit in bdi elements and the plot boxes are forced left to right, so the axis grows from the start in every language.

The band ends the block. On a page the next section draws its own top rule along the band's foot, so a bottom border here would double it, and the column has no bottom padding for the same reason. The band's top rule comes from the Guides component with a + on each rail. If nothing follows the block, add a bottom border to the figure.

Each row becomes two lines: the route and its median, then its plot at full width. The axis keeps one label every 40 minutes and the hairlines behind the rows stay, so the plots still share a scale. The box grows from the start once on load; with reduced motion it simply appears.