#215
Clustered by tier
A scatter plot with three named series, Premium, Standard and Free, of 30 points each.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Clustered by tier" pattern (@codeatlasdev/ui demo #215, charts/scatter) in my app.
Call get_demo({ ids: ["#215"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Showing segments or clusters of customers as separate colour-coded groups.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- ScatterChart, ScatterSeries from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `const series: ScatterSeries[]` with 3 entries: `'Premium'`, `'Standard'`, `'Free'`
- Each series uses `cluster(30,` to generate 30 `[number, number]` points
- `color` is optional on a series, omitted here so the palette assigns one per series
- `<ScatterChart {series} yName="Conversion %"` with `yFormatter={(v) => `${v.toFixed(1)}%`}`
- `height="340px"` inside `<Card full>`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Card
@codeatlasdev/ui - ScatterChart
@codeatlasdev/ui/charts
How it is built
- `const series: ScatterSeries[]` with 3 entries: `'Premium'`, `'Standard'`, `'Free'`
- Each series uses `cluster(30,` to generate 30 `[number, number]` points
- `color` is optional on a series, omitted here so the palette assigns one per series
- `<ScatterChart {series} yName="Conversion %"` with `yFormatter={(v) => `${v.toFixed(1)}%`}`
- `height="340px"` inside `<Card full>`
Related
Loading source.