#213
Basic scatter
A scatter plot of 80 generated points in a single Data points series.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic scatter" pattern (@codeatlasdev/ui demo #213, charts/scatter) in my app.
Call get_demo({ ids: ["#213"] }) first and keep its structure. It needs @codeatlasdev/[email protected] + echarts.
Use: Exploring the relationship between two numeric variables, such as traffic and conversion.
Keep these library parts, with the props and tokens the demo uses:
- Card from "@codeatlasdev/ui"
- ScatterChart from "@codeatlasdev/ui/charts"
Behaviour to keep:
- `<ScatterChart series={[{ name: 'Data points', data }]}`
- `data` is 80 `[number, number]` pairs from `Array.from({ length: 80 }`
- `yName="Conversion %"`
- `yFormatter={(v) => `${v.toFixed(1)}%`}`
- `height="320px"` 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
- `<ScatterChart series={[{ name: 'Data points', data }]}`
- `data` is 80 `[number, number]` pairs from `Array.from({ length: 80 }`
- `yName="Conversion %"`
- `yFormatter={(v) => `${v.toFixed(1)}%`}`
- `height="320px"` inside `<Card full>`
Related
Loading source.