Radar Criteria Spider Reviews Block for React

From the REVIEWS array: each review has a reviewer group and six scores from 1 to 5 in the order of CRITERIA. A group's score for a criterion is the average of its reviews, to one decimal; Everyone averages all eighteen, including the four weekend riders who are not in the toggle. The outlines, the labels, the list and the table are all computed from those scores, so they always agree.

Six axes from the middle of a 100 by 100 box, each ring a polygon at one point of the score, the outlines polygons whose vertex on an axis sits at its score over five. The strokes keep a constant width however the chart scales, and the polygons grow from the middle once on load unless reduced motion is on. The names and scores are HTML placed by CSS variables, so the text stays crisp.

It is a single-choice group of buttons: Tab reaches it, the arrow keys move between groups and Space or Enter picks one. One group is always chosen. Its choice redraws the solid outline and rewrites the labels and the list. The group takes a value list and a change handler that receives the new list.

The drawing is hidden from assistive technology; the description list beside it says the chosen group's score for each criterion against everyone's with the gap, and an unseen table lists all three groups' scores for every criterion. Nothing is shown by colour: the groups differ by a solid and a dashed outline.

The header and the toggle come first, then the chart in its frame at the width of the screen, then the list. The criteria names stay round the chart at 320 pixels, and nothing scrolls sideways.