Analyst Quadrant Brand Recognition Awards Block for React

Edit VENDORS at the top of the file. Each has a name, a vision and an execution score from 0 to 100, and ours for the one the page is about. The ranking, the numbers on the dots, the dot positions and each vendor's position are all worked out from those scores, so nothing else needs editing. Keep the dots apart: two vendors with nearly equal scores would overlap.

By the half-way line on each axis: 50 or more on vision and on execution is a Leader, high execution with lower vision a Challenger, high vision with lower execution a Visionary and the rest are Niche players. The crossing lines on the chart are drawn at 50, and the position names are in its corners.

No. Driftgate Research, the six other vendors and every score are invented, and the chart is not a real market. Don't use a made-up quadrant as evidence: for a real report, quote the analyst's own figure under its licence.

As the table: a caption names the report, and each row reads the number, the vendor, the position and the two scores, with the vendor's name as the row header. The chart is a drawing hidden from assistive technology, and its caption says how to read it.

No. A chart's axes are spatial, so the plot and its labels keep their direction (vision always runs the same way across) while the table and the heading mirror. Numbers sit in bdi elements.

The table comes first, and its position column folds into the vendor's cell as a second line. The quadrant follows in its frame at the width of the screen, with the corner names a size smaller. Nothing scrolls sideways at 320 pixels.