Count Buckets Histogram Stats Block for React

Edit COUNTS at the top of the file: one count per bucket, from the smallest orders up. WIDTH is the width of a bucket in dollars; the last bucket has no upper edge and is labelled "$175+". For another number of buckets change grid-cols-8 in the two lists to match. Heights, the total, the median bucket (where the running count first reaches half) and every share are computed.

Each column's height is its count as a share of the biggest count, over the room the chart leaves under the count labels, so the tallest column never touches the label above it. Counts are written above every column, so the chart can be read without the heights.

Yes. The columns are drawn for the eye and hidden from assistive technology; the chart has an accessible name that lists every bucket and its count, and a visually hidden table inside the figure gives each bucket's count and share. The three figures are a description list in text. The chart box is dir="ltr" because order values run from small to large in every language, and values sit in bdi elements.

All eight columns stay, narrower, and the labels switch to each bucket's lower edge with every other one shown. The caption says so. The three figures stay in one row. Nothing scrolls sideways at 320 pixels.

The header and the figure fade up once on load, the columns grow from the baseline one after the other and the counts fade in, and the order total rolls up when it scrolls into view. With reduced motion everything simply appears.