An SVG spot-diagram plot for optical lens design that shows ray-intercept points per field angle, colored by wavelength or field, with the Airy diffraction-limit circle and RMS/GEO spot-size readouts. Ported to React from the ELEO UI Svelte component by ELE Optics (eleoptics.com).
import SpotDiagram, {
type SpotDiagramData,
} from "@/components/ui/spot-diagram";
/* Same synthetic trace shape as the default demo, shown with colorBy="field" instead of the default "wavelength". */
function makeFieldSpots(spreadUm: number): number[][][] {
const wavelengths = 3;
const perWl: number[][][] = [];
for (let wi = 0; wi < wavelengths; wi++) {
const pts: number[][] = [];
const n = 60;
const wShift = (wi - 1) * spreadUm * 0.18;
for (let i = 0; i < n; i++) {
const t = i / n;
const r = Math.sqrt(t) * spreadUm;
const a = i * 2.399963;
pts.push([Math.cos(a) * r + wShift, Math.sin(a) * r * 0.85]);
}
perWl.push(pts);
}
return perWl;
}
function makeSampleData(): SpotDiagramData {
const fields = [0, 5, 10, 14];
const spreads = [4, 10, 18, 28];
const spots = spreads.map((spread) => makeFieldSpots(spread));
const spotStats = spots.map((perWl) => {
const all = perWl.flat();
const cx = all.reduce((s, p) => s + p[0], 0) / all.length;
const cy = all.reduce((s, p) => s + p[1], 0) / all.length;
const d2 = all.map((p) => (p[0] - cx) ** 2 + (p[1] - cy) ** 2);
const rms = Math.sqrt(d2.reduce((s, v) => s + v, 0) / d2.length);
const geo = Math.sqrt(Math.max(...d2));
return { rms, geo };
});
return { fields, airy: 2.4, spots, spotStats };
}
const sampleData = makeSampleData();
export default function SpotDiagramFieldColorDemo() {
return (
<div className="w-full flex items-center justify-center p-8">
<SpotDiagram
data={sampleData}
colorBy="field"
scale="auto"
label="Spot diagram, four fields, colored by field"
/>
</div>
);
}
