Scatter Plot Stats Block for React

Edit PRODUCTS at the top of the file (a name, a price and a rating each) and the axis constants PRICE_MAX, RATING_MIN and RATING_MAX. The medians, the trend line, the correlation and its share of the rating, the quadrant counts, the three outliers (the largest distances from the trend line) and the headline are all computed from the list. Keep the data away from the corners if you keep the quadrant labels there.

A product is cheap if its price is under the median price and loved if its rating is over the median rating, so each quadrant holds a count that always adds up to the total. The cross-lines are drawn at the same medians, and the key says what they are. The labels sit in the plot's corners, and the dots keep a ring of the page colour so overlapping points stay separate.

They do nothing, so they aren't buttons: a control that goes nowhere only adds tab stops. Every reading is in the unseen table with its quadrant, and the three outliers are named in the plot and in the takeaways. If you add something to do on a dot (open the product, say), make it a real button with a name and a visible focus ring, and announce what it picked in a live region.

The plot is hidden from assistive technology. The figure's caption states the medians and the trend, an unseen table lists every product with its price, rating and quadrant, and the takeaways give the correlation, the biggest group and the outliers in words. Numbers sit in bdi elements and the plot box is forced left to right, so price grows from the start in every language.

The plot becomes taller than it is wide, the quadrant labels wrap and the outliers keep a larger dot but lose their name tags, which the takeaways list in the same order. The header, the plot and the takeaways stack with the plot second, so the chart is still near the top. The figure fades up once on load; with reduced motion it is simply there.