React Constellation Diagram

How an RF or SerDes engineer tells "the link works" from "the link is one degree of phase noise away from not working". Ideal symbols, the received cloud around them, and the number that summarises the gap.

16-QAM receive constellation — lane 0

QAM16 · 16 symbols · 1200 samples

EVM 7.01% · Good
IQ
EVM (RMS)
7.01 %
Mean error vector
0.0701
Worst symbol error
0.1847
Modulation
QAM16
Bits / symbol
4

EVM is the RMS distance from each sample to its nearest ideal symbol, as a percentage of the reference RMS amplitude. Typical limits: 12.5% for 16-QAM, 8% for 64-QAM.

Installation

npx shadcn@latest add "https://kelvinui.com/registry/constellation-diagram.json"

Props

PropTypeDescription
samplesIQSample[]Received symbols, { i, q }
scheme"qpsk", "qam16", or "qam64"Generates the ideal grid
idealIQSample[]Explicit ideal points, overrides scheme
sizenumberSVG edge in px (default 340)

EVM, and why the normalisation matters

Error Vector Magnitude is the RMS distance from each sample to its nearest ideal symbol, expressed as a percentage of the reference RMS amplitude. Both halves of that definition are easy to get wrong, so both are explicit here: computeEvm is exported, matches each sample by nearest-neighbour, and divides by the RMS of the ideal constellation rather than by the peak — dividing by peak amplitude is a different (and flattering) convention that will make your link look better than the standard allows.

Ideal points are generated with unit mean symbol power, which is what makes EVM comparable across QPSK, 16-QAM, and 64-QAM. Without that normalisation a 64-QAM constellation would report a systematically different EVM for identical noise.

The quality banding follows the usual limits — roughly 12.5% for 16-QAM and 8% for 64-QAM. The demo adds Gaussian noise plus a 1.6° residual carrier phase error, which is why the cloud is very slightly rotated: exactly the signature you look for when distinguishing a noise problem from a carrier-recovery problem.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.